Beaver Builder Tutorial – The Basics

The Layout Grid: Beaver Builder tutorial step one

The first step in our Beaver Builder tutorial is to build the basic layout grid. You build a Beaver Builder grid layout by dragging rows and columns into your page from the “Row Layouts” Tab.

Adding content to your pages

Drag Modules or WordPress Widgets into the rows and columns in your page.

Configuring Module and Widget settings

The next step in our Beaver Builder tutorial is to configure the module settings. As you place a Module or WordPress Widget into a row or column, you’ll see the settings available for that specific Module or Widget.

There are two main settings tabs, General and Advanced. The General settings are context sensitive and so they change depending on which module or widget you’re using. The HTML Module has very few settings available under the General tab, the Photo Module has settings for crop, alignment, caption and link etc. under the General tab.

Some Modules have a third tab, Style, this tab is also context sensitive and changes depending on the module or widget being used. The options available under the Advanced tab do not change, they’re the same for all modules.

Making a full width layout

Beaver Builder layouts are NOT automatically full width. Your layout can only span the full width of the browser window if you’ve changed several settings. There may be a setting in your theme’s page editor to force the page rows to be full width.

If you’re using a Genesis child theme you may be able to use the Genesis Dambuster plugin to force the Beaver Builder plugin layouts to span the full width of the theme, or the full width of the browser window.

This is one of the most important points in our Beaver Builder tutorial, the layout will not automatically span the full width of the screen. You need to change some settings to make that happen.

For instance: in the Dynamik Website Builder theme I chose…
Page Template > Page Builder.

Then as I dragged rows and columns in to my layout I chose…
Row Settings > Style > Width > Full Width.

I could then set a background color for that row, and the color would span the whole browser window.

GeneratePress is available as a free or premium theme and works well with Beaver builder plugin. GeneratePress has a page option of “Page Builder Container”, this makes the page layout Full Width.

The Genesis Dambuster plugin (which only works on Genesis child themes) has several options that need to be configured before your layout rows will span the full browser window.

The important point is…

Your layout rows can only span the full browser window if your theme is already a full width theme. And even then, you’ll have to change several settings to get a full width layout. It doesn’t happen automatically.

Options when building the Beaver Builder layout grid

To drag layout grids into your page, use the options in the Row Layout drop down tab. You can build complex layouts by stacking these rows of boxes one on top of, or inside of, another.
There are ready made Row Layouts of one to six columns as well as layouts with left and right hand sidebars. You can also use the drag handles to resize the width of any column in your layout.
You can nest columns inside columns, but you can only go two layers deep. You can not place columns within columns, within columns. You can also stack rows of columns one above another to build very complex layout grids.

If you want a row to have an independent background color or background image, make sure that, that row is placed independently and is not nested inside another row.

You can also place empty columns in your grid to act as spacers. For instance, if you have a background image on your page and you don’t want the text on your page to overlap the image, you could place an empty layout box over the background image to prevent text in the adjacent module from overlapping the that particular area.

If your theme supports full browser width backgrounds, you can make your row full width by using the row Style settings.

Building a page layout, step by step

• Expand the Row Layouts tab and drag layout columns into your page to build the basic layout grid.
• Hover your mouse over any row in your new layout and click the spanner icon to open the settings dialogue for that full row.
• Set the width, background, text color, margins and padding etc. for that entire row.
• If you can’t see the Beaver Builder sidebar, click the Add Content button in the top Beaver Builder navbar. Expand the Basic Modules tab and drag a Text Editor or Photo module into one of the columns or rows in your page.
• Type and format your text or choose the photo you want to display.
• Click the module’s Save button. Then click the blue Done button in the top toolbar.

Don’t forget to add a link to this page in your navigation bar.