Frontend Editor for Visual Composer

Front-End Editor for Visual Composer

Get a copy of the transcript of this guide (pdf)

drop-down-menu-configuration front-end-editor-for-visual-composer

Edit the page using Visual Composer

front-end-editor-for-visual-composer-1

The front-end editor for Visual Composer makes it very easy to edit a page then see the changes instantly without even clicking the Preview button.

To edit using Visual Composer, click on Edit with Visual Composer instead of clicking Edit.

Let’s try to edit a text in Visual Composer

front-end-editor-for-visual-composer-2

After clicking on Edit with Visual Composer, this will give us the in-situ layout of the page we’re going to edit.

So, rather than having to imagine which image is not aligned, it’s all here, pretty much as you see it normally. You don’t see the rows and columns structures so much, but you can see all the elements.

Let’s try to edit the text highlighted in a red box. To edit a text block, hover your mouse to the text block and a green bar will appear. Afterward, click on the pencil icon.

Text Block Settings will pop-up

front-end-editor-for-visual-composer-3

A Text Block Settings will pop-up after you’ve clicked the pencil icon in the green bar. Let’s have this highlighted text deleted. If you have nothing else to edit, click on Save Changes. Afterward, click on Close to close the Text Block Settings.

Text Block successfully edited

front-end-editor-for-visual-composer-4

There we go, after clicking on Save Changes, we can instantly see the changes we’ve committed. Like what I’ve said earlier, you don’t have to preview it or guess what you’re website is going to look right now.

Next, let’s try to change an image. To do that, hover your mouse over the image that you want to edit. A green bar will appear then click on the pencil icon.

Single Image Settings will pop-up

front-end-editor-for-visual-composer-5

To select a new image, click on the box located on the right side of the thumbnail of the current image. This will take us the Media Library of our WordPress.

Set an image

front-end-editor-for-visual-composer-6

After clicking the box, a Set Image box will appear. We are currently on the Media Library tab wherein we need to select a new image. If you haven’t uploaded your desired image yet, go to Upload Files tab to upload your image. After selecting the image that you want, click on Set Image.

Image is now ready to be changed

front-end-editor-for-visual-composer-7

After setting an image, the thumbnail inside the red box will change to the image that we have set. Now, we’re one click away in changing an image. To finally change the image, click on Save Changes followed by Close.

Image successfully changed

front-end-editor-for-visual-composer-8

Now that we have successfully changed our image. Let’s try to commit these changes to the database. To commit, click on Update.

Changes successfully updated

front-end-editor-for-visual-composer-9

A message at the top of the page will appear to tell us that the page was successfully updated.

Now that our changes have been successfully updated and if you’ve got nothing else to edit the page, click X to close the Visual Composer.

Reminder: If we instantly click X without clicking on Update, our changes will not be saved in the database.  If we’re already sure with our changes, update the page right away.