This article talks about adding CSS styles in a page using WPBakery Page Builder Page Settings. This option is available for both Jupiter and The Ken.


WPBakery Page Builder Page Settings

WPBakery Page Builder plugin has a functionality called Page Settings which can be activated by clicking the cog icon at the top right section of the WPBakery Page Builder GUI. It gives a plain editor with code coloring to add your custom css code. The code you will add to this section will only affect the specific page that you add the code to in WPBakery Page Builder Page Settings. The following is a step by step example of this option.

1Add a New Page.  

Go to WordPress Admin Menu > Pages > Add New to add a new page.

2Add a Text Block.  

Use the WPBakery Page Builder to add a Text Block shortcode and enter a sample text and as an example add an Extra Class Name of hello to the text block.

3Click on the Cog Icon.  

Click on the Cog icon at the top right section of WPBakery Page Builder GUI to activate the Page Settings section. A pop up window will appear which has a CSS editor.

4Add a Custom CSS Code.  

Add your custom CSS code and save the page. In our case:

.hello p {color: red;}

This will change the Sample Text color to red and this CSS code will only be loaded for this particular page and not other pages or posts of the website.