The Basics

Required & Recommended

Not Required

Your Decision

What Is the Frontend Page Builder That We Use?

We use Beaver Builder and have done it for a long period of time now. Although Beaver Builder looks simple starting off, it has allowed Digital Zest to produce some stunning websites. Beaver Builder is a frontend editor that allows for simple edits on pages of a website. The frontend builder allows you to drag and drop components onto a webpage and then further provides you with extensive options to change the way these components act or look to viewers.

How To Start Building With Beaver Builder

There are a couple of methods that you can use in order to begin opening up the interface required to edit pages using Beaver Builder. Below are both methods of accessing the frontend page builder
 
Method 1
Navigate to Pages > All Pages on your administrator area of the website, once there, hover over a page that you'd like to begin editing and you'll see the option called Page Builder as seen here. Proceed to choose this option and you'll be redirected to the page in question. You'll then see the following interface as seen here which provides you with all of the options that you'll need in order to begin creating a webpage.
 
Method 2
Navigate directly to the page in question while logged in as an administrator, you'll see a black bar at the top of your page, proceed to choose Page Builder as seen here. You'll then see the following interface as seen here which provides you with all of the options that you'll need in order to begin creating a webpage.

How To Add Modules & Rows To The Webpage

Once you've got the interface open and ready to begin building you can simply click and drag the component that you'd like to add to the webpage, for example, as seen in the following GIF you can see that I simply click and drag and then drop it on the webpage.

Which Modules Should You be Using?

This really depends on the design, task, or content that you'd like to add. It's likely that you'll use the following Modules frequently:

Standard Modules (default choices as seen here)

Basic Modules

  • Button
  • Heading
  • Photo
  • Text Editor

Media Modules

  • Icon
  • Map

Action Modules

  • Menu

Posts Modules

  • Posts

What Can You Do With These Modules?

Once you've added a couple of modules to the webpage you can begin to edit the options and add in content that is almost identical to the task or design provided. The most frequently tabs provided on the majority of modules are:

General (Content, Link)
Style (Font, Font Size, Colour, Weight)
Advanced (Margin, Padding, Visibility, Class, Export & Import)

Adding Rows

Typically rows are automatically added when placing your own modules on screen and in some cases, you may not require to add your own to the webpage. However, sometimes adding in your own rows allows you to set up the layout of the page in advance.
 
Rows can be added by navigating to the Row tab as seen here and then following the same procedure as previously, click drag and drop to the position that you'd like. It's likely you'll use 1-4 Columns, 5-6 columns are not seen often in designs and the other sidebar alternatives can be achieved by changing the column width percentage.

On-Screen Tool Options

There are a couple of useful On-Screen Tool Options that allow you to control the modules that you've added. These are:

Move
The Move option allows you to move modules and columns to different areas, above, below, left, and right of other modules as seen in this GIF.

[Module] Settings
The Module Settings refers to the module you may be editing, this could be a Heading Setting, Text Editor Setting, etc and this is another route to edit the options of each module, an alternative way to achieve this is by clicking within the module itself.

Duplicate
The Duplicate option is rather useful as you can set up a perfect module that is properly styled and then proceed to use this option to quickly duplicate and multiply the amount of these modules, should you need more for other areas of the design.

Edit Column
When you place a module, a column is created in which the module sits. As such you'd need a way to edit the settings of this column and we can do so by using this option. You're able to edit the Width, Minimum Height, Background Element, Border, and much more.

Remove
The Remove option allows you to delete the module, if you do accidentally delete a module you can do CTRL+Z to have this come back. You could also not save the page and decide to re-edit the page.