WPBakery Page Builder Frontend Editor

Updated on July 4, 2018

Edit and fine tune your website with our new Frontend Editor and see immediately how it looks in real time! We believe what you see, is what you should get


Accessing the Frontend Editor

Before being able to access the frontend editor, it is necessary to update the theme to the version 6. To learn how to update Jupiter, check out this article.

To access the frontend editor:

1From the WordPress left menu, go to Pages and enter your page.

frontend editor

2Click on the Frontend Editor button.

frontend editor

3You will be redirected to a new page with the frontend editor interface.

Adding a Shortcode

Adding a shortcode in the frontend editor is same as adding it in the backend:

1From the WPBakery Page Builder screen, click on the Add Element button.

frontend editor

2In the Add Element pop-up screen, search for Blog and click on it to be added to the page.

frontend editor

3When the shortcode is added, a new pop-up screen called Blog Settings opens. You can configure different aspects of blog from the pop-up. Click on the Save Changes button.

frontend editor

4You will see your blog posts displayed as they would in the frontend of your website.
5In the top right corner of the page, click on the Update button to publish the changes to your website.

frontend editor

Page Settings

Frontend editor provides page settings which let you change the page title and insert page specific custom CSS, however it does not provide Jupiter page options, Jupiter widget options and Jupiter styling options like the backend editor does.

To access the page settings, from the frontend editor:

1In the top right corner of the screen, click on the Cog icon.

frontend editor

2A new window will open. Here you can change the page title or add custom CSS.

frontend editor

3Click on the Save Changes button and click Update to apply the changes to your website.

Responsive Preview

Frontend editor has a feature that lets you check how your website will look like on a specific device.

1In the top right corner of the screen, hover over the Screen icon and select on which device you want to preview your website..

frontend editor


2You will now be able to configure and see how the website is going to look on a specific device.
Did this answer your question?