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

Posted OnJun 22, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Visual Composer Page Builder, we will start adding Elements to expand on the existing Home Page.

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 a Row Element & Modifying Page Layout

For this example, a new Row element will be added to the Home Page and the Home Page Layout will be modified.

Step 5) Click the + button located at the top left, or click the Add Element button to display the Add Element popup panel.


Step 6) From the Add Element popup panel, click to select the Row element and be returned to the Home Page where the new Row will be displayed.


Step 7) From the Home Page, hover over the + icon located in the middle of the page to display the newly added Row element and available options for that element.


In the Row element area, you can:

  • Change the Column Layout for the current page.
  • Edit the Row element.
  • Delete the Row element.
  • Prepend to a Column.

Change Column Layout

For this example, the Home Page Layout will be modified to have 2 columns.

Step 8) Click the arrow located to the right of the Row element to expand the selection.


Step 9) Click the Change Layout icon to display the Row Layout popup panel.


Step 10) For this example, select the 2/3 + 1/3 layout.

Step 11) Click the Update button to save the changes.

Step 12) Click the X button to close the Change Layout panel and be returned to the Home Page where the change made above will be displayed.


Step 13) 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 3.


Leave a Reply

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

Send this to friend