How to Add Custom CSS Styles to Beaver Builder Elements
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
- Click “Page Builder” to enable Beaver Builder’s editing mode, and select the Beaver Builder element (module) you want to work on.
- In that module’s “Advanced” tab, add a CSS class. You don’t need an opening
.character, so to give a module class
my-classyou’d simply type “my-class” into the “Class” field.
- Next up, open the same page in a new browser tab, and go to “Customize” > “Additional CSS.”
- 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. 🙂