We’re very excited to announce that the Beaver Builder plugin is ‘Hero-Ready’ and completely customizable with CSS Hero.
This high quality, ‘drag and drop’ page builder makes building beautiful websites easy and is the secret weapon of amateurs and agencies alike.
By combining the structural power of Beaver Builder and the visual customization options available in CSS Hero, users have a new level of control over the front end of their websites.
Watch this Video: Running CSS Hero on Beaver Builder.
You can see all of the features that come built into Beaver Builder on the plugin website, but some of our favourites are:
- Ability to create websites; start to finish, without touching a single line of code.
- Built on bootstrap with pixel perfect precision.
- Flexible and super-lean, it won’t slow you down.
- It doesn’t generate shortcode, just clean readable HTML.
- No restrictions or lock-ins.
- Works fantastic with CSS Hero!
Using CSS Hero on Beaver Builder
BB works with a Row > Column > Module structure and Hero provide two different editing options:
Default Behaviour: Hero by default will allow you to edit ‘module’ contents on a ‘row’ level. This means that if you’re editing a heading text color in a specific row all other heading in that row will be affected. This first editing layer allows to easily edit elements on the fly.
How to setup and edit a Custom Class for a Row in Beaver Builder with CSS Hero.
Adding custom classes: If you may want to have greater control on a specific module in order to style it separately, assign a specific class via Beaver Builder as shown in the video below. By doing so, CSS Hero will automatically provide edits for that specific module with only that class in that row.
How to Video: How to setup and edit a Custom Class for a single element in Beaver Builder with CSS Hero
Of course the same concept applies both to rows and modules, so you combine module classes and row classes for specific customizations.
How To Manually Add Beaver Builder Elements to CSS Hero
If you use (or plan to use) this Plugin...CSS Hero can help you deeply and quickly customize the Beaver Builder Plugin, solving some common issues like:
- How to customize fonts in the Beaver Builder WordPress Plugin, to make font biggers or change typeface for titles and header texts
- How to change CSS background image on the Beaver Builder WordPress Plugin and build background fades
- How to change colors and styles on Beaver Builder WordPress Plugin