Adding Custom CSS in the Page Settings

Updated on November 20, 2017

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.
Did this answer your question?