Author: acoda

  • Home
  • /Articles posted by ' acoda '

Getting Started

Welcome to the You. Theme, this section will give you an overview of the theme and how to get the best out the documentation.

Introduction to the You Theme

To familiarize yourself with the You theme, watch this video.

Online Interactive Documentation

For up to date Documentation, use the Interactive Documentation found here.

Use the Search Filter function to find a topic faster and easier. Search for topics like: theme installation , setting a home page , flexishapes , 3d single page

Help Center

If you can’t what you’re looking for within the Documentation, head over the Help Center – it takes seconds to sign-up and you’ll have access to the ACODA community.

Theme Installation

Learn how to install the Theme using the most popular methods.

Envato Toolkit Method ( Recommended )

The simplest method to install the theme is to use the Envato Toolkit Plugin. This option is the preferred method as it allows you to easily create backups and update to future versions.

STEP 1.

Download the Envato Toolkit Plugin here.

STEP 2.

Follow these steps to upload the zip file to your WordPress plugin area:

  • Goto your WordPress Admin
  • Click the Plugins Menu Item
  • Click Add New
  • Click Upload Plugin
  • Click Choose File
  • Locate the downloaded envato-wordpress-toolkit-master.zip file
  • Click Install Now
  • Click Activate Plugin
    • STEP 3.

    Next, connect to your Envato Marketplace account:

  • Obtain your Envato API Key from your Envato Account ( See Diagram above ).
  • Click Envato Toolkit from the WordPress Admin Menu
  • Enter your Marketplace Username and API Key
  • Click Save Settings
  • Click the Themes tab
  • Locate the Theme and click Install Automatically

    •  

     

    WordPress Admin Upload

    The most common method of installing WordPress themes is via the WordPress admin.

    Please Note. Some servers may not allow you to upload the Theme due to the size of it. The recommend method is the Envato Toolkit Method.

    STEP 1.

    Follow these steps to download the Theme from your ThemeForest downloads section:

  • Goto Your ThemeForest Account
  • Click on Downloads
  • Locate the Theme and click Download
  • Click Installable WordPress File Only
  • This will now download the the Theme zip file to your computer
    • STEP 2.

    Next, upload the zip file to your WordPress Themes area by doing the following:

  • Goto your WordPress Admin
  • Click the Appearance Menu Item
  • Click Themes
  • Click Add New
  • Click Upload Theme
  • Click Choose File
  • Locate the Theme zip file you’ve downloaded
  • Click Install Now
  • Click Activate

    •  

     

    FTP Client

    Use this method if you’re experiencing issues with the other methods or if you simply prefer to use FTP.

    Please note. Only use this option if you have experience using FTP.

    STEP 1.

    Follow these steps to download the Theme from your ThemeForest downloads section:

  • Goto Your ThemeForest Account
  • Click on Downloads
  • Locate the Theme and click Download
  • Click Installable WordPress File Only
  • This will now download the the Theme zip file to your computer
  • Unzip the downloaded file. This should reveal the Theme folder.
    • STEP 2.

    Next, upload the Theme folder to your Server by doing the following:

  • Open your FTP client and connect to your web server.
  • Locate the downloaded Theme folder ( ensure it is unzipped first )
  • Upload the Theme folder to your_server/wp-content/themes/ folder
  • Once it’s uploaded, login to your WordPress Admin
  • Click the Appearance Menu Item
  • Click Themes
  • Locate the Theme, hover over it and click Activate

    • Updating The Theme

    Learn how to update the Theme to the latest available version.

    Envato Toolkit Method ( Recommended )

    If you have not already installed the Envato Toolkit Plugin, please see guide to install it here.

  • Login to your WordPress Admin
  • Click Envato Toolkit from the WordPress Admin Menu
  • Click the Themes tab
  • Locate the Theme and click Update Automatically
    • FTP Client

    Use this method if you’re experiencing issues with the other methods or if you simply prefer FTP.

    Please note. Only use this option if you have experience using FTP.

    STEP 1.

    Download the Theme from your ThemeForest downloads area by following these steps:

  • Goto Your ThemeForest Account
  • Click on Downloads
  • Locate the Theme and click Download
  • Click Installable WordPress File Only
  • This will now download the the Theme zip file to your computer
  • Unzip the downloaded file. This should reveal the Theme folder.
    • STEP 2.

    Next, follow these steps to upload the Theme folder to your Server:

  • Open your FTP client and connect to your web server.
  • Locate the downloaded Theme folder ( ensure it is unzipped first )
  • If you wish to make a backup of the current version, locate the current version of the Theme within your_server/wp-content/themes/ and download this to your computer in a safe area
  • When you’re read to update, upload the new version of the Theme folder to your_server/wp-content/themes/
  • Once it’s uploaded, login to your WordPress Admin
  • Click the Appearance Menu Item
  • Click Themes
  • Locate the Theme, hover over it and click Theme Details to check you are now using the latest version.

    • Updating & Installing Theme Plugins

    Learn how to install & update plugins which are bundled with the Theme.

    Install & Update Messages

    Pay close attention to your WordPress admin, it will alert you when plugins need installing or updating.

    Installing Bundled Plugins

    You can check what plugins you need to install via the WordPress Admin, by following these steps:

  • Click Appearance
  • Click Install Plugins
  • Click Install on the plugins you wish to install
    • Updating Bundled Plugins

    Follow these steps to check what plugins need updating:

  • Click Appearance
  • Click Install Plugins
  • Click Update on the plugins that require updating
    • Updating Visual Composer

    Updating Visual Composer is a little different from all other plugins. Please follow these steps.

  • Click on the Plugins menu item
  • Locate the Visual Composer plugin and click Deactivate
  • Click the Delete option
  • Next, follow the steps in the “Installing Bundled Plugins” section above to install the latest version bundled with the theme.

    • DO NOT PURCHASE a Visual Composer license. Despite their instructions encouraging you to purchase a license, it’s not required. However, if you wish to take advantage of easier, auto-updating, buying a license is recommended.

    Updating Revolution Slider

    Updating Revolution Slider is a little different from all other plugins. Please follow their instructions here.

    DO NOT PURCHASE a Revolution Slider license. Despite their instructions encouraging you to purchase a license, it’s not required. However, if you wish to take advantage of easier, auto-updating, buying a license is recommended.

    Importing Demo Content

    Learn how to import demo content into your WordPress site via Theme Options or Manual Import.

    Import Demo Content via Theme Options ( Recommended )

    Importing demo content via Theme Options, will import theme options, sliders, images, pages, posts and other content to replicate the selected demo. To import the demo content via the Theme Options, do the following:

  • Login to your WordPress Admin and click Appearance
  • Click Theme Options
  • Click the Help & Demo Import tab
  • To install the demo, click the Install button. Alternatively, you can preview the demo using the Preview button.
  • Upon clicking Install, read the notice carefully before proceeding, activate the required plugins via the WordPress Admin > Appearance > Install Plugins, click OK to continue.

    •  

     

    Import Demo Content Manually

    The alternative method to importing demo content is to do it manually. Follow the steps below to achieve this.

    STEP 1.
  • Goto the WordPress Admin and click Tools
  • Click Import
  • Click WordPress
    • STEP 2.

    You maybe required to install the WordPress Importer plugin. If not, move onto STEP 3.

  • Click the Install Now button
  • Click Activate Plugin & Run Importer
    • STEP 3.

    Follow these steps to download the Theme from your ThemeForest downloads section ( If you haven’t already ).

  • Goto Your ThemeForest Account
  • Click on Downloads
  • Locate the Theme and click Download
  • Click Installable WordPress File Only
  • This will now download the the Theme zip file to your computer
  • Unzip the downloaded file. This should reveal the Theme folder
    • STEP 4.

    Next, follow these steps to locate the downloaded Theme folder and navigate to the demo you wish to install:

  • Go back to the WP Admin > Tools > Import > WordPress > Click Choose File
  • Locate the downloaded you folder
  • Locate the demos folder
  • Select which demo you want to import e.g. demo_1 for Demo 1 ( check the preview.png image for each demo to see which number correlates to which demo ).
  • Locate the demo.xml and click Open
  • Click Upload file & Import
    • STEP 5.

    If you wish to import the Theme Options, you’ll need to do the following:

  • Go to the WP Admin > Appearance > Backup Options > Import Theme Options > Click Choose File
  • Locate the downloaded you folder
  • Locate the demos folder
  • Select which demo you want to import e.g. demo_1 – check the preview.png image for each demo to see which number correlates to which demo.
  • Locate the theme_options.json and click Open
  • Click Restore Theme Options
    • STEP 6.

    The demo you want to install may contain a Revolution Slider ( or you wish to install a slider from another demo ). You can import the Slider this by doing the following ( Assuming you’ve completed STEP 3. ):

  • Go to the WP Admin
  • Click Revolution Slider ( If Revolution Slider isn’t installed, goto Appearance > Install Plugins and click Install on Revolution Slider ).
  • Hover over New Slider
  • Click Import Slider
  • Click Choose File
  • Locate the downloaded you folder
  • Locate the demos folder
  • Select which demo you want to import e.g. demo_1 – check the preview.png image for each demo to see which number correlates to which demo.
  • Check if the demo you have selected contains a revslider_X.zip file e.g. you/demos/demo_1/plugins/revslider/revslider_demo_1.zip
  • If the demo you’ve selected contains a revslider_X.zip file, click Open.
  • Click Import Slider
  • The Slider should now appear within the Revolution Sliders list

    • Theme Options Overview

    Learn how to configure the theme using the Theme Options admin panel and Customizer.

    Accessing Theme Options

    There are two ways to access your Theme Options:

  • Via WP Admin > Appearance > Customize ( Recommended )
  • Via WP Admin > Appearance > Theme Options

    • The recommended method is the Customize method, this allows you to configure the Theme Options in Real-time. Any change you make, will be shown automatically in the preview pane.

    Customize Skins

    To Customize a Skin, you’ll need to access the Customizer via WP Admin > Appearance > Customize > Customize Skins.

    You can identify the Skin settings by the small “Paintbrush” icon next to each section.

    General

    Access the General Theme Options via Appearance > Customize > General or via Appearance > Theme Options > General.

    Site Layout

    Site Layout sets the layout of the site to Wide ( stretches across the browser ) or Boxed ( confined to the Max Site Width setting )

    Max Site Width

    Set the Maximum Width of your site on Desktops. This will confine the site content within this width value. The default value is 1440px.

    Element Animation

    Element Animation sets the animation style of the Menu & Dock Bar drop down panels. It also controls the animation of Posts loading onto the page.

    Element Border Radius

    Element Border Radius controls the edges of various elements throughout the site. Here are some examples of this setting in use:

  • 0px, this sets the elements to have straight edges
  • 10px, this sets elements to have a 10px curved edge
  • 100px, this sets elements that can allow 100px and those elements that can’t, default to the maximum border radius of 15px.
    • Default Page Layout

    Default Page Layout sets the default layout for each page created & those pages that have their individual layout settings set to Default. This option can be overwritten by using the Page Layout option within the each Page.

    Breadcrumbs

    This Breadcrumbs option is a global option that controls the display of Breadcrumbs acrsoss the site. You can override this setting within the Options of each Post or Page.

    Page Comments

    Page Comments allows comments to be activate on pages. Please ensure you have enabled comments in WordPress ( Settings > Discussion ) prior to enabling this option.

    Author Bio

    Author Bio allows you to set the display of the Author Biography ( See WordPress Admin > Users > Edit > Biographical Info ) on either Posts or Posts & Pages.

    Number of Sidebars

    Set any number of sidebars using this option. Once a value is entered, the number of Sidebars will be created within WordPress Admin > Appearance > Widgets. Default is 2 sidebars.

    Use First Image of Posts

    If no Featured Image is set on the post, this option will retrieve the first image of the post and use that as a temporary “Featured Image”.

    Fancybox Lightbox

    This option controls the use of the Lightbox script. If you wish to use your own script, please disable this option.

    Lightbox Classes

    This option uses the Fancybox Lightbox script to display CSS classes within a lightbox. The class must contain a link tag, see examples below:

    .myclass a

    Alternatively:

    a.myclass

    Dock Bar

    Access the Dock Bar Theme Options via Appearance > Customize > Dock Bar or via Appearance > Theme Options > Dock Bar.

    What is the Dock Bar?

    All of the highlighted areas above are examples of the Dock Bar. The Dock Bar can be positioned in a number of areas and contain Social Icons, Shopping Cart, Search, Menu and the Information Panel Widget.

  • Dock Bar Position Header with Information Panel Widget, Social, Shopping Cart and Search Icons
  • Dock Bar Position Right Float with Social Icons
  • Dock Bar Position Right with Social & Search Icons
  • Dock Bar Position Left Float with Menu & Search Icons
    • Dock Bar Position

    This option controls the position of the Dock Bar. See the diagram above for examples of the various positions. Options with the Float setting will set the Dock Bar to float over page content.

    Dock Panel Style

    This option sets how the Dock Panels are displayed. Dock Panels are the drop panel that appears when various Dock Icons are click i.e. Shopping Cart, Search, Menu.

    Dock Bar Search

    This option will set the display of the Search Icon within the Dock Bar.

    Info Dock Panel

    For Desktop Only: Control the display of the Information Panel. To add content to this area, add widgets to WordPress Admin > Appearance > Widgets > Information Panel.

  • Info Dock Panel is set to Static this will display the widget contents within the Dock Bar.
  • Info Dock Panel is set to Dock Icon this will display the widget contents within the Icon ( See below for how to change that icon ).
    • Info Dock Icon

    If you have set the Info Dock Panel option to Dock Icon, you can choose which icon represents it here. Visit the Font Awesome site to choose the icon you want. Enter the Class only e.g.

    fa-info

    Menu Dock Icon

    If you have set the Menu In Dock Bar option to On ( See here for where to set that option ), you can choose which icon represents the Menu here. Visit the Font Awesome site to choose the icon you want. Enter the Class only e.g.

    fa-home

    Menu Dock Text

    If you have set the Menu In Dock Bar option to On ( See here for where to set that option ), you can choose to display text underneath the icon to help identify the icon as being a menu. Keep the text to a brief description e.g. Menu or Home.

    Menus

    Setup the Main Menu via Appearance > Customize > Menus. To control the position of the Menu, see the Header Theme Options.

    Creating a Menu Video Tutorial

    Watch the video tutorial for how to create a Menu and Mega Menu here.

    Menu Locations

    Use this option to assign a Menu you have created to a Location within the theme.

    Menu Name

    Click the Menu name to edit the menu.

    Add a Menu

    To create a Menu, follow this guide:

  • Goto WordPress Admin > Appearance > Customize > Menus
  • Click Add a Menu button
  • Give the Menu a name
  • Click Create Menu
  • Once it’s created, assign the Menu to a location i.e. Main Navigation
  • Click Add Items
  • Choose what Menu item you want to add.

    • Please note. If you’re creating a Menu that you do not want clickable, use a Custom Links menu item and add # to the URL

    Create a Mega Menu

    To setup a Mega Menu is simple. Follow the steps below to create one. If you are unsure how to create a new menu see the Add a Menu section above.

    STEP 1.

    If you’re not already on the Menus page – goto Appearance > Customize > Menus

  • Click the Settings icon
  • Ensure the CSS Classes option is enabled
  • Click the Menu you want to create the Mega Menu on
    • STEP 2.

    Next we first must setup the menu to be suitable for a Mega Menu. See the Diagram above to help you setup your menu.

  • This is the Menu Item that will contain the Mega Menu
  • The 2nd Level ( drag right to indent ) will determine the number of columns, in this example 4 columns ( 4 x Column Title )
  • The 3rd Level ( drag right to indent ) will display directly under the column set by the level above.
    • STEP 3.

    Now we have the Menu setup suitable for a Mega Menu, we need to activate the Mega Menu. Follow these steps to activate the Mega Menu.

  • Click on the Menu Item which you want the Mega Menu to appear on
  • Locate the CSS Classes Field ( See STEP 1. if you can not see CSS Classes ) and enter the text: mega-menu
  • Click Save & Publish and your Mega Menu will be active
    • STEP 4.

    The final step is choosing how you wish to display the Column Titles, you can follow these steps to make the Column Title appear bold and it will disable the link function of that menu item.

  • Click the Menu Item you wish to set as a Menu Title
  • Locate the CSS Classes field and enter the text: menu-title
  • Click Save & Publish

    • Blog

    Access the Blog Theme Options via Appearance > Customize > Blog or via Appearance > Theme Options > Blog.

    Default Post Layout

    Set the default Layout of the Blog pages i.e. Index, Archive, Categories.

    Column 1 Sidebar

    If you have chosen a Post Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Column 2 Sidebar

    If you have chosen a Post Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Layout Format

    Select the display Format of the posts on Blog pages.

  • Normal will display posts stack on top of each other
  • Grid will display the posts a grid layout
  • Masonry Grid will display the posts as a grid layout and optimal position based on available vertical space, like a mason fitting stones in a wall
    • Boxed Post Style

    This option allows you to display posts with a Boxed / Non-Boxed style.

  • Disabled Boxed Style
  • Enabled Boxed Style

    • The Boxed Style is set via the Appearance > Customize > Customize Skins > Body > Element Areas

    Grid Columns

    Set the number of Columns to display the posts in. Layout Format has to be set to Grid or Masonry Grid.

    Search

    Add a Search Bar to the Blog pages. Choose from the following options:

  • Disabled
  • Search Bar – A traditional search bar which will display the results on a search page
  • Search Filter – Search the posts on that current blog page and it will filter the posts based on the keyword entered
  • Search Filter + Highlight – This option uses the Search Filter as above, with the added feature of Highlighting the keyword entered within the post
    • Pagination

    Choose the Blog pagination style using the following options:

  • Ajax Click Load – This option dynamically loads the posts onto the Blog page and displays a Load More button when more posts are available to load
  • Ajax Scroll Load – This option is the same as above but instead of a Load More button, it will display more posts when you scroll to the bottom of the page
  • Page Numbers – This option uses the traditional method of displaying page numbers

    • The number of posts displayed per page or per ajax load is set via WordPress Admin > Settings > Reading > Blog pages show at most

    Featured Image

    Choose where to display the Featured Image of a Post. This option can be overwritten via the Post > General > Featured Image Display

    Share Post

    Display Social Icons at the bottom of each Single Post. You must set which icons to use via WordPress Admin > Appearance > Theme Optons > Social Media

    Related Posts

    Choose to display the Related Posts at the bottom of each Single Post or disable Related Posts.

    Archive Date Format

    Choose the Date Format for Archive Pages – See the WordPress formatting guide here.

    Single Date Format

    Choose the Date Format for Single Posts – See the WordPress formatting guide here.

    Date Position

    Choose where to position the Date on Archive & Single Posts.

    Display Date

    Choose where to display the Post Date or choose to disable Post Date.

    Display Author

    Choose where to display the Post Author or choose to disable Author.

    Display Categories

    Choose where to display the Post Categories or choose to disable Post Categories.

    Display Tags

    Choose where to display the

    Portfolio

    Access the Portfolio Theme Options via Appearance > Customize > Portfolio or via Appearance > Theme Options > Portfolio.

    Default Portfolio Page Layout

    Set the default Layout of the Portfolio pages i.e. Index, Archive, Categories.

    Column 1 Sidebar

    If you have chosen a Portfolio Page Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Column 2 Sidebar

    If you have chosen a Portfolio Page Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Layout Format

    Select the display Format of the posts on Portfolio pages.

  • Normal will display posts stack on top of each other
  • Grid will display the posts a grid layout
  • Masonry Grid will display the posts as a grid layout and optimal position based on available vertical space, like a mason fitting stones in a wall
    • Boxed Post Style

    This option allows you to display posts with a Boxed / Non-Boxed style.

  • Disabled Boxed Style
  • Enabled Boxed Style

    • The Boxed Style is set via the Appearance > Customize > Customize Skins > Body > Element Areas

    Grid Columns

    Set the number of Columns to display the posts in. Layout Format has to be set to Grid or Masonry Grid.

    Parent Portfolio Page

    Select a page which acts as the Portfolio home page. By default Portfolio index page will display.

    Portfolio Page Link

    Display a Portfolio home page link at the bottom of each Portfolio Post.

    Search

    Add a Search Bar to the Blog pages. Choose from the following options:

  • Disabled
  • Search Bar – A traditional search bar which will display the results on a search page
  • Search Filter – Search the posts on that current blog page and it will filter the posts based on the keyword entered
  • Search Filter + Highlight – This option uses the Search Filter as above, with the added feature of Highlighting the keyword entered within the post
    • Pagination

    Choose the Blog pagination style using the following options:

  • Ajax Click Load – This option dynamically loads the posts onto the Blog page and displays a Load More button when more posts are available to load
  • Ajax Scroll Load – This option is the same as above but instead of a Load More button, it will display more posts when you scroll to the bottom of the page
  • Page Numbers – This option uses the traditional method of displaying page numbers

    • The number of posts displayed per page or per ajax load is set via WordPress Admin > Settings > Reading > Blog pages show at most

    Featured Image

    Choose where to display the Featured Image of a Post. This option can be overwritten via the Post > General > Featured Image Display

    Portfolio Page – Image Alignment

    Choose what position to align Portfolio Page Images.

    Portfolio Page – Image Lightbox

    Choose to enable or disable the lightbox script on Portfolio Page Images.

    Portfolio Page – Image Size

    Enter the Portfolio Page Image size. Choose from the following sizes: thumbnail, medium, large, full or set a custom size e.g. 980×400

    Single Portfolio Post – Image Lightbox

    Choose to enable or disable the lightbox script on Single Post Images.

    Single Portfolio Post – Image Size

    Enter the Singe Portfolio Post Image size. Choose from the following sizes: thumbnail, medium, large, full or set a custom size e.g. 980×400

    Footer

    Access the Footer Theme Options via Appearance > Customize > Footer or via Appearance > Theme Options > Footer.

    Display Footer

    Choose to Display or Disable the Footer.

    Footer Columns

    Choose the number of columns to split the footer into. Add widgets to the Footer via Appearance > Widgets > Footer Column(s)

    Display Lower Footer

    Choose to Display or Disable the Lower Footer.

    Lower Footer Left Column

    By default this column will display – © Year Site Title

    Lower Footer Right Column

    By default this field displays Powered by You Theme. To remove Powered by You Theme – simply add your own text or a blank character like:

     

    Social Media

    Access the Social Media Theme Options via Appearance > Theme Options > Social Media.

    Dock Social Icons

    Choose to display Social Icons within the Dock Bar.

    Share Icon

    The Share icon collapses all selected Social Icons into a sinlge Share icon.

    Social Icon Color

    Set the color of the Social Icons. Choose from the following:

  • Default inherits the color set in the Appearance > Customize > Customize Skins > Dock Bar > Dock Icons
  • Color sets the icon to the native color of the social icon
  • Color on Hover sets the icon background to the native color of the social icon
    • Enable Social Icons

    Enable the Social Icons you wish to display within the Dock Bar and Post Share Icons ( See Blog options for how to enable Share Icons on posts )

    Digg Facebook LinkedIn Del.icio.us Reddit Stumble Twitter Google RSS YouTube Vimeo Pinterest Soundcloud Instagram Flickr Email

    Social Icons URL’s

    Set the URL of each Social Icon. Use [get_the_title] or [get_permalink] to display the Page Title and Permalink within the URL.

    Custom Scripts

    Access the Custom Scripts Theme Options via Appearance > Customize > Custom Scripts or via Appearance > Theme Options > Custom Scripts.

    Script Before </head>

    Add Javascript / jQuery into this field to appear directly before the </head> tag. This is ideal for Google Analytics.

    Please note: You must include the <script> tags e.g.

    <script> /* YOUR SCRIPT HERE */ </script>

    Script Before </body>

    Add Javascript / jQuery into this field to appear directly before the </body> tag. This is ideal for custom scripts.

    Please note: You must include the <script> tags e.g.

    <script> /* YOUR SCRIPT HERE */ </script>

    Custom CSS

    Access the Custom CSS Theme Options via Appearance > Customize > Custom CSS or via Appearance > Theme Options > Custom CSS.

    Custom CSS

    If you require changes to the CSS on your site, use Custom CSS field to override the default CSS. This is safe from updates.

    Please note: Only use this option if you have experience using CSS.

    Mobile CSS

    If you require changes to the CSS on your site for Mobile devices, use Mobile CSS field to override the default CSS. This CSS becomes active when screen sizes are less than 1025px. This is safe from updates.

    Please note: Only use this option if you have experience using CSS.

    WooCommerce

    Access the WooCommerce Theme Options via Appearance > Customize > WooCommerce or via Appearance > Theme Options > WooCommerce.

    Install WooCommerce Plugin

    The following options will only display once the WooCommerce plugin has been installed.

    To install the WooCommerce Shop plugin, goto WordPress Admin > Plugins > Add New > Search for Woocommerce > Click Install Now.

    For Help with configuring WooCommerce, see the documentation here.

    Woocommerce Page Layout

    This option sets the Page Layout for all Woocommerce pages, including: Shop, Single Product, Cart & Checkout.

    Please Note: You cannot use the Page > Layout options for WooCommerce pages. You can however create a Custom Shop Page which has it’s own Page Layout.

    Woocommerce Column 1 Sidebar

    If you have chosen a Woocommerce Page Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Woocommerce Column 2 Sidebar

    If you have chosen a Woocommerce Page Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Cart Dock Icon

    Use this option to Display or Hide the Cart Icon.

    Search Products Only

    This option changes the Search bar to search for Products only ( Not posts, pages etc ).

    bbPress

    Access the bbPress Theme Options via Appearance > Customize > bbPress or via Appearance > Theme Options > bbPress.

    Install bbPress Plugin

    The following options will only display once the bbPress plugin has been installed. To install the bbPress Shop plugin, goto WordPress Admin > Plugins > Add New > Search for bbPress > Click Install Now.

    For help with configuring bbPress, see the documentation here.

    bbPress Page Layout

    This option sets the Page Layout for all bbPress pages.

    bbPress Column 1 Sidebar

    If you have chosen a bbPress Page Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    bbPress Column 2 Sidebar

    If you have chosen a bbPress Page Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Editing & Creating a Skin

    Learn how to Edit, Create and Apply a Skin to your site. You’ll also learn how to apply different Skins to individual pages.

    Editing & Creating Skins Video Tutorial

    Watch this video tutorial on how to Create and Edit Skins here.

    STEP 1.

    To Customize a Skin, you’ll need to access the Customizer via WP Admin > Appearance > Customize > Customize Skins.

    You can identify the Skin settings by the small “Paintbrush” icon next to each section.

    STEP 2.

    To Edit, Create or apply a Skin to your site, click the Select Skin section. You’ll also notice in the above diagram that the Customizer will tell you what Skin you’re currently editing. This isn’t the necessarily the Skin that’s applied to your site.

    STEP 3.

    Once you’ve clicked on Select Skin you’ll see the options in the above diagram.

  • This shows the Skin you’re Currently Editing
  • Use the Select box to select the Skin you wish to Edit – please wait for the page to refresh
  • To create a New Skin, click the New button. Enter a Name when requested and click Save
  • To Duplicate the current Skin you’re editing, click Duplicate. Enter a Name when requested and click Save
  • To Delete the current Skin you’re editing, click Delete. If you delete a Skin that is bundled with the Theme, it will automatically regenerate itself with the default settings
  • To Apply a Skin to your site, select the Skin you wish to use from the Select Box. If no Skin is selected here, it will use the Skin that’s currently been edited
  • Once you’re done Editing, click Save & Publish
    • STEP 4.

    If you wish to apply a different Skins to individual pages or posts, follow these steps:

    Edit the Post or Page:

  • Locate the Skin tab
  • Click the Skin Select Box ( Default will use the Skin that’s applied in the Customizer > Customize Skins > Select Skin > Apply to Skin )
  • Choose the Skin you wish to apply to that page only.

    • Once you’ve selected the Skin, save the Post or Page and the Skin you’ve selected will now be applied to that page.

    Dock Bar Skin Colors

    Learn how to change the Dock Bar Background Color, Background Image, Border Color Font Colors & Dock Icon Colors.

    Edit Dock Bar Skin Settings Video Tutorial

    Watch the video tutorial on how to edit the Dock Bar Skin Settings here.

    Edit the Dock Bar Skin Settings

    To Edit the Dock Bar Skin settings, goto the WordPress Admin > Customize > Customize Skins > Dock Bar

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Dock Bar Background Color

    Change the Background Color of the Dock Bar.

    Please Note: This option only applies if you have set the Dock Bar Position to a position that is not Header.

    Dock Bar Background Image

    Use this option to set a Background Image. You can position the following settings to position the image.

    Please Note: This option only applies if you have set the Dock Bar Position to a position that is not Header.

    Image Position

    • Center Center
    • Center Top
    • Center Bottom
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom

    Image Repeat

    • Repeat ( Ideal for pattern images )
    • Repeat X – Repeat along the X axis
    • Repeat Y – Repeat along the Y axis
    • No Repeat

    Image Size

    • Cover – This option sets the image to cover the entire area
    • Contain – This option sets the image to contain itself within the area
    Dock Bar Border

    Use this option to set a Border Color on the Dock Bar.

    Please Note: This option only applies if you have set the Dock Bar Position to a position that is not Header.

    Dock Bar Font Color

    This option changes the Font Color within the Dock Bar. Use this option to change the text color of the Information Panel Widget when set to Static.

    Please Note: This does not change the Dock Icon Colors, see below to change the color of Dock Icons.

    Dock Bar Link Colors

    Use this option to change the color of links within the Dock Bar. This includes the Dock Icons.

    Dock Bar Link Hover Colors

    Use this option to change the hover color of links within the Dock Bar. This includes the Dock Icons.

    Dock Icon Size

    Use this option to change the size of the Dock Icons. This includes the size of Social Icons, size of Cart and size of Search icons.

    Dock Icon Color

    Use this option to set a Dock Icon color, which override the Dock Bar Link color. This is useful if you set a Dock Icon background ( See below ).

    Dock Icon Background Color

    Use this option to set a Dock Icon Background Color.

    Dock Icon Border Color

    Use this option to set a Dock Icon Border Color.

    Dock Dropdown Background Color

    Use this option to change the Background Color of Dock Icon Dropdown Panels. This includes Droppanels for Shopping Cart, Search & Information Panel.

    Dock Dropdown Background Opacity

    Use this option to change the Background Opacity of Dock Icon Dropdown Panels. This includes Droppanels for Shopping Cart, Search & Information Panel.

    Dock Dropdown Font Color

    Use this option to change the Font Color of the Dock Icon Dropdown Panels

    Dock Dropdown Link Color

    Use this option to change the Link Color of the Dock Icon Dropdown Panels

    Dock Dropdown Link Hover Color

    Use this option to change the Link Hover Color of the Dock Icon Dropdown Panels

    Dock Dropdown Element Color

    Use this option to change the Element Colors of Dock Icon Dropdown Panels. This includes form fields text.

    Dock Dropdown

    Header Skin Colors

    Learn how to change the Header Background Color, Background Image, Border Color Font Colors and Set an Alternative Logo

    Edit Header Skin Settings Video Tutorial

    Watch the video tutorial for editing the Header Skin Settings here.

    Edit the Header Skin Settings

    To Edit the Header Skin settings, goto the WordPress Admin > Customize > Customize Skins > Header

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Alternative Logo

    Use this option to set an Alternative Logo to the one being used in the main admin settings – WordPress Admin > Customize > Header > Logo URL.

    The logo set here will only display on the Pages that have this Skin applied to it.

    Header Background Color

    Change the Background Color of the Header. This color will also set the the Main Menu Drop Menus ( This can be overridden using the Sub Menu Background Color – see option below ).

     

    Header Background Opacity

    Change the Background Color Opacity of the Header. This opacity only affects the color and not the background image.

    Header Background Image

    Use this option to set a Background Image. You can position the following settings to position the image.

    Image Position

    • Center Center
    • Center Top
    • Center Bottom
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom

    Image Repeat

    • Repeat ( Ideal for pattern images )
    • Repeat X – Repeat along the X axis
    • Repeat Y – Repeat along the Y axis
    • No Repeat

    Image Size

    • Cover – This option sets the image to cover the entire area
    • Contain – This option sets the image to contain itself within the area
    Header Border

    Use this option to set a Border Color on the Header.

    Header Font Color

    This option changes the Font Color within the Header. Use this option to change the text color of the Header Panel Widget and Logo Tagline.

    Please Note: This does not change the Dock Icon Colors, see below to change the color of Dock Icons.

    Header Link Colors

    Use this option to change the color of links within the Header. This includes the Menu & Dock Icons when the Dock Bar position is set to Header.

    Header Link Hover Colors

    Use this option to change the hover color of links within the Header. This includes the Menu & Dock Icons when the Dock Bar position is set to Header.

    Main Menu Link Color

    This option specifically targets the Main Menu Link Colors within the header. This overrides the Header Link Color ( See above ).

    Main Menu Link Hover Color

    This option specifically targets the Main Menu Link Hover Colors within the header. This overrides the Header Link Hover Color ( See above ).

    Main Menu Link Hover Background Color

    This option specifically targets the Main Menu Link Hover Colors within the header. This overrides the Header Link Hover Color ( See above ).

    Submenu Background Color

    Use this option to set a Submenu Background Color, which overrides the Header Background Color value which the Submenu naturally inherits.

    Submenu Background Opacity

    Use this option to set a Submenu Background Opacity.

    Submenu Link Color

    Use this option to set a Submenu Link Color.

    Submenu Link Hover Color

    Use this option to set a Submenu Link Hover Color.

    Submenu Link Hover Background Color

    Use this option to set a Submenu Link Hover Background Color.

    Transparent Header Font Color

    When the Floating Header option is set to Float + Transparent , use this option to set the Header Font

    Sub header Skin Colors

    Learn how to change the Sub Header Background Color, Background Image, Border Color & Font Colors.

    Edit the Sub Header Skin Settings Video Tutorial

    Watch the video tutorial on editing the Sub Header Skin Settings here.

    Edit the Sub header Skin Settings

    To Edit the Sub header Skin settings, goto the WordPress Admin > Customize > Customize Skins > Sub header

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Sub header Background Color

    Change the Background Color of the Sub header.

    Header Background Image

    Use this option to set a Background Image. You can position the following settings to position the image.

    Image Position

    • Center Center
    • Center Top
    • Center Bottom
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom

    Image Repeat

    • Repeat ( Ideal for pattern images )
    • Repeat X – Repeat along the X axis
    • Repeat Y – Repeat along the Y axis
    • No Repeat

    Image Size

    • Cover – This option sets the image to cover the entire area
    • Contain – This option sets the image to contain itself within the area
    Header Border

    Use this option to set a Border Color on the Sub header.

    Sub header Font Color

    This option changes the Font Color within the Sub header. This includes the current page Breadcrumb Color.

    Sub header Link Colors

    Use this option to change the color of links within the Sub header. This includes the Breadcrumb Link Color.

    Header Link Hover Colors

    Use this option to change the hover color of links within the Header. This includes the Menu & Dock Icons when the Dock Bar position is set to Header.

    Sub header Title Color

    Use this option to change the color of the Sub header Title Color.

    Sub header Subtitle Color

    Use this option to change the color of the Sub header Subtitle Color.

    Body Skin Colors

    Learn how to change the Body Background Color, Background Image, Button Colors, Border Color & Font Colors.

    Edit the Body Skin Settings Video Tutorial

    Watch the video tutorial of editing the Body Skin Settings here.

    Edit the Body Skin Settings

    To Edit the Body Skin settings, goto the WordPress Admin > Customize > Customize Skins > Body

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Body Background Color

    Change the Background Color of the Body. This is the area between the Header and Footer sections.

     

    Body Background Opacity

    Change the Background Color Opacity of the Body. This is the area between the Header and Footer sections. This option does not affect the Background Image opacity.

     

    Body Background Image

    Use this option to set a Background Image. You can position the following settings to position the image.

    Image Position

    • Center Center
    • Center Top
    • Center Bottom
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom

    Image Repeat

    • Repeat ( Ideal for pattern images )
    • Repeat X – Repeat along the X axis
    • Repeat Y – Repeat along the Y axis
    • No Repeat

    Image Size

    • Cover – This option sets the image to cover the entire area
    • Contain – This option sets the image to contain itself within the area
    Shaded Areas Color

    This option controls the font Color of Shaded Areas – these areas include Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Related Posts Background & Boxed Posts Style.

    Shaded Areas Background Color

    This option controls the Background Color of Shaded Areas – these areas include Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Related Posts Background & Boxed Posts Style.

    Shaded Areas Border Color

    This option controls the Border Color of Shaded Areas – these areas include Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Dividers, Related Posts Background & Boxed Posts Style.

    Button Color

    This option changes the default Button Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color. If a Button Color is not specified, it will use the Body Link Color instead.

    Button Hover Color

    This option changes the default Button Hover Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

    Button Text Color

    This option changes the default Button Text Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

    Button Text Hover Color

    This option changes the default Button Hover Text Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

    Body Font Color

    This option changes the Font Color within the across the Site. This setting can be overridden by choosing a Font Color within each Skin Section .e.g. WordPress Admin > Customize > Customize Skins > Header

    Body Link Colors

    This option changes the Link Color within the across the Site. This setting can be overridden by choosing a Font Color within each Skin Section .e.g. WordPress Admin > Customize > Customize Skins > Header

    Body Link Hover Colors

    This option changes the Link Hover Color within the across the Site. This setting can be overridden by choosing a Font Color within each Skin

    Footer Skin Colors

    Learn how to change the Footer Background Color, Background Image & Font Colors.

    Edit Footer Skin Settings Video Tutorial

    Watch the video tutorial for editing the Footer Skin Settings here.

    Edit the Footer Skin Settings

    To Edit the Footer Skin settings, goto the WordPress Admin > Customize > Customize Skins > Footer

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Footer Background Color

    Change the Background Color of the Footer.

    Footer Background Image

    Use this option to set a Background Image. You can position the following settings to position the image.

    Image Position

    • Center Center
    • Center Top
    • Center Bottom
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom

    Image Repeat

    • Repeat ( Ideal for pattern images )
    • Repeat X – Repeat along the X axis
    • Repeat Y – Repeat along the Y axis
    • No Repeat

    Image Size

    • Cover – This option sets the image to cover the entire area
    • Contain – This option sets the image to contain itself within the area
    Footer Shaded Areas Color

    This option controls the font Color of Footer Shaded Areas – these areas include Form Fields, Search Form, Social Icons Color

    Shaded Areas Background Color

    This option controls the Background Color of the Footer Shaded Areas – these areas include Form Fields, Search Form, Social Icons Background Color

    Shaded Areas Border Color

    This option controls the Border Color of the Footer Shaded Areas – these areas include Form Fields, Search Form, Social Icons Border Color

    Footer Font Color

    This option changes the Font Color within the Footer area.

    Footer Link Colors

    This option changes the Link Color within the Footer area.

    Body Link Hover Colors

    This option changes the Link Hover Color within the Footer area.

    Footer Heading Colors

    Set the colors of Footer Heading 3 Color & Footer Heading h4 – h6 Colors. This includes the Footer Widget Titles.

    Skin Font Settings

    Learn how to change the Theme Font Settings.

    Edit Font Settings Video Tutorial

    Watch the video tutorial for editing the Skin Font Settings here.

    Edit the Font Settings

    To Edit the Font Skin settings, goto the WordPress Admin > Customize > Customize Skins > Font Settings

    Each section has the following setting you can control:

    • Font Family – Choose from over 700 fonts from the Google Fonts Library
    • Font Style – This option allows you to set the Font Weight. When the Font Family is selected, the available font styles will display
    • Text Transform – Use this option to change the Font Transform, choose from UPPERCASE, Capitalize, lowercase
    • Font Size – Control the Font Size
    • Letter Spacing – Set the spacing between each letter

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    General Font Settings

    This setting will set the Font Family for the entire site. Choose from over 700 fonts from the Google Fonts Library.

    Please Note: This setting can be overridden by setting a different Font Family for each section i.e. Header, Logo, Menu, Footer, Headings – See options below.

    Logo Font Settings

    If an image is not being used as the Logo, this setting will control the Font Settings for the Logo section.

    Logo Font Tagline Settings

    This setting will control the Font Settings for the Logo Tagline section.

    Menu Font Settings

    This setting will control the Font Settings for the Main Menu section.

    Headings Font Settings

    This setting will control the Font Settings for the Headings tags, including h1, h2, h3, h4, h5, h6.

    This section also allows you to control the Page Title Font Size and the Page Subtitle Font Size.

    Background Skin Settings

    Learn how to set a Background Color or Image for the entire site. This setting is useful if you’re using the Boxed site layout.

    Edit the Background Skin Settings

    To Edit the Background Skin settings, goto the WordPress Admin > Customize > Customize Skins > Background

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Background Color

    Use this option to set the Background Color.

    Background Image

    Use this option to set a Background Image. You can position the following settings to position the image.

    Image Position

    • Center Center
    • Center Top
    • Center Bottom
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom

    Image Repeat

    • Repeat ( Ideal for pattern images )
    • Repeat X – Repeat along the X axis
    • Repeat Y – Repeat along the Y axis
    • No Repeat

    Image Size

    • Cover – This option sets the image to cover the entire area
    • Contain – This option sets the image to contain itself within the area

    Page Options

    Access the Page Options via WordPress Admin > Pages > Add New or Edit an Existing Page > Scroll to the Tabs section.

    General Tab

    The General Tab consists of the following Page Options:

    • Display Title – Use this option to display or disable the Page Title
    • Alternative Page Title – If you wish to display an Alternative Title to the Page Title, use this option ( Ideal for having a different title from the Menu title )
    • Subtitle – Use this option to enter a Sub title for the page. This will appear directly below the Page Title text
    • Breadcrumbs – Override the global Breadcrumb option set in the Theme Options
    Layout Tab

    The Layout Tab consists of the following Page Options:

    General

    • Site Layout – Override the global Site Layout option, choose between Default, Wide or Boxed
    • Page Layout – Change the Page Layout for this page only. This overrides the default Page Layout set in the Theme Options
    • Column 1 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 1 ( Left Column )
    • Column 2 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 2 ( Right Column )

    Header / Menu

    • Dock Bar – Choose to Display or Disable the Dock Bar on this page
    • Header Display – Choose to Display or Disable the Header on this page
    • Sticky Header – Enable or Disable the Sticky Header on this page
    • Horizontal Layout – Override the global Header Horizontal Layout for this page
    • Vertical Layout – Override the global Header Vertical Layout for this page
    • Logo Top Margin – Set the Logo Top Margin for this page ( Space above the Logo )
    • Logo Bottom Margin – Set the Logo Bottom Margin for this page ( Space below the Logo )
    • Menu Top Margin – Set the Menu Top Margin for this page ( Space above the Menu )
    • Menu Bottom Margin – Set the Menu Bottom Margin for this page ( Space below the Menu )
    • Floating Header – Set the Header to Float over the page content. Float + Transparent will remove the Background Color / Image
    • Title / Breadcrumbs Layout – Change the Page Title & Breadcrumbs Alignment for this page
    • Menu – Choose a different Menu for this page

    Footer

    • Footer – Enable or Disable the Footer for this page
    Single Page

    The Single Page Tab consists of the following Page Options – Use these options to create a Single Page.

    • Animate Type – Set what type of Single Page animation you want
    • Bullet Navigation – Enable or Disable the Bullet Navigation for Single Pages. This option does not apply to the Normal setting
    • Directional Navigation – Set what type of Directional Navigation ( Arrows that Navigate between each Slide )
    Social

    Choose to Display the Dock Bar Social Icons on this page. Select which icons you wish to display or disable.

    Skin

    Use this option to display an alternative Skin for this page.

    Blog Template

    Use the following options to turn the page into a Blog Page, these settings override the Settings within the Theme Options ( Appearance > Customize > Blog )

    To enable a Blog on this page, Select “Blog Template” from the Template drop down menu under Page Attributes.

    Blog Template

    • Layout Format – Choose to display the Posts Stacked ( Normal ), Grid or Masonry

    Post Options

    Access the Post Options via WordPress Admin > Posts > Add New or Edit an Existing Post > Scroll to the Tabs section.

    General Tab

    The General Tab consists of the following Page Options:

    • Display Title – Use this option to display or disable the Page Title
    • Alternative Page Title – If you wish to display an Alternative Title to the Page Title, use this option ( Ideal for having a different title from the Menu title )
    • Subtitle – Use this option to enter a Sub title for the page. This will appear directly below the Page Title text
    • Breadcrumbs – Override the global Breadcrumb option set in the Theme Options

    Share + Related Posts

    • Share Post – Display or Disable Social Icons on this post
    • Related Posts – Display or Disable Related Posts on this post
    • Featured Image – Choose to display the Featured Image on this post
    Post Metadata Tab

    Override the Metadata Theme Options set within Appearance > Customize > Blog.

    • Date – Display or Disable the Date on this post
    • Author – Display or Disable the Author on this post
    • Categories – Display or Disable the Categories on this post
    • Tags – Display or Disable the Tags on this post
    • Like – Display or Disable the Like button on this post
    • Comments – Display or Disable the Comments on this post
    Layout Tab

    The Layout Tab consists of the following Page Options:

    General

    • Site Layout – Override the global Site Layout option, choose between Default, Wide or Boxed
    • Page Layout – Change the Page Layout for this page only. This overrides the default Page Layout set in the Theme Options
    • Column 1 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 1 ( Left Column )
    • Column 2 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 2 ( Right Column )

    Header / Menu

    • Dock Bar – Choose to Display or Disable the Dock Bar on this page
    • Header Display – Choose to Display or Disable the Header on this page
    • Sticky Header – Enable or Disable the Sticky Header on this page
    • Horizontal Layout – Override the global Header Horizontal Layout for this page
    • Vertical Layout – Override the global Header Vertical Layout for this page
    • Logo Top Margin – Set the Logo Top Margin for this page ( Space above the Logo )
    • Logo Bottom Margin – Set the Logo Bottom Margin for this page ( Space below the Logo )
    • Menu Top Margin – Set the Menu Top Margin for this page ( Space above the Menu )
    • Menu Bottom Margin – Set the Menu Bottom Margin for this page ( Space below the Menu )
    • Floating Header – Set the Header to Float over the page content. Float + Transparent will remove the Background Color / Image
    • Title / Breadcrumbs Layout – Change the Page Title & Breadcrumbs Alignment for this page
    • Menu – Choose a different Menu for this page

    Footer

    • Footer – Enable or Disable the Footer for this page
    Social

    Choose to Display the Dock Bar Social Icons on this page. Select which icons you wish to display or disable.

    Skin

    Use this option to display an alternative Skin for this page.

    Media

    Use these options to add a Video or Audio to a post. The Media Tab consists of the following Post Options:

    • Media

    How to Create a One Page

    Learn how to create One Page sites easily, including 3d pages.

    Creating a "One Page" Video Tutorial

    Learn how to create a One Page site using this video tutorial.

    Creating a "One Page" Site

    Creating a One-Page is very simple, using the Visual Composer, each Row you add to the page will act as a Slide / Page ( depending on how you want to describe it ). In this example, we’re going to create 3 Rows ( Slides ).

    If you want ready made One-Page content, it’s recommended to import one of the demos that use a One Page setup.

    To create one from scratch – ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

    Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

    STEP 1.

    Create Row ( Slide ) 1 Go ahead and create the first Row – if you’re not sure on how to add Rows, check out the Using Rows section.

  • Row Height – If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  • Anchor Link Name – this option is important for the Menu later on in the section, enter intro for the first slide ( this needs to be a unique name to describe the Slide )
  • Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  • Click Save changes and Close
  • Add some content within the Row e.g. Text Block element e.g. Slide 1 ( You can add more content later once the setup is complete )
    • STEP 2.

    Create Row ( Slide ) 2 Go ahead and create the second Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

    • Row Height – If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
    • Anchor Link Name – enter services for the second slide
    • Design Options – click the Design options tab and add a Background Image or Color ( example #E0E0E0 )
    • Add some content to the Row e.g. Text Block element e.g. Slide 2
    STEP 3.

    Create Row ( Slide ) 3 Go ahead and create the third Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

    • Row Height – If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
    • Anchor Link Name – enter contactus for the last slide
    • Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
    • Add some content to the Row e.g. Text Block element e.g. Slide 3

    As long as we’ve kept the Row Height as default, it should look similar to the diagram above.

    Once we’re happy with the content, click Update and then click the Backend Editor button

    STEP 4.

    Choose what Type of Singe Page Now we’re back in the Backend Editor, scroll down to the bottom of the Page and goto the Single Page tab.

  • Animate Type – Choose the Animate Type – let’s use 3d Vertical for this example
  • Bullet Navigation – enabling this option will

    • Create a Blog Page

    Learn how to create a Blog page using the Blog Template.

    Using Blog Templates

    By using the Blog Template, you can set any page and any number of pages as a Blog page. Using the Page options, you can make each Blog Page unique, by setting options like Format, Grid Columns, Lazy Load and more. You can also specify the Categories you wish to display.

    STEP 1.

    Apply the Blog Template

  • Create a new page via WordPress Admin > Pages > Add New and Give the Page a title e.g. My Blog
  • Goto Page Attributes and select Blog from the Template select menu – without this option set, the page will not function like a Blog
    • STEP 2.

    Configure the Blog Format See the Page Options section for a definition of each of the Blog Template options ( Scroll to Blog Template ). For this example we’re going to set the following options, which are the same options I’ve used for the You Theme online Documentation.

  • Click the Blog Template tab to reveal the Blog Page options
  • We’ll set the Layout Format to Masonry Grid – this format works best with content that has variable sizes
  • Enable the Boxed Post Style – this uses the Skin > Shaded colors to style the posts
  • Set the Grid Columns to Three
  • The You Online Documentation makes use of the Search Filter + Highlight function
  • Choose a Category you wish to display on this page

    • You page is now a Blog page.

    Warning: Do not assign this or any other Blog Template page as a Posts page in WordPress Admin > Settings > Reading – the Blog Page will cease to function.

    Portfolio Options

    Once the Portfolio plugin is installed – access the Portfolio Options via WordPress Admin > Portfolio > Add New or Edit an Existing Post > Scroll to the Tabs section.

    Install Portfolio Plugin

    To install the Portfolio plugin, goto WordPress Admin > Appearance > Install Plugins > Locate Portfolio Post Type > Click Install.

    To access the global Portfolio options, goto WordPress Admin > Appearance > Customize > Portfolio.

    General Tab

    The General Tab consists of the following Page Options:

    • Display Title – Use this option to display or disable the Page Title
    • Alternative Page Title – If you wish to display an Alternative Title to the Page Title, use this option ( Ideal for having a different title from the Menu title )
    • Subtitle – Use this option to enter a Sub title for the page. This will appear directly below the Page Title text
    • Breadcrumbs – Override the global Breadcrumb option set in the Theme Options

    Share + Related Posts

    • Share Post – Display or Disable Social Icons on this post
    • Related Posts – Display or Disable Related Posts on this post
    • Featured Image – Choose to display the Featured Image on this post
    Layout Tab

    The Layout Tab consists of the following Page Options:

    General

    • Site Layout – Override the global Site Layout option, choose between Default, Wide or Boxed
    • Page Layout – Change the Page Layout for this page only. This overrides the default Page Layout set in the Theme Options
    • Column 1 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 1 ( Left Column )
    • Column 2 Sidebar – If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 2 ( Right Column )

    Header / Menu

    • Dock Bar – Choose to Display or Disable the Dock Bar on this page
    • Header Display – Choose to Display or Disable the Header on this page
    • Sticky Header – Enable or Disable the Sticky Header on this page
    • Horizontal Layout – Override the global Header Horizontal Layout for this page
    • Vertical Layout – Override the global Header Vertical Layout for this page
    • Logo Top Margin – Set the Logo Top Margin for this page ( Space above the Logo )
    • Logo Bottom Margin – Set the Logo Bottom Margin for this page ( Space below the Logo )
    • Menu Top Margin – Set the Menu Top Margin for this page ( Space above the Menu )
    • Menu Bottom Margin – Set the Menu Bottom Margin for this page ( Space below the Menu )
    • Floating Header – Set the Header to Float over the page content. Float + Transparent will remove the Background Color / Image
    • Title / Breadcrumbs Layout – Change the Page Title & Breadcrumbs Alignment for this page
    • Menu – Choose a different Menu for this page

    Footer

    • Footer – Enable or Disable the Footer for this page
    Social

    Choose to Display the Dock Bar Social Icons on this page. Select which icons you wish to display or disable.

    Skin

    Use this option to display an alternative Skin for this page.

    Portfolio

    Use the Portfolio tab to set the Parent Portfolio Page for this post. When the “back to Portfolio” page links are clicked – including breadcrumbs, it will take the user back to the page set here. If no parent page is set, it will use the Portfolio Archive page as a parent.

    How to Create a Portfolio Page

    Learn how to create Portfolio Posts, assign them to Categories and create a Portfolio Page with Filtering.

    Creating a Portfolio Page Video Tutorial

    Learn how to create a Portfolio Page using this video tutorial.

    STEP 1.

    Install Plugin Ensure the Portfolio Plugin is installed – to install the Portfolio plugin, goto WordPress Admin > Appearance > Install Plugins > Locate Portfolio Post Type > Click Install.

    STEP 2.

    Create Post Let’s create our Portfolio Posts. Goto WordPress Admin > Portfolio > Add New Item > Once the page has loaded Enter a Post title.

    For this stage, we need to ensure we see the Visual Composer Editor buttons are displayed.

    If you can not see buttons in the diagram above, goto WordPress Admin > Visual Composer > General Settings > Role Manager > Post Types ( assuming you’re administrator ) > Ensure Portfolio is Checked.

    STEP 3.

    Adding Content Next, we need to add content to our Portfolio Post. We’ll use the Visual Composer to do this.

    You can use the many Elements to add content to the post – at this stage we have a few choices – see diagram for reference.

  • Backend Editor – Click the Backend Editor to start adding Elements to the post
  • Frontend Editor – Click the Frontend Editor button to start adding Elements to the post on the Frontend of your site ( Add / Edit Elements in real-time )
  • Use Demo Portfolio – Click the Text view button and paste in the HTML from the Classic Demo ( See below ).

    • Use Demo Portfolio If you would like to use the format used on the Classic Demo and have not installed the Demo Content ( recommended ) you can use the following steps to paste the HTML from the demo into the post:

  • To do this, click the Text view button ( see diagram )
  • Copy all of the following HTML from this File
  • Paste the HTML into the Editor field ( See arrow in diagram )

    • Once you have pasted the HTML into the Editor field, follow these steps:

  • Click the Visual button
  • Click the Backend Editor button
  • You should now see all of the content on the Post and you can edit it with your own text and images

    •  

     

    STEP 4.

    Assign Post to Categories Once we’re happy with our Portfolio Post content, we can assign the Post to a Category. This is essential if you wan to use Animated Filtering to filter your Portfolio posts by Category.

    To add a post to a Category, follow these steps, see the diagram above for reference.

  • Locate the Portfolio Categories section of the post.
  • Click + Add New Portfolio Category
  • Enter the Name of your Category
  • Click the Add New Portfolio Category
  • Select the Categories you wish to assign this Portfolio Post to
  • Click Publish
    • STEP 5.

    Create a Template If you would like to use the same format for all your other Portfolio Posts, you can save the Portfolio Post you’ve just created as a Template. This will save you time and keep your Portfolio Posts consistent.

    To create a Template, follow these steps – see diagram for reference:

  • Whilst editing the post you wish to create a Template from, click the Templates Icon
  • Give the Template a Name e.g. My Portfolio Template
  • Click Save Template
    • STEP 6.

    Load a Template If you wish to load a template you’ve created or one of the default templates, create a new Post and follow these steps:

  • Click the Templates Icon,
  • Goto the Default Templates tab
  • Search for your Template e.g. My

    • How to use the Visual Page Builder

    Learn how to use the Visual Composer Page Builder plugin.

    Installing Visual Composer

    If you haven’t already installed the Visual Composer, please install by following these step.

    Goto the WordPress Admin > Appearance > Install Plugins > Locate Visual Composer > Click Install

    Getting Started with Visual Composer

    To start using Visual Composer, Add New or Edit an existing Page, Portfolio, Post or any other Post type.

    Once the Page or Post is loaded, If you can not see buttons in the diagram above, goto WordPress Admin > Visual Composer > General Settings > Role Manager > Post Types ( assuming you’re administrator ) > Ensure the Post type you’re using the Visual Composer on is Checked e.g. portfolio

    Backend Editor

    If you’re creating a new page, clicking the Backed Editor button will display a screen similar to the one in the diagram above.

  • Clicking these buttons will add an Element to the page.
  • Clicking these buttons will load or create a Template ( See below )
  • The Add a Text Block will add a Text Block element to the page, this is one of the most common elements you’ll need
  • Add Custom CSS to this page only
  • Enter Full Screen Mode
  • Enters the Frontend mode
    • Frontend Editor

    The Frontend Editor button enters the Frontend editing mode, this allows you to add Elements in real-time.

    As you can see from the diagram above, you can now Add / Edit Elements in real-time and see exactly how the page will look once you’re done editing. This removes most of the guess work.

  • Clicking these buttons will add an Element to the page.
  • Clicking these buttons will Load or Create a Template ( See below )
  • The Add a Text Block will add a Text Block element to the page, this is one of the most common elements you’ll need
  • Add Custom CSS to this page only
  • Enter Full Responsive Mode – See how the Page will look on a Mobile device
  • Enters the Backend Editor mode
    • Editing Elements

    Once you’ve added an Element has been added to a page, to edit that Element, simply rollover it and icons will appear for you to select. See the diagram above for reference:

  • The Pencil Icon is the Edit Element button
  • This icon represents Columns ( Only available on Row Elements )
  • The + icon represents Add Element
  • This icon represents Duplicate Element
  • The trash can represents Delete Element
  • Use this icon to Drag the Element to a new position
  • Once you click the Edit button, the Element Settings will appear in a new window
    • Create a Template

    If you have created a series of Elements which you would like to use for other posts or page, you can create a Template from that Page or Post. This will save you time and keep your posts or pages consistent.

    To create a Template, follow these steps – see diagram for reference:

  • Whilst editing the post or age you wish to create a Template from, click the Templates Icon
  • Give the Template a Name e.g. My Portfolio Template
  • Click Save Template
    • Load a Template

    If you wish to load a Visual Composer Template you’ve created or load one of the default Templates, create a new post or page and follow these steps:

  • Click the Templates Icon,
  • Goto the Default Templates tab
  • Search for your Template e.g. My Portfolio Template
  • Hover over your Template
  • Click the + icon or template name to add the template to the post

    • Using Flexishapes

    Learn how to use the Flexishapes Element.

    FlexiShapes Video

    Watch the video on how to create FlexiShapes.

    STEP 1.

    Ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

    Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

    STEP 2.

    We’ll first add a Row Element to the page:

  • Click + Add Element
  • Goto the search bar and search Row
  • Click the Row Element
    • STEP 3.

    Change Row stretch Setting Next, we’ll configure the Row Stretch setting, this determines the width of the Flexishape.

  • Edit the row
  • Select the General tab
  • Select Stretch row from the Stretch Row select menu ( Default will limit the Flexishape to the width of your content, any other option will set the Flexishape to full width )

    •  

    STEP 4.

    Add a Background Color to the Row Next we’ll add a Background Color to the row, this will highlight what how the Flexishape manipulates the content within a Row.

  • Cick the Design options tab
  • Add a Background Image or Color e.g. #ffd300
  • In this example, I’m only using a small amount of conent within the Row, therefore we’ll add some Padding to the Top and Bottom of the Row
  • Set the Background Image to Cover the entire Row
  • This part is optional, we can click on the Background Extras tab and enable the Parallax Effect & add a Color Overlay
  • Click Save Settings
    • STEP 5.

    Add Some Content to the Row Next we’ll add some simple content to the Row, this can be anything you like, in this example we’ll add a Text Block.

  • Click the Add Element Icon
  • Use the Search bar to search the Text Block Element > Click the Text Block Element > Add Some Text to the Text Block and click Save Settings > Click the Close button
    • STEP 6.

    Add a Flexishape We’re ready to add a FlexiShape, we’re going to add this below the Text Block as it’s going to be placed at the bottom of the Row.

  • Click the Add Element icon below the Text Block or use the icon highlighted in the diagram above.
  • Use the search bar to search for the FlexiShape element
  • Click to add the FlexiShape
    • STEP 7.

    Configure the FlexiShape Next, we’ll configure the FlexiShape, using the Frontend Editor, you can get creative with the settings to see what works for you.

  • In this example we’ve used the Pointed Inverted Shape
  • We’ve set the Position to the Bottom – this means the FlexiShapes will appear at the bottom of the Row
  • The Color of the shape has been set to #ffffff ( white ) – it’s been set to white because the color below the row is white
  • The Height can be any value you like ( within reason )
  • Once you’re happy with how the FlexiShape looks, click Save changes
  • As you can see from the diagram above, the FlexiShape has manipulated the content within the Row is complete
    • STEP 8.

    Add multiple FlexiShapes We can “Layer” the FlexiShapes to create different effects. In this example we’re going to add a semi-transparent FlexiShape

  • Add another FlexiShape – Placing this FlexiShape below the previous one, we want it to appear beneath the pevious FlexiShape
  • In this example we’ve used another Pointed Inverted Shape
  • The position is set to Bottom
  • This time, we’ll use a sem-transparent yellow instead of white, the color used in this example is: rgba(255,211,0,0.5)
  • We’ll use a bigger Height than the previous FlexiShape this will complete the effect
  • Click Save

    • Using Rows

    Learn how to use the Visual Composer Row Element – including: Slider & Video background, Parallax, Color Overlays and more.

    Using Rows Video Tutorial

    Watch the video tutorial for how to Using Rows here.

    Getting Started with Rows

    Ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

    Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

    Adding a Row

    Let’s add a Row Element to the page:

  • Click + Add Element
  • Goto the search bar and search Row
  • Click the Row Element
    • General Settings

    Once the Row has been added to the page, we’ll need to edit it to access the settings.

  • Hover over the Row and click the “Pencil” icon to access the Row Settings
  • Click the General tab
  • Row Stretch – this option Stretches the Row background or Row Background & Content. Set to Row Stretch to make a background color / image that spans the width of the site
  • Row Height – this option sets the minimum height of the row. Use the 100% option combined with the Row Stretch option above to create a full screen effect
  • Content Position – this works in combination with the Row Height option, position your content within the Row. The Row Height has to be set to 25% or more
  • Anchor Link Name – use this option for One Page setups, it will allow you to link the menu to this Row
  • Font Color – set the default Font Color for this Row
  • Extra class name – only use this option if you’re familar with using CSS to customize the Theme
    • Design Options

    The Design Options tab allows you to set Background Images, Colors, Borders, Background Position and more.

  • Click the Design options tab
  • Border Color – set a Border color for the Row
  • Border style – set a Border style
  • Border radius – use this option to add curved edges to a Row
  • Background Color – add a Background Color to a Row
  • Background Image – add a Background Image to a Row
  • Background Image Control – set the image to Repeat or Cover to stretch the image across the Row background
  • Background Horizontal Position – use this option to Position the Image Horizontally ( will not work with Cover )
  • Background Vertical Position – use this option to Position the Image Vertically ( will not work with Cover )
  • CSS – use these fields to control the Row Margins, Row Padding & Row Border ( be sure to check your site on Mobile device if using Margin values )
    • Background Extras

    The Background Extras tab allows you to add a Slider background, set a Color Overlay, add Video background & add Parallax Effect

  • Click Background Extras tab
  • Parallax – enable the Parallax Effect on the Row ( Ensure you have an image set in the Design Options tab )
  • Slider Images – add images to create a Slider background on the Row ( Parallax will not work with this option )
  • Slider Effect – choose a transition Effect for the Slider
  • Slider Timeout – set the timeout between each image change in seconds
  • Video URL – add a Video Background to the Row, you can use self-hosted .mp4 formats or YouTube and Vimeo Videos
  • Overlay Color – add a Color Overlay to your background image or video

    •  

    Using Typewriter

    Learn how to use the ACODA Typewriter Element to create 3d & Typewriter style animated text.

    Install Typewriter Plugin

    Please ensure the Typewriter plugin is installed. To install the plugin, goto the WordPress Admin > Appearance > Install Plugins > Locate ACODA Typewriter > Click Install.

    STEP 1.

    To add a Typewriter Element to a page, Edit or Create a Page and click on Backend Editor or Frontend Editor to activate the Visual Composer.

    STEP 2.

    Add the Typewriter Element Next, we’ll add the Typewriter element to the page.

  • Click + Add Element
  • Goto the search bar and search Typewriter
  • Click the Typewriter Element
    • STEP 3.

    Configure the Typewriter Next, we’ll now configure the Typewriter. By default the Typewriter will use the settings shown in the diagram above.

  • Animate Type – Choose between the Rotate 3d or Typewriter animation
  • Lead Text – If you wish to display some static text ( lead text ) before the animated text, you can add it here, in most cases, this isn’t needed
  • Font Color – Choose the Color of your Typewriter text
  • Align – Set the alignment of the Typewriter
  • Formatting – Set the format of the text. Only use the Heading 1 if there are no other Heading 1 tags on the page ( this is for SEO purposes )
  • Font Weight – Choose the Font Weight of the Typewriter text
  • Font Size – Set the Typewriter Font Size – the size differs depending on what formatting you’ve selected
  • Duration – The Duration is the time the word is visible for, longer words require more time
  • Delay – This value is the Delay time between each word animation – smaller values are recommended
  • Pause – The Pause value is the Pause time at the end after all the words have been animated – use this to pause on the last word
  • Text to Animate – These are the words you’re going to Animate, each line is animated at a time. You can use small sentences too. It’s not recommended to use the Typewriter to animate large sentences.
  • Once you’re happy with the settings, click Save changes and Close

    • Theme Widget Areas

    Learn about the different Theme Widget areas.

    Accessing the Widget Areas

    To view the Theme widget areas, follow these steps:

  • Goto your WordPress Admin and click Appearance
  • Click the Widgets menu item
  • The diagram above indicates the default Widget areas that come with the Theme
  • You can create more Sidebar widgets via Appearance > Theme Options > General > Number of Sidebars
    • Sidebar Widgets

    The Sidebar widgets are using for the Page Layout that have a column layout selected. See Page Options for setting a Page Layout with a Sidebar

    Footer Column Widgets

    Footer Column Widgets are used for the Footer area of the Theme. You can set how many column widgets you require via Appearance > Theme Options > Footer > Footer Columns.

    Information Panel

    This widget area is reserved for the Dock Bar depending on what setting you have in Appearance > Theme Options > Dock Bar > Info Dock Panel, will determine how the Widget is displayed.

  • Appearance > Theme Options > Dock Bar > Info Dock Panel – Set to Static
  • Appearance > Theme Options > Dock Bar > Info Dock Panel – Set to Dock Icon
    • Docked Menu Panel

    This widget area is reserved for when the Appearance > Theme Options > Main Menu > Move to Dock Bar is enabled. This widget area will sit below the Main Menu when the Menu Icon is clicked. The above diagram shows a Rich Text Editor Widget with Social Icons shortcode added.

    Header Panel

    This widget areas is reserved for the Header area – See diagram above to see where the widget will be placed. You can control the width of the area via Appearance > Theme Options > Header > Header Widget > Width.

    This Widget area is ideal for ad banners.

    Rich Text Editor Widget

    The Rich Text Editor Widget allows you to format text and easily add images & shortcodes into Widget areas.

    Add the Rich Text Editor

    To add the Rich Text Editor to one of the Widget areas, follow these steps:

  • Goto the WordPress admin
  • Click Appearance
  • Click Widgets
  • Scroll to locate the Rich Text Editor Widget ( shown in the diagram above )
  • Drag the widget to the Widget area you wish to use
  • Enter a Title if one is needed ( you’ll need to clck the Output title to display it )
  • Click the Edit content button to start adding content to the widget
    • Using the Rich Text Editor

    The Rich Text Editor has all the capability of the WordPress Post or Page editor.

  • Insert common ACODA shortcodes like Social Icons. This makes it easy to place shortcodes & social icons in the Footer or Sidebar
  • Format text like the normal Editor
  • Use the ACODA format classes to style your text
  • Easily add images to the Sidebar, Footer or any other Widget area
  • Click Save and close when you’re done editing

    • You Child Theme

    Learn how to use the You – Child Theme.

    What is a Child Theme?

    A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

    Download the Child Theme

    Download the Child Theme from your ThemeForest downloads section.

  • Goto Your ThemeForest Account
  • Click on Downloads
  • Locate the Theme and click Download
  • Click All files & Documentation
  • This will now download the the Main zip file to your computer
  • Unzip the downloaded file. Locate the Child Theme within You-WordPress > You-Child.zip
    • Upload the Child Theme

    Follow these steps to upload the zip file to your WordPress Themes area.

  • Goto your WordPress Admin
  • Click the Appearance Menu Item
  • Click Themes
  • Click Add New
  • Click Upload Theme
  • Click Choose File
  • Locate the You-Child.zip file you’ve downloaded
  • Click Install Now
  • Click Activate
    • Customizing Your Child Theme

    This Article is a great way to get started with Customizing your Child Theme. Read from the Customizing Your Child Theme section.

    Set a Home Page

    Learn how to set a specific page as your home page.

    STEP 1.

    Using the WordPress Admin, goto

  • Click the Settings menu item
  • Then click the Reading menu item
    • STEP 2.
  • Select the A static page ( select below ) option
  • Choose the page you want to display as a home page from the Front page: select menu
  • Click Save Changes