I just picked up Beaver Builder to use with Genesis/Dynamik. I can’t find any documentation on how the plugin’s CSS works. Specifically, will the text added in a content module respect the CSS declared in the Dynamik Design settings? Or will the plugin add its own CSS automatically, thus rendering what we setup in Dynamik inferior?
If the plugin automatically adds CSS, I wonder if it would be possible to have a toggle to turn that off. Otherwise it will be more challenging (or at least more time consuming) to ensure consistency from page to page.
Thanks for getting in touch! We have several users that are using the Genesis/Dynamik/Beaver Builder combo so I’m sure they may chime in here as I haven’t specifically built a site with that combo, but the short answer to your question is yes, the Beaver Builder modules will inherit CSS styling from your theme. I believe that is what you are after so just let me know if you have any further questions and thanks again!
Yes, content entered with BB will respond to the settings you make in DWB, for the most part. The one in particular that does not, is the text color.
For example, if you add a callouts to a page in BB, the heading and body text will use the styling as setup in DWB (font, size) but not the color. This is easy to remedy in DWB; just click the Custom button for the text element and add: color: red !important which will change the text color to red.
If you do the same for the content paragraph font for example, setting it to blue as shown above, any callout you add subsequent will have this styling.
So to sum it up, your BB elements will use whatever you set up in DWB. It really is the best of both worlds!
I personally have had no problem with DWB controlling the text color. Lyle see my note at the bottom:)
The Beaver Builder plugin basically inherits the css styles of the theme it is installed on.
With the exception of being able to globally overide the text color of everything in a Row and choose the H1 - H6 style and the text alignment in the Heading module, there is no other way to directly change the style of text elements unless they are entered and modified in the Text Box module.
There is however, a CSS Class option on all modules so if you need to create some custom styles for certain parts of a page section, you’d just need to add a custom class in your theme’s custom css area, then reference it in the module.
All this lack of being able to change things in Beaver Builder is actually a good thing. It essentially prevents a whole bunch of style sheets from trying to overide each other.
The good news is that you’re using Beaver Builder with DWB, so you have all the style customization tools you’ll ever need. For example, Beaver Builder will inherit the fonts, sizes and colors you choose in the U-Control section of DWB. Need to change that H2 element to a 36px black Lato font, just head over to the Content section of U-Control in DWB and input your new values.
DWB and Beaver Builder is the best solution for building WordPress websites I’ve come across.
Hope that helps
Colin
P.S.
Lyle, if you remove or comment out the following code from the bottom of Junior Atoms’ css file, you should be able to control the color, for links anyway. If that doesn’t work, something else must be overiding the DWB styles because I haven’t had any problems with that.
REMOVE THIS
fl-builder .entry-content a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted;
}
