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. And maybe you're wondering if you really need to add Beaver Themer, a paid add-on plugin.

Here's an overview of the Beaver Builder plugin, Beaver Builder Theme, and a little bit about what Beaver Themer adds if you need it.

Plugin vs. Theme vs. Beaver Themer

WordPress makes a distinction between the content area of a web page and all the other areas, including heading, sidebar, and footer, as shown in this diagram:

Here's how Beaver Builder fits into that.

  • The Beaver Builder plugin, when you enable it for any specific page or post, lets you create intricate layouts in the content area of the page, using its tool called Page Builder.
  • A WordPress theme is a mandatory component of a WordPress site. It controls the header, footer, and sidebar areas of your site. Depending on the theme you choose, you may also be able to suppress these areas on individual pages and posts, using WordPress page templates.
  • The Beaver Themer plugin (also called Theme Builder) overrides the areas controlled by the theme so you can build highly customized layouts in areas outside the content area, and you can specify which pages the theme layouts apply to. Beaver Themer uses Page Builder to build these layouts with the difference that they will apply to theme areas of the web page.

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 Page Builder, a front-end designer that gives you a WYSIWYG view of the content area as you develop it. Starting with a template or a blank page, you can easily modify or add content modules in complex arrangements of rows and columns, as shown in this example:

Start with a layout template or a blank page

When you create a new WordPress Page and start Page Builder (click the Page Builder tab next to the WordPress text editor on the editing page), you can choose a landing page or content page template, or you can start with a blank page. 

Either way, you can start adding and modifying row and column layouts and content modules. Drag row layouts and modules into your page from the Content panel. 

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

When you drag content modules from the Content panel to the layout, the rows and columns are automatically created. As your layouts become more complex, with columns within columns, sometimes it's easier to drag in row layouts first, then drag content modules into them. For example, here is a single row with several layers of columns.

For more information about how columns work, see the column layouts overview.

In the screenshot above, the layers of columns inside a single row, but you could also put each column layer into a different row, as shown in this screenshot:

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 makes layouts look good on medium devices (tablets) and small devices (mobile) with no extra effort on your part. However, if you want more control over breakpoints, stacking, and spacing, you can tweak the spacing separately for large, medium, and small devices. Start with this  overview article on responsiveness.

Saving Page Builder layouts for use elsewhere

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 differently in each location. Or you can save the entire layout (called a layout template, or just a template for short), which you can use on any other page of your site or export for use on another site. 

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.

Enabling posts for Page Builder layouts

By default, Page Builder is enabled only for WordPress pages, not for posts. When you enable posts or custom post types, you can use Page Builder to lay out the content area of individual posts or custom post types. See the article 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. Or, you can use the add-on Beaver Themer plugin to create custom archive layouts.

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, and allow you some degree of customization of style and layout in these areas. 

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

  • Layout and styling of the header, footer, and sidebar
  • Layout and options for blog archives, posts, and WooCommerce
  • Default layout and style settings for Page Builder
  • WordPress settings (page title and tag line, whether the first page is a Page or a Post)
  • A section where you can add global CSS and JavaScript code to be inserted into 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.

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

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.

Beaver Builder Theme default settings for Page Builder

Beaver Builder Theme lets you set some of the defaults for Page Builder modules in Customizer. 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 for Page Builder:

  • 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.
  • Lightbox
    Controls the default behavior or whether images open in a lightbox when clicked.

When do I need Beaver Themer?

Although Beaver Theme offers a lot of flexibility in customizing the theme areas (header, footer, sidebar, post information), if you want more control over these areas then Beaver Themer may be right for you. 

For example, Beaver Builder Theme lets you configure the site title or use a heading logo in the header, but not both. With Beaver Themer you can create a custom header, placing the title, logo, menu, and any other information where you want it. Then you can specify which pages that header will appear on -- the entire site, all pages, all posts, specific pages or posts, or anywhere except specific pages and posts. 

You can also use Beaver to set up a template for WordPress-generated archive pages and single posts. For single posts, keep in mind that Beaver Themer controls the layout of post information such as title, author, date, comments, and featured image, but not the post content area, and you'll have to use the WordPress text editor to write the post content itself.

The Beaver Builder plugin is required for Beaver Themer to work, and although a theme is always required by WordPress, there are  other themes that work with Beaver Builder Theme