In this video I show you how to manually add Beaver Builder page builder elements to CSS Hero so that you can take your css edits that little bit further.
If you're using Chrome, you will need to press "F12" to bring up the Inspector tool. If you're using Firefox, you will need to add the Firebug Extension to Firefox and use it to identify the CSS elements.
Let's have a look at the 3 parts of the CSS you will need to identify:
This image above displays the 3 parts of CSS code that you will need to identify and string together to put into the Custom Selector section in CSS Hero to enable it to recognize the Beaver Builder page element you want to style.
.fl-builder-content = This identifies the element as being part of the Beaver Builder page builder. You should always include this.
.fl-node-548e45b6dca96 = This uniquely identifies the Beaver Builder module (called a node) that holds the element you want to change. If you do not include this, CSS Hero will default to unilaterally changing all of the chosen element throughout your website, rather than individually.
.fl-callout-title = This the CSS Class name of the element you want to change. In this example, it's the title text of the Call-Out module, but it could be any element within the Beaver Builder page builder.
When we add these 3 elements together we get the following string:
.fl-builder-content .fl-node-548e45b6dca96 .fl-callout-title
All you need to do now, is copy the whole string and paste it on it's own line in the CSS Hero "Custom Selectors" section.
Once you've added your CSS String to CSS Hero, you will be able hover over the element, select it, then change everything you want.
It will take a little bit of practice to learn how to identify the CSS elements using Inspector or Firebug, but you'll soon get the hang of it.
If you're having problems getting it to work, double check you've added the period (full-stop for Brits) before each part of the string.
If you haven't got CSS Hero yet, don't forget to use HEROBEAVER in the coupon box to get an awesome discount.
Cheers for now,