Custom CSS

Learn how to add custom CSS to your Beaver Builder layouts.

You can add custom CSS to any Beaver Builder layout, per-page or sitewide.

To override theme styling, add the CSS to Customize > Additional CSS or your child theme’s style.css file.

Per-page or per-post CSS

This procedure applies if you only want your CSS to apply to specific page or post using Beaver Builder. 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 Beaver Builder page or post:

1. Open Tools Menu

   Open the Tools Menu from the Top Bar.

2. Open Layout CSS & JavaScript

   Click Layout CSS & JavaScript.

3. Add CSS

   On the CSS tab, enter your CSS code.

4. Save

   Click Save.

Sitewide CSS

This procedure applies if you want your CSS to apply globally for all pages and posts which are using Beaver Builder.

To add CSS code that is applied globally to all Beaver Builder pages or posts:

1. Open Tools Menu

   Open the Tools Menu from the Top Bar.

2. Open Global Settings

   Click Global Settings.

3. Add CSS

   On the CSS tab, enter your CSS code.

4. Save

   Click Save.

Utility classes

Beaver Builder contains two utility classes that can be helpful when writing custom CSS.

fl-builder

The fl-builder class allows your custom CSS to only style pages or posts using Beaver Builder.

.fl-builder .page-id-1 .fl-module-heading h1 {
  /* CSS here will only apply to the heading module on page ID 1 */
}
.fl-builder .page-id-1 .fl-module-button a {
  /* CSS here will only apply to the button module on page ID 1 */
}

fl-builder-edit

The fl-builder-edit class is only available when the Beaver Builder editor is active on your page or post. This is useful if your theme styling is impacting the builder UI styling.

.fl-builder-edit button {
  /* CSS here will only apply to buttons when the builder is active */
}

You can also use fl-builder-edit with the :not() selector to apply complex styling, such as changing the position of a row, column, or module without affecting the builder’s functionality.

body:not(.fl-builder-edit).fl-builder .fl-module-heading {
  position: relative;
  top: -100px;
  left: 200px;
}

Per-node CSS & JS

The Enable Code Settings option in Beaver Builder Advanced settings allows you to add CSS and JavaScript to each node (rows, columns, and modules) individually.

See the CSS & JavaScript article in the Advanced tab section for more information.