Many of these Knowledge Base articles have CSS code that you can copy and paste, or perhaps you want to create your own CSS. Where should you put it?
Restrict custom CSS to a single Page Builder page
This procedure applies if you only want your CSS to apply to the content layout on a single Page Builder page. For example, suppose you have a contact form and know that you only want your custom CSS to apply to that form on that single page.
To add CSS code that is restricted to a single Page Builder page or post: Click the title bar in the upper left corner to open the Tools menu, then click Layout CSS & JavaScript.
Tip: See the Related Links for how to add custom ID or class selectors to your Page Builder rows, columns, or modules.
Add custom CSS to apply site-wide
There are several ways to add custom CSS that applies site-wide, but there are slight variations in the behavior with each method.
1. Site-wide rules, set for Page Builder content layouts
You can add site-wide rules right in your Page Builder editing screen. The rules will apply to the content area of every page, whether or not the page or post is built with Page Builder.
This method is very handy when you’re adding custom ID or class selector names to individual rows, columns, or modules on a page, because you don’t have to leave the page to add the rule and they still apply site-wide, and you can see the site-wide rules from any Page Builder editing page.
On the other hand, you might prefer to keep all your rules in a single place so you can find them easily later. In that case, you one of the other methods below.
To add site-wide CSS code while editing a Page Builder page:
- Click the title bar in the upper left corner to open the Tools menu, then click Global settings.
- On the CSS tab, enter your CSS code.
- Click Save and preview the result.
This code will now appear in Tools > Global settings on any Page Builder page, but the CSS rules will apply to all content areas of your site, whether or not they were built with Page Builder.
2. Site-wide rules set on the Customize > Additional CSS tab
This method applies the CSS code everywhere on your site: Page Builder and non-Page Builder content areas and any theme.