Skip to content

Beaver Builder Best Practices

This page contains information on some of the ways to make the most use of Beaver Builder's functionality to help a build take less time while maintaining consistency across the site.

Global Settings

Set global (site-wide) default row widths

The global settings in the Beaver Builder editor determine the default width settings of all of the rows in your site. This means that when you add a row to a module, it will have that setting unless you modify it in that specific row.

You can customize the following global settings for row width and row content width:

  • Row width: Full width or Fixed
  • Row content width: Full width or Fixed - Content width can be set only when row width is set to Full width.
  • Max width

Here's what happens to new and existing rows when you change global width settings:

  1. New settings apply to new rows
    If you change the global row or row content width setting from Full width to Fixed or vice versa, the new settings only apply to new rows that you create. You can override these settings in individual row settings.
  2. Modified settings apply to certain rows
    If you change the global Max width setting to a different value or unit, the change applies to all existing rows across your entire site that meet the following conditions: Either the individual row width or content width is set to Fixed, OR the individual row doesn't have a custom max-width setting

Notes:

  • Changing global settings may not be reflected in individual row settings unless you flush your site cache and reload the page.
  • Exact row and row content widths are affected by row, column, and module margin and padding settings. See the Related Article on full- and fixed-width row layouts for more details.
  • If you set the row width to Fixed, either in Global Settings or in individual rows, this setting can get overridden if your theme is set to full-width rows.
Tools Menu
Global Settings
Row Settings
Global Responsive Layout

Change device breakpoints site-wide

By default the Beaver Builder browser-width breakpoints are as follows:

  1. Large device breakpoint: 1366px
    Device behavior changes from Extra Large to Large at 1366px.
  2. Medium device breakpoint: 768px
    Device behavior changes from Large to Medium at 768px.
  3. Small device breakpoint: 480px
    Device behavior changes from Medium to Small at 480px.

You can modify these breakpoints site-wide in the Page Builder global settings. If you change these breakpoints globally, be sure to adjust any custom CSS rules you've written accordingly.

Important:

Aside from adjusting the row settings, default content max-widths, and occasionally the responsive breakpoints, there's nothing else you need to touch in global settings.

Do NOT add any CSS or scripts to the Global settings built-in tabs for these items - we are using the Beaver Builder theme which gives us an Additional CSS tab and Code tab in the customizer and there is no reason to scatter code in other places - keep it all in one place!

Source: Beaver Builder Knowledgebase - global row widths | site-wide breakpoints

Saving Templates

Save a Row, Column, or Module for Reuse

You can save a row, column or module for reuse on your site. You can also export saved rows, columns, and modules for use in other websites. You can save your row, column, or module as standard or global.

  • When you save an item as global, each instance of it that you drag into any page on your site is linked to all other instances. Any change you make to one instance will update all instanced and the global saved version.
  • If you save an item as standard, each instance in your layout is independent of the centrally saved row or module and from any other instance of it. In other words, once you drag a standard row or module into your layout, it's just like any other row or module at that point.
How to save a row, column, or module
  • 1

    Open the page that contains the row, column, or module you want to save.

  • 2

    Open the row or module for editing by clicking the wrench tool.

  • 3

    Click Save as

  • 4

    Enter a name for your saved module

    decide if it will be standard (No) or Global (Yes) and click Save.

Your saved rows and columns can be accessed on both the Rows tab and the Saved tab in the Content panel. Saved modules are accessed on the Saved tab.

Tip: Global rows, columns, or modules have an orange overlay after they are inserted. Any modification you make to them will affect the saved version and all other instances in your site. Standard rows, columns, or modules don't have any special formatting in your layout because they no longer have any association with the saved version.

To insert a saved row, column, or module into your layout:

  • The procedure for inserting a saved row, column, or module is the same whether it's standard or global.
  • In the Content panel, click the Saved tab, then drag the saved row, column, or module into your layout.

Source: Beaver Builder KB - save for reuse | How to Insert Saved | How to Edit Saved

Save a Custom Layout Template

You can create a custom layout template from a page you have already designed in Beaver Builder (including a Themer layout), or you can create a layout template from scratch starting from the Beaver Builder admin panel. 

How to save a template
  • 1

    Tools Menu > Save Template

    On the Tools menu, click Save template. The Tools menu is in the upper left corner of your screen. You can access it by clicking the down arrow in the title bar.

  • 2

    Name it > Save it

    Give the template a name and click Save.

Note: Layout templates are not public pages on your site and are not available for indexing by search engines - Layout templates are pre-built page layouts with content that you can either append to an existing page layout or use to replace an existing layout. 

To replace existing content or append a layout template to your Beaver Builder content:

  • Open a page for editing in Beaver Builder.
  • Open the Content panel and click the Templates tab.
  • Choose the layout template you want. If the page is not blank, you'll get a choice of replacing the existing layout or appending the new layout.

Source: Beaver Builder KB - Layout Templates | Add a Layout Template to Page

Rules for Saving !important;

Why Save a Row, Column, Module or Template?

CONSISTENCY! In the beginning of a site build during the design stage, you're in the process of figuring out what modules to use across the site and what styling they will carry. Using the same styled module on each page allows little room for error, e.g. accidentally giving an image a 4px border instead of the 3px border used everywhere else on the site. It also is far more time efficient, preventing you from having to restyle a module to match the branding every time you want to use it.

  • Columns - If you have a column styled with margins, borders, shadows and padding that you created for callouts on the homepage, perhaps you may want to use this column style on other pages to highlight certain components. Instead of recreating the column and re-adding all the styling to it for every instance, save the column for reuse.
  • Rows - You decide on using a more toned-down version of the homepage hero row for internal pages, and you would like to consistently use this n every page after having styled the H1 module and the background image, overlay and bottom edge row shape. Give the styled row a class and save it to use across all interior pages. In the future, in the case that a change needs to be made to all instances of the internal page hero, targeting the custom class on the row will allow for changes within all rows that have been given that class.
  • Templates - Along with the hero row on an internal page, the row below it has a text module on the right followed by an image on the left. The same two modules are placed in the row below the first, but in an alternating fashion. Perhaps there are other pages across the site that are content heavy and follow the exact same layout as this page. In this case, it would make sense to style the first page entirely, and then save the template to use in all other pages so that all you have to do on them is replace the content.

After reading how to save templates, rows, columns and modules, you must read through the important rules for saving before proceeding!

Rules for Styling a Module - Before Saving for Reuse

When you have decided on the colors, sizing, alignment, shadows, borders and other design elements that you wish to consistently use across the build, grab some modules that you know you will be repeating across most pages and style them using the built in style tab on the module.

When styling a module, make sure you are choosing items to style that aren't already included in the customizer.

Styling included in the customizer applies to:

  • Heading typography font family, color and size, body text typography font family, color, spacing, case and font size
  • The customizer gives the option to have a separate style for H1 tags
  • Link and site-wide accent colors
  • Button typography font-family, colors and font size... etc.

See WordPress Installation - Customizer Settings [ 2 ] for details on all customizer settings.

Keeping this in mind:
  • Don’t touch a module's styling for font family or color unless you are specifically trying to style it to be different than the style assigned in customizer. For example, you are styling an H2 heading - in the customizer, all headings have been given the font family "Roboto" and all headings are set to the color "#444444". Do not change the font family under the "typography" tab of the module to "roboto", and don't change the heading color under the style tab to "#444444", leave these properties set to default.
  • Only touch the color and font family on the module if you wish to change this specific heading type to a different style completely from the style assigned to all instances of that component in the customizer. For example, in the customizer you do not get to have a separate style for H3 headings and perhaps you wish to style H3 headings to be a different color than the rest, be a more condensed font, be uppercase and a lighter gray color instead of the "#444444". In this case, since you cannot individually style the heading type in the customizer, you can change the font family to perhaps "Roboto Condensed" and adjust the color, case as desired.
  • Why? Because if in the future, the branding colors or font family changes and an update is required to convert site-wide styling to the new one, an easy adjustment to default font family and color from the customizer will apply the change to all instances of modules using the default assigned fonts and colors. Our goal is to avoid as many individual changes as possible and have the few changes you make effect most of the site for a streamlined experience.
Give the module, column or row a custom class!
  • If you are styling a module to be largely different from the default settings and you plan on saving and using this module across the site in many places, give the module a custom class before you save it.
  • Why? Because if a module has been heavily styled in aspects that may not reflect changes made to the defaults in the customizer, then a site-wide change in the customizer will not take affect on these modules. If the modules have been used in many areas across the site's many pages, then a branding change would cause you to have to find all instances of that module and individually change the font and color in each one which is time consuming and leaves room for error. Giving a module a custom class before saving it and using it means that in the event of a brand change, you could use CSS to target all instances of the module with that class, and make the change that way.
  • Read more about giving modules/rows/columns a Custom CSS ID or Class Name

Use the "Standard Modules" page when selecting modules to use on a site. Learn how to make best use of the demo site, how to find the best modules for callouts, and about the best modules chosen for content placement.

Rules for Naming when Saving

It is beneficial to both you as the designer, and a future builder, to name modules or layouts appropriately.

  • Use a defining characteristic of the layout in the name so that people can recognize what it is without having to click on it to see it.
  • For example, when saving modules for use across the site, I name them "H2 - smart headings dual styled", "H3 - caps with spacing", "separator - gray 2px solid", and so on… Detailed naming especially helps when more than one style variant of a module is saved e.g. "H3 - caps no spacing - green"
  • When saving a layout that contains the same modules in it, use the distinctive characteristic of the new row you're saving to play a part in the name.
  • For example, don’t name the layout "homepage row 2 layout" and "homepage row 2 layout 2" - Instead, name it "homepage row with callouts" and "homepage row with callouts and background image"
  • If there's no characteristic in the row that's different from the previous one you saved, then you don't need to save it again. If you like the changes you made and want to save a row to use instead of using the one you saved earlier, delete the old one.

Checklist

Make sure these items are covered before you save!

  • Font family and color haven't been touched unless they differ from the defaults assigned in customizer
  • If the font sizing of the component has been modified for desktop, make sure it's been adjusted for large, medium and small screen devices as well
  • The module has been given a custom class - make sure the class is something unique from another variant of the same module if more than one kind are being saved
  • When saving be sure to give the module a unique and descriptive title

Hints & Pointers

Overview of Settings > Beaver Builder

There are 3 different sections of the Beaver Builder's backend settings that need to be discussed.

Icons tab

Beaver Builder comes with the Font Awesome, Foundation, and WordPress Dashicons icon sets. You can also add your own icon sets through this UI, by helping you upload custom sets from Fontello or IcoMoon to your Media Library.

In the customizer settings when starting a new build as seen In WordPress Installation - Customizer Settings [ 2 ] > general tab > layout, you want to make sure that font awesome 5 is enabled. You may come across a site during revisions or updates in which you are unable to see the font awesome 5 libraries appearing. If you've checked the customizer, and font awesome 5 is enabled there already, you can also check the Icons tab under Beaver Builder settings from the dashboard. When you enable font awesome 5's solid, regular, and brands libraries, make sure you disable the font awesome 4 set.
Back-end Settings
Icons Tab
Tools Tab
Post Types Tab
Tools tab

The Tools tab has a Cache section, a Cache Clearing Tool section (as of Beaver Builder 2.1.5), a Debug mode section, and an Uninstall section. This is a good spot to check if there's some heavy site caching issues that you can't seem to shake.

Post Types tab

By default, Beaver Builder is only enabled for Pages. You can enable it to insert layouts into the content areas of single Posts. If you have WooCommerce plugin installed, you'll see a Products post type, and if you have other custom post types, they'll appear here also.

Note: The Beaver Builder plugin applies to layouts in the content area of your page or post. Standard WordPress headers, footers, and sidebars are controlled by your theme, or by using Beaver Themer, which lets you apply Beaver Builder layouts to theme-controlled areas. If you have Beaver Themer installed and create a Singular layout for Posts or Pages, you will not be able to use Beaver Builder to edit the content area of the page.

Source: Beaver Builder KB - Settings Overview

Other Pointers

  • When using Beaver Builder, its a good practice to save all the main colors from the palette the site is using as presets inside the color picker
Table of Contents
    Standard Modules
    Themer Practices
    Scroll To Top