What can I do with Beaver Builder?

OK, you've installed the Beaver Builder plugin on your WordPress site. And you've installed a WordPress theme – If you have the Pro or Agency version of Beaver Builder, maybe you've installed the Beaver Builder Theme and child theme. 

Now what?

Here's an overview of the Beaver Builder plugin and Beaver Builder Theme.

Theme vs. plugin

First, some terminology.

  • A WordPress theme controls the header, footer, and sidebar areas of your site.
  • The Beaver Builder plugin, when you enable it for any specific page or post, controls the content area.

Here's a diagram to illustrate that:

The following sections show you the basic concepts underlying content layouts with the Beaver Builder plugin, the parts of the page controlled by the theme, and how the Beaver Builder theme integrates with and enhances the plugin.

Beaver Builder Plugin

The Beaver Builder plugin installs the front-end UI designer called Page Builder, which gives you a WYSIWYG view of the content area as you develop it. 

Start with a layout template or a blank page

When you start Page Builder for any particular WordPress Page, you'll have a choice of landing page and content page templates, both of which fill the content area of the page (not the theme areas). Or you can choose a blank template and add your own layout from scratch.

If you select a pre-designed layout template, you then can start customizing the layout by changing rows and columns, and adding, editing and deleting modules. If you select a blank template, you start adding row and column layouts and content modules. You can just start dragging layouts and modules over to your page from the Add Content area that appears on the right. 

If you don't see that panel on the side, click the Add content button in the upper right corner of the page.

The basics of content area layouts

The basic Page Builder layout is one or more rows, and within those rows, you can have stacks of one or more columns. For example, here is a single row with several layers of columns.

Within those rows and columns, you drag in the content modules. We're showing you a skeleton layout here, but you don't need to create the whole layout in advance. Just drag modules into the content area and position them as a new row, or add a column to an existing one. For more information about how columns work, see the  column layouts overview.

In the first layout, there are columns stacked within the same row. You can also put each of those column layers into separate rows:

What determines when you start a new row in your layout? There's no hard and fast rule, but here are some considerations:

  • You want to set a background color, image, or video for a particular row in your layout. Create a separate row for that section.
  • You want to save a particular row in order to reuse it somewhere else.
  • You have content sections on your page that you might want to reposition later –  if they are in separate rows, it's easy to move them by dragging.
  • You want to take advantage of the row's margin or padding features to position a block of content within a row, or position the row with respect to other rows.
  • Instead of a theme sidebar, you want to add a Sidebar module or some other module that appears to span several rows. To give this area the look of a sidebar, you need a single row with two columns, as this quick mockup shows:

Think responsive

Page Builder has built-in features that make layouts look good on medium devices (tablets) and small devices (mobile) with no extra effort on your part. The main features are device breakpoints, automatic column stacking and autospacing on mobile devices of margins and padding. However, if you want to take more control over breakpoints, stacking, and spacing, you can get just about as picky as you want. Start with this overview article on responsiveness.

Saving Page Builder layouts

You can save your layouts, from individual modules to rows to the content area of an entire page, called a layout template, or just a template for short. You can save rows and modules globally, so that any change you make in one place is reflected everywhere, or you can save the rows and modules so you can reuse them but can modify them in each location. Or you can save the entire page layout. If you have the Agency version of the Beaver Builder plugin, you can white label the Page Builder UI and create custom editing environments for your clients by controlling which layout templates, rows, and modules are available to them.

Beaver Builder Theme

Whether you're using Beaver Builder Theme or some other theme, it's going to control the header, footer, and (probably optional) sidebar areas. What appears in the header, footer, and sidebar areas, and how those settings are made, depends on your theme. Themes also usually control other global settings for your site, giving you more or less flexibility in customizing the style and layout.

In the Beaver Builder Theme, all theme settings are made in the WordPress Customizer, which you can access on the Appearance menu in the WordPress admin panel. The Beaver Builder theme Customizer has settings for the following general categories:

  • Layout and styling of the header, footer, and sidebar,
  • Default layout and style settings for Page Builder
  • Layout and options for blogs (with or without Page Builder enabled) and WooCommerce
  • Standard WordPress settings (page title and tag line, whether the first page is a Page or a Post)
  • A section to insert global CSS and JavaScript code at various places in the head or body of the page.

Header, Footer, Sidebar areas in Beaver Builder Theme

The header contains two separate areas:

  • The top bar, an optional strip above the header, which can contain one or two columns.
  • The main header, which includes the logo and the menu and has a number of choices of layout.

The footer also contains two separate areas, each optional:

  • The main footer, similar to the top bar in allowing one or two columns.
  • The footer widgets area, which appears above the footer.

The sidebar is optional but if enabled, it will appear on every archive and post page, and also on any page in which you set the theme template to display it. Note that by default there is only one sidebar, whose widget content will appear wherever you enable it (all Posts or individual Pages). You can't customize the sidebar widgets differently for individual posts and pages unless you use a third-party plugin or write code. Another way to customize the sidebar is to use the Beaver Builder plugin to create a Sidebar module in your content layout.

Here's a diagram with the header and footer sub-areas, but note that the positioning of the header logo and menu within the header depends on your Customizer layout setting.

Beaver Builder Theme's default settings

The Beaver Builder theme's Customizer settings let you set some of the defaults for Page Builder modules. This saves time and makes it easy to get conformity in your page layouts site-wide unless you choose to override that behavior. 

Here are some Beaver Builder Theme settings that affect components other than the header, footer, and sidebar:

  • Accent color
    Sets the default color of both Theme and Page Builder links and buttons.
  • Headings
    Sets the default font family, size, and other font properties of headings in the content area.
  • Text
    Sets the default font family, size, and other font properties of non-heading text in the content area.
  • Background
    Sets a background color or image for the entire content area.
  • Blog area
    If you website is a blog, or includes a blog area, these settings control aspects of the layout of blog pages and information that appears in the content area of the blog. These Blog Layout settings in the theme apply whether or not you use Page Builder for the blog portion of your site. See the section on  pages vs. posts.
  • WooCommerce pages
    Controls some of the default layout and styling on WooCommerce pages.
  • Lightbox
    Control the default behavior or whether images open in a lightbox when clicked.
  • Code
    Lets you insert site-wide CSS and JavaScript code, or insert code specifically in the <head> tag or at the beginning or end of the <body> tag.
  • WordPress settings
    Every WordPress installation has some settings that are standard:  the site title and tagline, the site's favicon, and whether the home page is a blog or a static page. The Beaver Builder Theme includes these standard WordPress settings in the Settings tab.

Pages vs. posts

By default, Page Builder is enabled only for WordPress Pages, not for Posts. You can enable Page Builder to be used for the content area of blog posts or custom post types in the WordPress admin panel in  Settings > Page Builder > Post Types. See the articles on using Page Builder with Posts for more information.

Note: Because WordPress index and archive pages are generated on the fly, you cannot use Page Builder with those pages. For more information, see the article on  generated WordPress archives vs. Page Builder layouts.

In the Beaver Builder Theme, there are basic settings for the blog layout, whether or not you enable Page Builder for the content areas. These layout settings control settings such as whether or not there is a sidebar and whether it's on the left or right, whether a summary or the full post is displayed on archive pages, where the featured image appears relative to the text, whether the author's name and date appear on blog posts, and so on. See the  Content Tab article for more information.