These are demos of the modules we'll be using

If you learn how to use just four modules, you'll be able to build a great looking homepage.

Jump To Examples

This is the Photo Module

Photo by: Wang Xi via Unsplash

This is the Text Editor Module

This text is displayed using the basic text editor. The options available with the text editor are the same as a normal WordPress post.

There is an Add Media button and all of the normal formatting tools. Such as paragraphs, headlines, lists and alignment.

Button

This is the Smart Heading module it's a really useful module

One of the most useful options in the smart heading module is the ability to set different size fonts for different size devices.

Button

This is the Info Box module

It's really useful

The info box module has an icon, a title prefix, a title and a description. The info box can also have a call to action button or link. You can even make the whole info box clickable if you wish.

You only need a few basic skills

First get a basic understanding of how the Beaver Builder rows and columns work. Then learn how to use the modules on this page. Finally, add some background colours, background images, margins and padding. Those basic skills will enable you to build surprisingly professional looking web pages in just a few minutes.

Examples of the modules I use Below you can see some of the modules in use

Scroll down the page to see how I use the four modules in the real world.

A typical call out box... I used a Smart Headings module to build this box.

The content can be left, centre or right aligned. You can have a separator with or with out an icon. I added the button by using the WordPress editor's link button and then adding a class of button to the link via the text view.

Button


Below you can see a typical use of the Info Box Module

Placing three info boxes in a row like this is a common site on may websites.

Title Prefix

Info Box Title

This paragraph of text goes below the prefix and title.

Title Prefix

Info Box Title

This paragraph of text goes below the prefix and title.

Title Prefix

Info Box Title

This paragraph of text goes below the prefix and title.

I'm using the Smart Heading Module again I use the smart heading a lot, it's useful.

This time I've used the Smart Heading module with an image background for the whole row.

Button

This is a full width row with four photo modules.

I added the photo border by pasting in a short CSS snippet.

Photo by: Stephen Bergin via Unsplash
Photo by: Brooke Cagle via Unsplash
Photo by: Phnete Lusina via Unsplash
Photo by: Brooke Cagle
Photo By Sage Kirk via Unsplash
Photo By Sage Kirk via Unsplash

Photo Left Text Right

To make this layout I used two very simple modules, the Photo module and the Text Editor module.

The Caption
The photo module can be linked to a web page and can have the caption display beneath the photo or inside the photo on hover.

The Text Editor
The text editor module is very similar to the WordPress editor. You can format the text using headings 1 to 6, add bold and italic text or even use lists, alignment and links. You can also place images inside content using the Add Media button.

Lightbulb Logo

The logo above is an image I made in Photoshop.

If you don't have Photoshop there are some great free image editors such as Gimp.

 

 

Automatically draw in your blog posts...

This section uses the Genesis Featured Posts widget to draw in the featured image, post title and teaser text from your blog posts. Genesis Featured Posts widget has quite a lot of settings giving you lots of flexibility when building your layouts.

Photo by: Venveo via Unsplash

The Modern Office Interior

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique interdum sem, nec dapibus urna dictum eget. Fusce congue dolor felis, quis vulputate risus ullamcorper id. Suspendisse sollicitudin eu augue…

Photo by: Stefan Stefancik via Uunsplash

The Blue Room

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique interdum sem, nec dapibus urna dictum eget. Fusce congue dolor felis, quis vulputate risus ullamcorper id. Suspendisse sollicitudin eu augue…

Photo by: Pacific Office Interiors via Unsplash

Pacific Office Interiors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique interdum sem, nec dapibus urna dictum eget. Fusce congue dolor felis, quis vulputate risus ullamcorper id. Suspendisse sollicitudin eu augue…

Photo by: Kari Shea via Unsplash

A Quiet Corner

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique interdum sem, nec dapibus urna dictum eget. Fusce congue dolor felis, quis vulputate risus ullamcorper id. Suspendisse sollicitudin eu augue…

Photo by: Felix Russell Saw via Unsplash

Chromebook Hipster

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique interdum sem, nec dapibus urna dictum eget. Fusce congue dolor felis, quis vulputate risus ullamcorper id. Suspendisse sollicitudin eu augue…

Photo by: Estee Janssens via Unsplash

Notebook and Chocolates

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique interdum sem, nec dapibus urna dictum eget. Fusce congue dolor felis, quis vulputate risus ullamcorper id. Suspendisse sollicitudin eu augue…


DIY Pricing Tables

You can make your own pricing tables using the free version of Beaver Builder, but it's not easy. The premium version has a pricing tables module built in, which makes building pricing tables much easier.

Bronze Package

  • Domain name
  • Web hosting
  • WordPress installed
  • Premium theme installed
  • Basic plugins installed
Most Popular!

Silver Package

  • Domain name
  • Web hosting
  • WordPress installed
  • Premium theme installed
  • Basic plugins installed

Gold Package

  • Domain name
  • Web hosting
  • WordPress installed
  • Premium theme installed
  • Basic plugins installed

Genesis Framework, A Solid Foundation

This site uses the Genesis Framework and a Genesis child theme. Genesis is a secure and solid foundation for your website. To get your copy click the button below.

More info