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.
Note: We assume you have already created the shortcode with some example FAQs.
To find the class of a title:
1From the front-end, right-click on the first title and click Inspect.
Note: To learn how to inspect an element, you can read the articles Inspecting elements and How to inspect elements.
2A new window will pop up called Developer Tools. In this pop-up you’ll see the HTML structure of the whole page.
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.
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.
5Click Save Changes and update the page to check the result.
Note: The added codes will only affect this page. No other page on your site will be affected.
