Where to put CSS custom code?

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 or post:

  1. In the upper right corner, click Tools > Layout CSS / Javascript.
  2. On the CSS tab, enter your CSS code.
  3. Click Save.


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:

  1. In the upper right corner, click Tools > Global Settings.
  2. On the CSS tab, enter your CSS code.
  3. 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.


Have more questions? Submit a request