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 premium 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.

Page Builder 2.x:

If you don't see that panel, click the Plus icon in the upper right corner. To close it, click the X icon.

Page Builder 1.x:

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

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 three 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 column layers, as in this quick mockup showing a single row with two columns. The left column contains two Heading column layers, and the right column contains the sidebar.

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 a href="https://kb.wpbeaverbuilder.com/article/303-responsive-behavior-in-the-beaver-builder-pugin">overview article on responsiveness.

Save 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 as 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 the Beaver Builder Theme or some other theme, it's going to control the header, footer, and (usually 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 style settings for Page Builder, such as colors and fonts
  • WordPress settings (page title and tagline, whether the first page is a Page or a Post)
  • A section where you can add global CSS and JavaScript code

Header, Footer, Sidebar areas in the 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 showing the header and footer subareas, 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 individual page in which you set the WordPress template setting to display it. Note that by default there is only one sidebar in Beaver Builder Theme, 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 the 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.

Beaver Themer lets you create Page Builder layouts in the areas of the page that are normally controlled by the theme. 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 exactly where you want it in the header. Then you can specify which pages that header will appear on -- the entire site, all pages, all posts, specific pages, posts, categories, etc., You can also set exclusion rules, such as "anywhere except this specific page or post."

Here's an example of a header layout with a hero image used only on a home page.

Besides header and footer layouts, you can create Themer layouts for archive pages, single posts, 404 pages, and targeted "parts" of the post (content inserted after the header, after the title, above the footer, etc.).

Here are some examples of things that Beaver Themer can help you design:

  • Create custom archive pages for posts and custom post types and insert custom fields.
    Here's an example of an archive page for a custom post type for Events with custom fields for date and time.

    Note: Beaver Themer works differently from regular Page Builder. With Beaver Themer, you can design layouts for generated archive pages, whereas with regular Page Builder you'd use a Posts module on a regular page. If you're not sure what a generated archive page is, see the basic article on post layouts.
  • Create a layout for single posts.
    The following screenshot shows the same Events custom post type as in the last example, with a layout for the single posts. The post title row contains the featured image of the post as the row background. The two columns beneath the title show the post content on the left and several custom fields on the right.

    Note: Beaver Themer works differently from regular Page Builder for single post pages. With regular Page Builder, you can design layouts for the content area of individual posts, but you don't have control over the parts of the page controlled by the theme. With Beaver Themer, you design a layout for the parts of the page normally controlled by the theme, but you must use the WordPress text editor to edit the content area or an individual post. In the screenshot above, the two smaller images in the post content area were inserted into the WordPress text editor from the media library, and the row with the background photo of princesses uses shortcode for a saved row from Page Builder.
  • Create a site banner that you display above or below the header, content area, or footer.
    Here's a screenshot of a banner that was created to appear under the header on certain pages.
  • Create custom layouts for WooCommerce or Easy Digital Downloads category and product pages, or The Events Calendar pages.
    Note: Easy Digital Downloads and The Events Calendar integrations are currently in Beaver Themer as of Version 1.1.
    Here's an example of a custom WooCommerce product category page. The category image appears as a row background behind the page title, and the products are displayed in a Posts module.
  • Create two different footer layouts with a row that resembles a footer widget area except it contains module content, not widgets, and use the footer layouts on different pages of the site.
    The following screenshot shows two footer-type Themer layouts that are applied in different locations: the one on the right applies to all types of product pages, while the one on the left applies everywhere else.
  • Create a custom 404 page, as in this screenshot:

Note: The Beaver Builder plugin is required for Beaver Themer to work. Also, WordPress requires that you have a theme. You can use Beaver Builder Theme or other themes that work with Beaver Themer.