Adding A New Beaver Builder Page To Your Site

I’ve already installed and activated these plugins…

• Beaver Builder Lite
• Fullwidth Page Templates
• PowerPack Lite for Beaver Builder

Don’t forget there’s a Pro version of Beaver Builder if you need more power.

First I make a new page in the normal way

1. Dashboard > Pages > Add New
2. Choose the no sidebars layout option
3. In Page Attributes choose FW Fullwidth
4. Then click the Page Builder button

Adding a 3 Column row to the top of the page

How to drag a 3 Column layout into your page

1. Click the plus sign
2. Select the Rows tab
3. Drag a 3 Column row in to the page

We now have a 3 Column layout at the top of our page.

But the navigation bar is hiding part of this.

We now need add the 70 pixels of margin

1. First close the rows and modules dialog box by clicking the x Which will then turn into a + icon.
2. Now make sure you’re clicking the wrench for the ROW settings, not the column settings.

Adding the 70 pixels top margin to the ROW settings

After you click the wrench icon the row settings dialogue will display.

1. Select the Row Settings: Advanced tab
2. In Spacing > Margin > Top: type 70

This adds a 70 pixel top margin to the top row of your layout. You’ll now notice that the top row is no longer half hidden under the navigation bar.

You can now drag the modules you want to use into these three columns.

Now I can start to add content to my layout.

I wanted to place a photo in the first column of  my 3 column row. So I dragged a photo module into the first column of my layout

1. Click the + icon to open the Modules, Rows and Templates dialogue.
2. Select the Modules tab.
3. from the drop down, select Standard Modules.
4. Drag the Photo module into a column.

5. Drop the Photo Module in the column where you want it to display.

Now the Photo Module settings dialogue opens allowing me to choose a photo to display in this column

6. Click the Select Photo option to upload a photo to display in this column.

The photo is now in my layout

7. The Photo is now in my layout.

You go through this same process to place any of the modules into any column in your Beaver Builder layout.