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:
Open Tools Menu
Open the Tools Menu from the Top Bar.
Open Layout CSS & JavaScript
Click Layout CSS & JavaScript.
Add CSS
On the CSS tab, enter your CSS code.
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:
Open Tools Menu
Open the Tools Menu from the Top Bar.
Open Global Settings
Click Global Settings.
Add CSS
On the CSS tab, enter your CSS code.
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 */
}
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.