How to Add Custom CSS Styles to Beaver Builder Elements

custom css beaver builder

Beaver Builder is my favorite WordPress page builder by a mile, and it becomes significantly more powerful if you know CSS. This video guide quickly walks you through efficiently adding CSS styles to Beaver Builder elements—both modules, and the HTML elements inside those modules.

Here’s a summary of the text we cover in our video:

How to Add 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’re reading this and 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, or review of all WordPress page builders.

Add a Comment

Your email address will not be published. Required fields are marked *

The WPShout Pro Community is here! One-to-one help. Never be stuck again. Master WordPress development. Take a look
Hello. Add your message here.