WPBakery Page Builder Frontend Editor

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.

Configuring Specific Items in a Shortcode

Some shortcodes allow you to configure specific items based on the category, post ID, author and more.

For configuring specific items, you’ll need to complete 2 main steps. These steps include editing the shortcode’s settings and then selecting the appropriate options for those settings. In this article, we use the Blog shortcode and explain the process from scratch.

Remember that many other shortcodes have these settings, not just the blog shortcode.


Displaying Posts

Creating a Blog Post

In order for the blog shortcode to have something to display, blog posts must be created. Please read the Creating a blog post article for more information, and return to the steps below.

Adding the Blog Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the WPBakery Page Builder screen, click on the + button.

configuring specific items

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

configuring specific items

4When the shortcode is added, a new pop-up screen called Blog Settings will open. You can configure different aspects of the blog from the pop-up.

configuring specific items

5Click Save Changes and publish or update the page to check the result. It shows all the available blog posts.

Configuring Specific Items

There are three options in the Blog Settings pop-up called Select Specific Categories, Select Specific Posts and Select Specific Authors. These three options can also be found in many other shortcode settings pop-ups. In order to select specific items in the shortcode settings, search for keywords to get the autocomplete suggestions.

configuring specific items

SettingDescription

Select specific categories Selects only specific categories.
Select specific posts Selects only specific posts.
Select specific authors Selects only specific authors.

Adding Custom CSS in the Page Settings

WPBakery Page Builder builder screen offers a section called Page Settings that allows you to add custom CSS codes for a specific page. The CSS codes will onlyapply to the page where you add them.

In this article, we explain how to customize the title style of the FAQ shortcode. Please note that we use Chrome browser for this tutorial.


Inspecting a Title

Whenever you need to add custom CSS codes for a specific element, you’ll need to find its HTML id or class in order to use it in your codes.

To find the class of a title:

1From the front-end, right-click on the first title and click Inspect.

Adding custom CSS in the page settings - Inspect element

2A new window will pop up called Developer Tools. In this pop-up you’ll see the HTML structure of the whole page.

Adding custom CSS in the page settings - HTML structure

3As you can see in above screenshot, the title is wrapped in a span tag. The span tag does not have a class, so it’s not useful. In this situation, use its parent class which is mk-toggle-title.

Adding custom CSS in the page settings - element class

4Take note of this class and close the developer tools.

Adding CSS Codes in the Page Settings

At this stage, you’ll need to write the CSS codes for the title, based on the class from the previous section.

To add CSS codes to the page:

1In back-end, edit the page that holds the FAQ shortcode.
2Click the Cog button to open the Page Settings pop-up.

3By using the class from previous section, you can write two blocks of code to change the font size of the title.

.mk-toggle-title span {

font-size: 20px !important;

}

4Add the codes to the Page Settings.

Adding custom CSS in the page settings - Custom CSS settings

5Click Save Changes and update the page to check the result.

Configuring the Visibility for Devices

The Visibility for Devices setting in shortcodes allows you to hide / show the shortcode for a specific screen width. This settings is useful when you need to hide / show a section of your webpage for mobile devices, for example.

In this article, we use two Page Section shortcodes. We want to show the first section only on desktops (screens bigger than 1024 pixels) and show the second section only on tablets and smaller devices (screens smaller than 1024 pixels).


Configuring the Visibility Settings

1Add two Row shortcodes and then add a Fancy Title shortcode inside each of them.

2Click “Edit this Row” in the first row to open the Row Settings.

3From Visibility for Devices, select Hidden on Netbooks option.

Configuring the visibility for devices - visibility for devices

4Click on Save Changes and publish or update the page to check the result. At this stage, when you resize the browser (smaller than 1024 px), the first row should be hidden.
5Click on Edit Row in the second row to open the Row Settings.
6From Visibility for Devices, select Visible on Netbooks option.
7Click on Save Changes and publish or update the page to check the result. At this stage, when the browser width is bigger than 1024 px, only the first row should be visible and when the browser width is smaller than 1024 px, only the second row should be visible.

Explanation of Visibility Options

The Visibility for Devices setting allows you to select 13 options. These options are explained well in the shortcode but we’ll add more detail here to clarify. The HTML Class column is explained in the Behind the Scene section.

Option Description Screen Width HTML Class

All This is the default option and the shortcode will be visible on all devices.
Hidden on Phones The shortcode will be hidden when the screen width is < 765 px hidden-sm
Hidden on Tables The shortcode will be hidden when the screen width is > 768 px and < 1024 px hidden-tl
Hidden on Mega Tables The shortcode will be hidden the when screen width > 768 px and < 1080 px hidden-tl-v2
Hidden on Netbooks The shortcode will be hidden when the screen width is < 1024 px hidden-nb
Hidden on Desktops The shortcode will be hidden when the screen width is < 1224 px hidden-dt
Hidden on Mega Desktops The shortcode will be hidden when the screen width is < 1290 px hidden-dt-v2
Visible on Phones The shortcode will be visible when the screen width is < 765 px visible-sm
Visible on Tablets The shortcode will be visible when the screen width is > 768 px and < 1024 px visible-tl
Visible on Mega Tables The shortcode will be visible when the screen width is > 768 px and < 1080 px visible-tl-v2
Visible on Netbooks The shortcode will be visible when the screen width is < 1024 px visible-nb
Visible on Desktops The shortcode will be visible when the screen width is < 1224 px visible-dt
Visible on Mega Desktops The shortcode will be visible when the screen width is < 1290 px visible-dt-v2

Behind the Scene

To understand the visibility setting better, it’s good to know what happens when you select one of the options. When one of the options is selected, an extra class will be added to the shortcode. These classes are linked with some CSS codes which hide / show the shortcode.

Example: When Hidden on Netbooks is selected, hidden-nb class will be added to the shortcode.

Configuring the visibility for devices - hidden on netbook

The CSS codes exist in the core-styles.css files of the Jupiter theme. These two files are the same, the only difference is that the second one is minified.

wp-content/themes/jupiter/assets/stylesheet/core-styles.css

wp-content/themes/jupiter/assets/stylesheet/min/core-styles.css (this file is mostly used by the theme)

To find the related codes, open one of the files in you text editor and search for hidden-nb.

Adding an Extra CSS Class to a Shortcode

Adding an extra CSS class allows you to target the shortcode easily within your custom codes.

In this article, we explain how to add a custom CSS class to the Employees shortcode and then tweak the styling and functionalities


Adding an Extra CSS Class

To add an extra CSS class:

1Click on the Edit Employees button to open the Employees Settings pop-up.

Adding extra CSS class to a shortcode - employees settings

2In the Extra Class Name setting field, add a text. The text should start with a letter. For this example, we use custom-employees

Adding extra CSS class to a shortcode - extra class name

3Click on the Save Changes button.

Checking the CSS Class

To make sure the CSS class has been added to your shortcode, use your browser developer tools. For this example, we use Chrome browser.

To check the class:

1From the front-end of your website, right-click on one of the employees, and then click Inspect.

Adding extra CSS class to a shortcode - inspect

2In the developer tools, under the Elements section, find a div with the mk-employees class.

Adding extra CSS class to a shortcode - div class

3Look at the end of the line and you should be able to see the extra added class.

Adding extra CSS class to a shortcode - div custom class


Tweaking the Stylings

The extra CSS class name can be used to tweak the styling of the shortcode without conflicting with other similar items. For this example, we reduce the border radius of the thumbnail. By default, the employees’ image looks like the following.

Adding extra CSS class to a shortcode - example

1From the front-end of your website, right-click on the thumbnail, and then click Inspect.

Adding extra CSS class to a shortcode - inspect

2Reduce the border-radius value in the Styles tab, and then copy the codes.

Adding extra CSS class to a shortcode - css

3From the WordPress left menu, go to the Theme Options > Advanced > Custom CSS page, paste the codes and add custom-employees to the beginning of the codes.

.custom-employees.mk-employees.simple .team-thumbnail.rounded-true img {
    position: relative;
    border-radius: 10px;
}

4Click on the Save Settings button and check the result on the front-end of your website.

Adding extra CSS class to a shortcode - result


Tweaking the Functionality

The extra CSS class name can also be used to tweak the functionality of the shortcode without conflicting with similar items.

For this example, we change the thumbnail link’s default target setting. By default when you click on the thumbnail, the link opens in the same browser tab so we’ll change the functionality to make it open in a new tab.

1From the WordPress left menu, go to Theme Options > Advanced > Custom JS then add the following codes.

jQuery('.custom-employee a').attr('target', '_blank');

3Click on the Save Settings button and check the result on the front-end of your website.

Configuring Shortcode’s Sorting Settings

Some of the shortcodes allow you to alter the sorting of the posts based on the title, menu order, comment count and more.

To sort the posts, you need to complete two main steps. These steps include editing the shortcode’s settings and then selecting the appropriate options for the Order and Orderby settings. In this article, we use the Blog shortcode and explain the process from scratch.


Displaying Posts

Creating a Blog Post

In order for the blog shortcode to have something to display, blog posts must be created. Please read the Creating a blog post article for more information, and then return to the steps below.

Adding the Blog Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the WPBakery Page Builder screen, click on the + button.
3In the Add Element pop-up screen, search for Blog and click on it to be added to the page.

sorting - Blog

4When the shortcode is added, a new pop-up screen called Blog Settings will open. You can configure different aspects of the blog from the pop-up.

sorting - Blog settings

5Click on Save Changes and publish or update the page to check the result. It will show all the available blog posts.

Altering Sorting

There are two options in the Blog Settings pop-up called Order and Orderby. These two options can be found in many other shortcode settings pop-up.

The Orderby setting let’s you alter the sorting of posts by one of these parameters: date, menu order, post ID, title, comment count, random, author and no order. The order setting designates the ascending or descending order of the ‘orderby’ parameter.

Reverse Chronological Posts Order

As an example, to display the newest blog posts first, Order and Orderby settings have to be configured as shown below:

sorting - posts order

Configuring Shortcode’s Entrance Animation

Entrance animation adds a unique visual aesthetic feature to your page. In simple terms, when this setting is enabled for shortcodes, they appear in the page with animation on scroll.

Entrance animation setting is available in most of the shortcodes which you can enable in two steps. These steps includes editing shortcode’s settings then selecting one of the animations from Viewport Animation setting. In this article, we choose Icon Box shortcode and explain the process from scratch.


Enabling Entrance Animation

1Add an icon box shortcode to your page.
2Click Edit Icon Box to open the Icon Box Settings pop-up.

entrance animation

3From Viewport Animation, select one of the animations.

Configuring shortcode's entrance animation - viewport animation

4Click Save changes and publish or update the page to check the result.

 


Altering Animation Speed

1Click Edit Icon Box to open the Icon Box Settings pop-up.
2From Extra Class Name, add my-icon-box-animation-duration class.
3Click Save changes.
4Click Cog icon to open page settings and copy and paste below codes there. In below codes, you may change the 3s to alter the speed.

.my-icon-box-animation-duration.mk-animate-element.mk-in-viewport {
animation-duration: 3s !important;
}

5Click Save changes and publish or update the page to check the result.