Adding Custom CSS – Advanced

When considering using Beaver Builder at an advanced level, I think the first thing to know is what to do when and where ie.

  1. when to use the BB tools to style stuff,
  2. when to override using CSS,
  3. and where to put the CSS.

I'll cover the first two shortly, and mention the third for now:

3. Where to put the custom CSS.

The order in which CSS stylesheets are loaded, affects the cascadence / preference / specificity.

There are several places to put CSS which I'll mention in order of global vs specific,

But firstly, the non-editable default CSS, which loads first.

  1. The BB Theme default CSS
    1. Base CSS
    2. CSS modified by settings
  2. The BB Theme Builder (Themer) default CSS
    1. Base CSS
    2. CSS modified by settings
  3. The BB Plugin default CSS
    1. Base CSS
    2. CSS modified by settings

Next, the custom CSS, which loads next.

These are places you can add your custom CSS overrides.

  1. The Customizer
    • You can enter custom CSS in the Customizer, but I prefer not to. The window is too small.
    • There are benefits, such as live-updating.
  2. Appearance > Edit
    • We will be using the BB Child Theme, which requires the BB Theme.
    • You can edit the Child Theme's CSS in Appearance > Edit.
    • This is where I add theme CSS ie CSS for the structure of the site.
    • I usually end up also adding content CSS here too
  3. Beaver Builder (plugin) > Global Settings > CSS
    • It has a similar scope to 1 and 2 in this list in that CSS added in these places affect the entire site.
    • This is possibly a good place to add content CSS, ie CSS that applies to all text, headings ie. H tags, lists etc.

Once you've set the CSS that will be utilised site-wide, you can begin to style individual pages. This is done by starting the builder, clicking the dropdown at the top right of the Builder menu, and selecting "Layout CSS & Javascript". You can add page-specific code here.

To keep the stylesheet trim by only applying CSS where / when needed, I use page-specific and row/column/module-specific CSS wherever possible.

Repeating content should be made into Beaver Builder templates, and the CSS for those templates is saved with the template.

Therefore the CSS for a template is only added to pages that use the template, thereby keeping the page or post as trim as possible.

Share this article:
Posted in Advanced Styling, Advanced, General Advice, Specific Instruction