WPBakery Page Builder Frontend Editor

Last Updated on

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

 

x
Magic: Discover 26,000+ code scripts and plugins from our partner CodeCanyon starting from $2

In this article

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:

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

frontend editor

2
Click on the Frontend Editor button.

frontend editor

3
You 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:

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

frontend editor

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

frontend editor

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

4
You will see your blog posts displayed as they would in the frontend of your website.
5
In 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:

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

frontend editor

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

frontend editor

x
Note: The custom CSS added here will be outputted only on this particular page.
3
Click 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.

1
In 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

 

2
You will now be able to configure and see how the website is going to look on a specific device.
x
Magic: Get your website the custom design it deserves by Artbees designers
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket