What can I do with Beaver Builder?

OK, we've just finished building your brand new site and included the premium Beaver Builder plugin so you can handle many of the updates as your organization changes or grows. Of course, this will allow you to make many of the content changes but should you need any modifications to the overall theme, templates made, or custom coding you can always reach out to the pros at BOLD.

Basic Overview

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