How to Add Custom CSS Styles to Beaver Builder Elements

custom css beaver builder

After reviewing WordPress’s page builders in depth, I’ve found that Beaver Builder is my clear favorite, because it caters to people who want to do things right. Case in point: the Beaver Builder team have made it easy to add custom CSS styles to Beaver Builder elements. As with any front-end system, you can do a lot more with Beaver Builder if you understand CSS, and the software encourages this rather than trying to overcompensate for it.

To style Beaver Builder layouts with your own custom CSS, you will need to know how to target child elements, as you’ll generally be adding CSS classes to Beaver Builder modules, not to the child HTML elements inside them.

This video guide quickly walks you through efficiently adding CSS styles to Beaver Builder elements—both to Beaver Builder modules, and to the HTML elements inside those modules.

And here’s a text summary of the material in the video:

How to Add Custom CSS Styles to Your Beaver Builder Elements

  1. Click “Page Builder” to enable Beaver Builder’s editing mode, and select the Beaver Builder element (module) you want to work on.
  2. In that module’s “Advanced” tab, add a CSS class. You don’t need an opening . character, so to give a module class my-class you’d simply type “my-class” into the “Class” field.
  3. Next up, open the same page in a new browser tab, and go to “Customize” > “Additional CSS.”
  4. Use your browser’s Inspector to intelligently target the elements you want to change. For many Beaver Builder modules, you’ll actually be targeting elements (such as <img> tags in the video example) that are several layers deep inside the custom-class-named modules themselves.

And that’s the guide! Enjoy the ease and freedom of an actually-good page builder, plus the focus and power of direct CSS editing. And if you haven’t already, try out Beaver Builder—you’ll be glad you did. 🙂

P.S. For more on Beaver Builder, you can read my full Beaver Builder review, and my review and comparison of all major WordPress page builders.


Add a Comment

Your email address will not be published.