_BB_Links_Documentation

Beaver Builder - Page Builder - Basic How To

Documentation

Beaver Builder can layout Pages OR Posts - Instructions are for Pages

Edit a Page with Beaver Builder - Launch the Editor

New BB Page

WordPress Editor > Sidebar > Pages > Add New OR All Pages > See List > Add New button at top

It is probably a good idea to enter a Page Title and other administrative details before launching the Beaver Builder Page Builder.

Click on "Beaver Builder" Tab to launch the Beaver Builder Page Builder Editor

Existing BB Page - from the WP Dashboard

WordPress Editor > Sidebar > Pages > All Pages > See List

when mouse goes over the Page title, you'll see "Edit Quick Edit...." and "Beaver Builder" at far right

click "Beaver Builder" and you will launch the Beaver Builder Page Builder Editor

OR click normal Edit and use Beaver Builder Tab shown above

Pages > Specific Page > Edit

might send you to this view. If so, just click the "Launch Beaver Builder" button.

Existing BB Page - When logged in and viewing a published page

If you go to View a Page, or open a new browser window and navigate to any part of growing weisser.com, you should see a bar at the top that looks something like this (some of the icons might not always appear) -->

Click on the "Beaver Builder" icon, and that will allow you to edit the page with the Beaver Builder editor.

Edit a Page with Beaver Builder - Layout a Page - the Basics

Starting a Beaver Builder Page

A dropdown window will appear on the right. To make the drop-down window disappear, click the "X."

To make the drop-down window appear, click the "+."

Below the x / + icon, there are 4 Tabs. In this lesson, we will be using Modules and Rows tabs. When Beaver Builder opens, the drop-down window on the right opens to the Modules tab / view.

Explanation: the Page Elements, which act like Containers are:

Rows & Modules

There seem to be 2 types of containers:

Type 1 - Positional Containers <-- from the Rows drop-down window

These containers give structure to the page layout by being locations for the content.

Rows can themselves contain multiple columns (the column widths are adjustable).

Row - gray

These containers go from the far left edge to the far right edge of the website design space.

Sub-Row or Column - blue

These sub-row containers split the row into vertically separate columns. They seem to disappear when we drop Content Modules into them, but if we drag the Module out, they reappear as empty containers.

The five icons, left to right: Move, Settings, Duplicate, Actions, Remove

Type 2 - Content Containers <-- from the Modules drop-down window

These containers contain and manage content like text, photos, video, etc.

Module - blue

These containers manage different types of content: Heading, Text, Photo, Custom HTML, Buttons, Video, Audio, and more.

This is a Heading

This is a button

This is some text.

this is a photo

This is a photo.

Option A - Use a Row

Option A - Step 1 - Create a Row

If you want to create a Row structure (which can include multiple columns), click on the Rows tab to show the Rows view.

Although the "Rows" Tab and View are in the second position in the tab row (left to right), we will almost always do this step first.

Although BB uses the word "Row," rows can be very tall.

Move your pointer over the row type that you want, until the 4-way arrow pointer shape appears. Drag and drop the row image onto the main window, positioning it where you want.

It may take some time to get the feel for how the drag and drop works, but it is fairly intuitive.

Option A - Step 2 - Place Modules for Content

into the Row and Sub-Row Rectangles

What goes inside the positional (Row and Sub-Row) containers are the inner containers, the modules.

Wherever the Modules are located, the modules contain the content.

Drag and Drop a Module into a Row or Sub-Row positional container

Position your mouse pointer over the module type that you want to use. Drag and drop the module into the target positional (Row or Sub-Row) container where you want to place the content.