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.

km-vc-build1-01a

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

km-vc-edit-existing-01a

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.

km-vc-edit-existing-part2-01a

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.

km-vc-edit-existing-part2-02a

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.

km-vc-edit-existing-part2-03aKM

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.

km-vc-edit-existing-part2-04aKM

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

km-vc-edit-existing-part2-06aKM

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.

km-vc-edit-existing-part2-07aKKM

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

km-vc-edit-existing-part2-08a


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 3.

 


Leave a Reply

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

Send this to friend