Category: Page Builder

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

Getting_Started_with_Visual_Composer.png

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

BACKEND_EDITOR.png

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

  1. Clicking these buttons will add an Element to the page.
  2. Clicking these buttons will load or create a Template ( See below )
  3. 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
  4. Add Custom CSS to this page only
  5. Enter Full Screen Mode
  6. Enters the Frontend mode

Frontend Editor

Frontend_Editor.png

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.

  1. Clicking these buttons will add an Element to the page.
  2. Clicking these buttons will Load or Create a Template ( See below )
  3. 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
  4. Add Custom CSS to this page only
  5. Enter Full Responsive Mode – See how the Page will look on a Mobile device
  6. Enters the Backend Editor mode

Editing Elements

Editing_Elements.png

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:

  1. The Pencil Icon is the Edit Element button
  2. This icon represents Columns ( Only available on Row Elements )
  3. The + icon represents Add Element
  4. This icon represents Duplicate Element
  5. The trash can represents Delete Element
  6. Use this icon to Drag the Element to a new position
  7. Once you click the Edit button, the Element Settings will appear in a new window

Create a Template

Create_a_Template.png

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:

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

Load a Template

Load_a_Template.png

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:

  1. Click the Templates Icon,
  2. Goto the Default Templates tab
  3. Search for your Template e.g. My Portfolio Template
  4. Hover over your Template
  5. 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.

STEP_1-3.png

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.

STEP_2_1-1.png

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

  1. Click + Add Element
  2. Goto the search bar and search Row
  3. Click the Row Element

STEP 3.

STEP_3-3.png

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

  1. Edit the row
  2. Select the General tab
  3. 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.

STEP_4-1.png

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.

  1. Cick the Design options tab
  2. Add a Background Image or Color e.g. #ffd300
  3. 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
  4. Set the Background Image to Cover the entire Row
  5. This part is optional, we can click on the Background Extras tab and enable the Parallax Effect & add a Color Overlay
  6. Click Save Settings

STEP 5.

STEP_5_1.png

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.

  1. Click the Add Element Icon
  2. 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.

STEP_6.png

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.

  1. Click the Add Element icon below the Text Block or use the icon highlighted in the diagram above.
  2. Use the search bar to search for the FlexiShape element
  3. Click to add the FlexiShape

STEP 7.

STEP_7-1.png

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.

  1. In this example we’ve used the Pointed Inverted Shape
  2. We’ve set the Position to the Bottom – this means the FlexiShapes will appear at the bottom of the Row
  3. 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
  4. The Height can be any value you like ( within reason )
  5. Once you’re happy with how the FlexiShape looks, click Save changes
  6. As you can see from the diagram above, the FlexiShape has manipulated the content within the Row is complete

STEP 8.

STEP_8.png

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

  1. Add another FlexiShape – Placing this FlexiShape below the previous one, we want it to appear beneath the pevious FlexiShape
  2. In this example we’ve used another Pointed Inverted Shape
  3. The position is set to Bottom
  4. 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)
  5. We’ll use a bigger Height than the previous FlexiShape this will complete the effect
  6. Click Save changes

Finished Example

Finished_Example-1.png

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

Getting_Started_with_Rows.png

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

Adding_a_Row.png

Let’s add a Row Element to the page:

  1. Click + Add Element
  2. Goto the search bar and search Row
  3. Click the Row Element

General Settings

General_Settings.png

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

  1. Hover over the Row and click the “Pencil” icon to access the Row Settings
  2. Click the General tab
  3. 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
  4. 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
  5. 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
  6. Anchor Link Name – use this option for One Page setups, it will allow you to link the menu to this Row
  7. Font Color – set the default Font Color for this Row
  8. Extra class name – only use this option if you’re familar with using CSS to customize the Theme

Design Options

Design_Options.png

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

  1. Click the Design options tab
  2. Border Color – set a Border color for the Row
  3. Border style – set a Border style
  4. Border radius – use this option to add curved edges to a Row
  5. Background Color – add a Background Color to a Row
  6. Background Image – add a Background Image to a Row
  7. Background Image Control – set the image to Repeat or Cover to stretch the image across the Row background
  8. Background Horizontal Position – use this option to Position the Image Horizontally ( will not work with Cover )
  9. Background Vertical Position – use this option to Position the Image Vertically ( will not work with Cover )
  10. 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

Background_Extras.png

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

  1. Click Background Extras tab
  2. Parallax – enable the Parallax Effect on the Row ( Ensure you have an image set in the Design Options tab )
  3. Slider Images – add images to create a Slider background on the Row ( Parallax will not work with this option )
  4. Slider Effect – choose a transition Effect for the Slider
  5. Slider Timeout – set the timeout between each image change in seconds
  6. Video URL – add a Video Background to the Row, you can use self-hosted .mp4 formats or YouTube and Vimeo Videos
  7. 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.

STEP_1-1.png

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.

STEP_2-2.png

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

  1. Click + Add Element
  2. Goto the search bar and search Typewriter
  3. Click the Typewriter Element

STEP 3.

STEP_3-1.png

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

  1. Animate Type – Choose between the Rotate 3d or Typewriter animation
  2. 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
  3. Font Color – Choose the Color of your Typewriter text
  4. Align – Set the alignment of the Typewriter
  5. 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 )
  6. Font Weight – Choose the Font Weight of the Typewriter text
  7. Font Size – Set the Typewriter Font Size – the size differs depending on what formatting you’ve selected
  8. Duration – The Duration is the time the word is visible for, longer words require more time
  9. Delay – This value is the Delay time between each word animation – smaller values are recommended
  10. 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
  11. 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.
  12. Once you’re happy with the settings, click Save changes and Close