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.


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


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.


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


Step 9) Highlight the default text.


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.


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

For this example, Appear from Centre was selected.


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.


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


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


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


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


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