Tutorial: Getting Familiar with The Theme Layout

Cocoon Clear is a full-responsive WordPress (version 4.1 and above) template based on Bootstrap v3. It has a built-in home page which includes a responsive Carousel and 3 HTML Blocks. 3 content types are available for each HTML Block, they are:

  • Text – A text/image content block, recommended to use it creating short essay such as About Us, Our Mission
  • List – A list of 5 most latest posts of chosen category, ideal for What’s News, Events
  • Image Banner – An image banner with link attached, ideal for Promotion Banner, Advertising Banner

This is a clean & simple theme and you should be able to master all the basic settings once complete this tutorial. Enjoy!

admin-layout-00

 

  1. Cocoon Clear Home Page (default) – Appearance -> Theme Options -> Layout -> Home Page Layout
  2. Blog Home Page – Appearance -> Theme Options -> Layout -> Home Page Layout
    1. Background Image – Appearance -> Theme Options -> Layout -> Blog Header Image
      Header Text – Settings -> General -> Site Title
      Text – Settings -> General -> Tagline
    2. Side Bar – Appearance -> Widgets

admin-layout-01

  1. Top Navigation
    1. Brand Logo/Text – Appearance -> Theme Options -> Layout -> Logo
    2. Main Navigation – Appearance -> Menus
  2. Carousel – Appearance -> Theme Options -> Carousel
  3. HTML Blocks – Appearance -> Theme Options -> Blocks
  4. Page Footer
    1. Footer Text – Appearance -> Theme Options -> Layout -> Footer Text

admin-layout-02

  1. Post
    1. Post Header Banner – Appearance -> Theme Options -> Layout -> Content Page Header Image
  2. Page
    1. Page Header Banner – Appearance -> Theme Options -> Layout -> Content Page Header Image
    2. Page Side Bar – – Appearance -> Theme Options -> Layout -> Enable Pages Sidebar

admin-theme-color

 

  1. Preset Theme Color – Appearance -> Theme Options -> Layout -> Theme Color
    1. Blue
    2. Red
    3. Green
    4. Purple
    5. Black

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>