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.
2Click on the Frontend Editor button.
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.
2In the Add Element pop-up screen, search for Blog and click on it to be added to the page.
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.
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.
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.
2A new window will open. Here you can change the page title or add custom CSS.
Note: The custom CSS added here will be outputted only on this particular page.
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..
2You will now be able to configure and see how the website is going to look on a specific device.
