Modules and Terminology

This article covers some basic terminology as it applies to Beaver Builder Modules, and things you might find on websites, generally.

First up, what's a Beaver Builder Module anyway? Lets take a quick recap of this post (which is itself so short you may as well stay here).

I am a row

I am a column

I am a module

I am a column

I am a module

I am a column

I am a module

Row

A row spans the whole width of the website (window), boxed container (like this site), or content area (the width of this text).
You can only have one row in the horizontal axis.
You can, and usually do have many rows vertically.

When laying out a page, a Beaver Builder Row and Column is required to house a Module. Not to worry, though. Those will be created where needed ie. if you drop a Module onto a page, a Row and Column will be created.

Column

A column is a vertical "slot" which sits inside a row, dividing it.
A Beaver Builder Column is required to house a Module.
You can have multiple modules within one column.
They will stack vertically beneath one another.

Module

A Beaver Builder Module is where the party happens. From simple text and photo Modules, to advanced grids and sliders, the Module is Beaver Builder's basic unit.

All together now..

Rows, Columns, and Modules all have extra settings that allow you to tweak spacing (margins and padding), where they appear, animation. You can also change the background and text colours of rows and columns.

WordPress page vs Page Builder page

When you click Page Builder, an existing WordPress page is converted to a Beaver Builder page.

To launch the page builder

  1. On the front end (not the dashboard), go to the page you want to add-to or edit eg. mywebsite.com/about
  2. Click the Page Builder item in the WordPress admin bar at the top.

The Beaver Builder Page Builder will load so you can begin editing content on the front end of your website.

Other ways of launching the page builder

  1. Go to the WordPress dashboard
  2. Go to Pages or Posts in the sidebar
  3. Hover over the page name, and click Page Builder

If you are on the Edit screen to change the title, date, featured image etc of a Page or Post, there will be a Page Builder button where the content area normally is, or a Page Builder tab next to a Text Editor tab at the top of the post. You can launch the page buider from there.

All the content is moved into a Text Editor Module. You shouldn't really notice any difference at this point, except that you now have all the Beaver Builder tools at your disposal.

The Default "Stock" Modules

This is the complete list of modules that Beaver Builder has by default.

They are all really good, but the ones in bold are the ones you'll probably find most useful.

Basic

  • Heading
  • Text Editor
  • Button
  • Separator
  • Photo
  • Audio
  • HTML
  • Video

Media

  • Map
  • Icon
  • Gallery
  • Slideshow
  • Content Slider
  • Testimonials
  • Icon Group

Actions

  • Callout
  • Menu
  • Subscribe Form
  • Social Buttons
  • Call to Action
  • Contact Form

Layout

  • Pricing Table
  • Tabs
  • Accordion
  • Sidebar

Info

  • Number Counter
  • Countdown

Posts

  • Posts Carousel
  • Posts
  • Posts Slider

What to use When and Where

After extracting the bold items from the list of modules, here is a quick rundown on where / when to use them.

But first it's worth noting that WordPress itself has several formatting tools available, which I intend to cover in another article.

In the meantime I'll just mention them.

WordPress has a Text Editor with a Text / Visual tab to optionally see the html code.

Within this editor you can format text as headings or paragraph text.

You can insert media, including pics and video into your post. The WordPress Codex covers this in detail.

When you use the Beaver Builder Text Editor Module, it's the same text editor that WordPress provides, but in a much more flexible, dynamic context. For example you can have multiple text editors on a page in rows and columns.

Heading

A module for creating a heading, like the one at the top of this section.

Because you may have a body of text with lots of headings, you may consider rather formatting them within the text editor, otherwise you'll find yourself doing a lot of splitting-up of text. But otherwise, you may find it useful.

Text Editor

The aforementioned Text Editor which utilises the built-in WordPress text editor, which in turn uses TinyMCE.

Button

A standard - or if you prefer, non-standard - button, with options for styling, link target, icon etc.

Separator

A horizontal line

Photo

A single photo

Gallery

A gallery of photos.

WordPress also ships with the ability to create a gallery.

Slideshow

Beaver Builder has quite a few slideshow or slider options.

Besides the even simpler option to turn a row background into a slider - something I recommend considering first - this one is pretty straightforward.

Menu

A nav menu like the one at the top of your website, except you can put this anywhere.

Tabs

Nav Menu items are sometimes referred-to as "tabs", which technically they are, but this tabs module is a series of tabs in a row along the top of a box. You set the tab title and the content in this module.

Accordion

Accordions are similar to the collapsible content you see all over this site.

Posts

A feed of your posts with lots of options, such as choosing to display them vertically in a list or having them as tiles or blocks to click through to the post.

 

Paid and Free 3rd Party Add-ons

Sometimes you might find you need something that Beaver Builder doesn't have.

Several add-on packs for Beaver Builder by 3rd party developers exist to fill the gaps.

These are some of the main ones, including their respective free / lite versions.

PowerPack Addon for Beaver Builder | PowerPack Lite for Beaver Builder

Ultimate Addons for Beaver Builder | Ultimate Addons for Beaver Builder – Lite

Addons for Beaver Builder |  Addons for Beaver Builder (free version)

Beaver Builder Default Stock Modules in Detail

This may be the start of a complete rundown of each module, though given the number of other topics I have on my list of things to write about, unless the need arises to complete this section I think it's going to stay this way.

What I recommend is to try the modules yourself.

You can launch a demo by clicking here, then go wild exploring modules.

Text Editor Module

This text was created with the Text Editor Module. It uses the standard WordPress text editor formatting toolbar which you can see at the top of the editor.

It accepts HTML via the Text tab at the top, although it applies some cleaning which may not be suitable for some coding requirements, so best to use the HTML Module for standard HTML.

Photo Module

This module is pretty self-explanatory: it adds a photo with a number of options, for example what to do when you click on the photo.

Accordion Module

This module adds expandable "accordion" sections.

Share this article:
Posted in General Advice, Content Manager, Beginner and tagged ,