Video Tutorials

  • Home
  • /Category ' Video Tutorials '

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.

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

    • 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.

    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

    • 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

    • 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

    •