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

Posted OnJun 26, 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 the Google Map element to the right-hand Column created 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 an Element to the Right-Hand Column

For this example, the Google Maps element will be added to the right-hand column

Step 5) Hover over the right-hand Column to display a + button.

Step 6) Click the + button to display the Add Element popup panel.


Step 7) Click to select Google Maps to display the Google Map Settings.

Step 8) Enter a Title for the map.

Step 9) Navigate to Google Maps, locate your map and copy the iframe code to the clipboard.

Step 10) Paste the iframe code into the Map Embed iFrame text area.

Step 11) Modify the Height as needed.


Step 12) Click the Save Changes button.

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


Step 14) Click the Update button to save the Home Page changes.


To change the background color of the Google Map, navigate to Visual Composer -> Design Options from the Dashboard and make changes as needed.


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


Leave a Reply

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

Send this to friend