How to Edit a Page Using Visual Composer’s Front End Editor – Part 5

Posted OnJun 25, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Visual Composer Page Builder, we will continue adding Elements to expand on the existing Home Page design by adding content to the left-hand Tab element added earlier.

Step 1) Login to the WordPress Dashboard.

Step 2) From the Dashboard, hover over your site name to display the Visit Site hyperlink.

Step 3) Click the Visit Site hyperlink to be forwarded to the Home Page of your site.

km-vc-build1-01a

Step 4) Click the Edit with Visual Composer hyperlink to activate the Page Builder Frontend Editor.

km-vc-part-4-01a

Adding Content to the Left-Hand Tabs

For this example, we will add content to the History Tab and the Rates Tab.

Step 5) Click here to download the text for these two tabs.

Step 6) Click the History Tab to make it the active tab.

Step 7) Click the + button located in the middle of the left-hand column to display the Add Element popup panel.

km-vc-part-5-01a

Step 8) Click to select the Text Block and be returned to the Home Page where the Text Block Settings popup panel will display.

km-vc-part-5-02a

Step 9) Highlight the default text.

km-vc-part-5-03a

Click the Visual tab to format the text using the Word-like Editor.

Click the Text tab to display the text as pure text (no formatting settings applied). To add any custom formatting, you will need to use CSS styles.

Step 10) Paste the History text from the zip file saved earlier.

km-vc-part-5-04a

Step 11) Click the CSS Animation dropdown list and select an Animation option.

For this example, Appear from Centre was selected.

km-vc-part-5-06a

Step 12) Click the Save Settings to save any changes.

Step 13) Click the Close button to be returned to the Home Page where the History text will be displayed.

km-vc-part-5-07a

Click the Design Tab to modify the position, change the background color, and more to make the element unique.

km-vc-part-5-08a

Step 14) Click the Update button to save the page changes.

km-vc-part-5-09a

Step 15) Repeat the steps above to add in the Rates text.

km-vc-part-5-11a

Step 16) Click the Update button to save the page changes.


Checkpoint

Prior to moving forward, we recommend that you view your site to see the changes applied above and make any modifications as needed.


The next step of the guide will focus on How to Edit an Existing Page Using Visual Composer Frontend Editor – Part 6.

 


Leave a Reply

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

Send this to friend