Visual Composer Front End Page Builder Overview

Posted OnJun 20, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Visual Composer Page Builder, we will look at the options available in Page Builder.

Step 1) Login to the WordPress Dashboard.

Step 2) From the Dashboard, using your mouse, 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.


There are a few ways to add content to an existing page:
– Click the Edit with Visual Composer hyperlink to activate the Frontend Editor.
– Click the Edit Page hyperlink to use the Backend Editor.

Either one of these methods will accomplish the same task, it is just a matter of your preference.

For this example, the Frontend Visual Composer will be used.

Step 4) From the Admin Bar click the Edit with Visual Composer hyperlink to display the Page Builder Menu Bar.


Page Builder Menu Bar Overview

A. + (Add Element) Click the + button to display the Add Element popup panel.


Click to select an element of your choosing and it will be dropped in to the page.


B. Templates Click the Templates icon to display the Templates popup panel.

From the My Templates tab, you can save the current page layout as a new template.


From the Default Templates tab, you can click to select an existing template and it will be appended to the existing layout of the current page.


Mouse over the eye icon to show/hide the popup panel.


C. Page Settings Click the Cog icon to display the Page Settings popup panel.

In this panel you can:
– Change/remove the Page Title, and
– Add Custom CSS styles.


Click the Save Changes button to save any changes.

D. Guides Toggle Button Click the Guides toggle button to turn on/off the editor’s guides.
E. Devices Icon Click the Devices icon to display a dropdown panel.


Click to select the desired device and your page will update to display how it will look on the selected device.


F. Backend Editor Click the Backend Editor button to display the page in Backend Editor mode.

You can also design your page layout from here.

Click the FRONTEND EDITOR button to return to the Frontend Editor.



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


Leave a Reply

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

Send this to friend