Adding Custom CSS in the Page Settings

Last Updated on

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.

In this article


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.

x
Note: We assume you have already created the shortcode with some example FAQs.

To find the class of a title:

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

Adding custom CSS in the page settings - Inspect element

x
Note: To learn how to inspect an element, you can read the articles Inspecting elements and How to inspect elements.
2
A 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

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

4
Take 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:

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

3
By 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;

}

4
Add the codes to the Page Settings.

Adding custom CSS in the page settings - Custom CSS settings

5
Click Save Changes and update the page to check the result.
x
Note: The added codes will only affect this page. No other page on your site will be affected.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket