How to Build a Landing Page With WordPress and Beaver Builder for Free

If you want to build a landing page with WordPress then you have a handful of possibilities. We even listed some of them a while ago (here). But since then, we’ve seen a lot of development in the realm of builder plugins and code-free site constructing in general. So let’s explore some of that today.

What you’re about to read is a hands-on tutorial on how to build a great-looking landing page with Beaver Builder + our own Hestia theme + something called Beaver Builder PowerPack Add-on, all of which are free products (we’re using the “Lite” versions).

The best part, as many would say, is that you don’t need to have any knowledge of coding to carry through with this one.

Here’s Puneet Sahalot explaining the whole process:

 This is a contribution by Puneet Sahalot. 

Build a Landing Page With WordPress and Beaver Builder

 

How to build a landing page with WordPress and Beaver Builder for free

Building a landing page or even a whole website is not that difficult nowadays. Beaver Builder, for instance, is a very powerful tool when it comes to this. This drag-and-drop tool is easy to use, and even a beginner can grab it to create a full-fledged landing page in minutes.

However, while Beaver Builder surely has some excellent features, many of them are limited in the lite version. So, to compensate for that, we will be using an additional plugin – Beaver Builder PowerPack Add-on. This tool increases the powers of Beaver Builder by adding even more modules and page templates.

 
Also, the way we’re going to build a landing page with WordPress in this article is by using the Hestia theme. It’s a well-designed theme, and it offers good customizability all throughout, but particularly in the header and site navigation areas – something that will come in quite handy later on.
hestia
 
By the end of this article:

  • you will have a good understanding of Beaver Builder,
  • you will know how to use it together with the Hestia theme, as well as any other theme you might have,
  • you will be able to create a super attractive landing page,
  • you will learn about new powerful tools like Beaver Builder PowerPack Add-on.

Now, for this tutorial on how to build a landing page with WordPress, I will be using the lite (free) versions of all three products (Hestia, Beaver Builder, and Beaver Builder PowerPack Add-on).

What we’re building exactly

Before starting, let’s first make sure that we are on the same page and clear the understanding what it is that we will be creating with the help of Beaver Builder.

Our main aim here is to make a website that will look as similar as possible to WPBeaverAddons.com – the homepage of Beaver Builder PowerPack Add-on, which I’m part of. The design I believe to be universal, and it has just enough individual elements to educate us on how to use Beaver Builder effectively. Of course, the design we’re building is universal, so you can go ahead and use it for any kind of product or service.

Here’s the final result:

 

finished landing

 
You can easily alter the page if you want, and the best part is that you can do it without touching a single line of code.

The tools you need and where to find them

To make this landing page, we will be using:

 
 
We would probably be able to create a richer landing page with the Pro versions of the three products above. However, I want you to grasp the power that these tools hold before you’re forced into spending any money, so I figured using the free versions would be the best move here.

Understanding Beaver Builder

Before we jump into making the page, let us understand some basics first. Here’s how Beaver Builder organizes on-page content:

 

a) Rows

Rows construct the layout of the page. Each row you can divide into columns and then add different elements(modules) into those columns.

How to add and alter a row:

  • Step 1: Click on the Add Content button and then on the row layout button.
  • Step 2: Drag and drop the row onto the page.
  • Step 3: Once you have done this, click on the little wrench icon in the corner. This will let you edit the settings of the row, such as width, height, responsiveness, background, etc.

b) Modules

Modules are the building blocks of the page itself. They are the elements that you drag and drop onto the page. They can be anything, varying from titles, text, images, sliders, timers, and much more.

How to add and alter a module:

  • Step 1: Click on the Add Content button and then on the module option.
  • Step 2: Drag and drop a module onto the page.
  • Step 3: Once you have done this, the module settings will show up. This will let you edit the settings of a given module. The settings window varies from module to module.
 
This sums up the basics of how to work with Beaver Builder. Simple, right?

Gearing up

 
 
Since we are going to build a landing page with WordPress and Beaver Builder, and also assuming that this is your first time using the latter, let’s learn how to launch Beaver Builder with the full-width template enabled.

To do so, click on add new page from the dashboard first:

add new
 
Now, give your page a name, and under Page Attributes, select Page Builder Full Width as the template. Then, click on the Page Builder button to activate Beaver:

launch Beaver Builder

The reason we are going with Page Builder Full Width as the template is because full-width is usually the best type of layout for a standard landing page. Sidebars tend to distract the user from the main content, and we do not want that happening on our landing page.

Let’s get started!

Here, I will show you how to build a landing page with WordPress in its entirety, step by step, using Beaver Builder together with the PowerPack. If you’d prefer to start with a pre-designed landing page, though, you can get one with the Pro versions of Beaver Builder. This might save you some time.

To get even more page templates, you can also purchase the Beaver Builder PowerPack Add-on Pro. There are more than 250 templates in it. Check out the full list, if you’re interested.

Step 1: Hero section

First of all, we will require a single column row at the top of the page.

 
 
Simply drag and drop the column to get started.

I changed my layout to full width (we will be doing this for all the Rows).

row settings
 
Now for the background; change the background option from none to gradient and select your colors. Click on save to save changes:

primary select

Next, we need a title. For that, add a Smart Heading Module from the PowerPack modules. Go ahead and enter the title and the subtitle in the respective fields. Change the typography as per your wish. When you are done click on save:

smart headings settings

Now, we will need buttons. Let’s get those via the Dual Buttons Module. Go ahead and add them. While at it, change the label on the buttons and then add the desired icon after the text. Do this for both buttons.

Now, go to the Style tab and change the Background color, Hover color, and the Border color of both buttons.

dual button settings

I have set different colors for the buttons so that the first button will attract more attention. You can go to the Typography tab and change the fonts if you want to.

Every great hero section needs an image, for that, add the Picture Module and select an image from the gallery. Adjust the margins so that the bottom of the images sits perfectly on top of the row layout. When you are done, click save:

photo settings

This is the result – our top hero section:

 

hero final

 

Step 2: Features section

For the features section, we will use the Info Box Module. But before we can do that, we need to create the row layout first.

Adding a 3×4 row layout matrix

Select the 3 column row layout and drag and drop it under the hero section. Change the width to full width as we did before, and click save.

Right now, you have a 3×1 matrix. To make it a 3×4 matrix, click on the copy icon (located on the left side of the wrench icon) three times. This will copy the row with the same properties and will create a 3×4 matrix. Like this one:

layout

Now, add the Info Box Module in each column. When the settings show up, give the box a suitable title and description. Also, if you find that you want an icon at the top of the title, you can simply select an icon from the list. Optionally, go to the typography tab and change the color of the title text. When you are done making alterations, click on the save button:

info box settings

Simply repeat these steps for all the other columns and change the details accordingly. This is what the features section will look like once completed:

 

features final

 

Step 3: Reviews section

For the reviews section, add another row by the same method and make this row full width as well.

Add a Picture Module to the row and select the desirable image. Click on the Crop option and select the circle option from the list. Center-align the image and resize it to the thumbnail size. Once completed, click save:

photo settings

Now for the review:

  • add a Text Editor Module below the image,
  • add the review stars image,
  • add the comment,
  • align everything to center.

When you are done, click on the save button:

text settings

Next, add a two column row layout below the text editor.

  • In the first column, add a text editor and some text about/from your customers there.
  • In the second column, add a Photo Module and include logos of your most renowned customers. Resize the columns accordingly:

photo settings

This is the final result – our customer reviews section:

 

reviews final

 

Step 4: Templates section

This is more or less the same as the hero section that we worked on earlier. It includes a Smart Heading, Dual Buttons and an image at the bottom. The row’s background is also set to Gradient – just like the previous one.

So, to make things easier, we can make a copy of the hero section and then just change the text, image and the button properties.

Here’s the final result of that:

 

templates final

 

Step 5: FAQ section

Let’s start by adding another row layout and change the width to full width.

Add a Smart Heading Module at the top of the row and change the title and the subtitle accordingly:

faq headings

For the FAQs, the Accordion Module would have been the best, but since we do not have that in the lite version, we will make do with the Info Box Module.

Drag and drop a two-column layout under the heading and make it full width as well. Copy it multiple times by clicking on the copy button.

Add an info box to the column and enter a question + answer for an individual FAQ item in the description box:

info box settings

Change the alignment to left and you have yourself a perfect FAQ box. Repeat the steps for all the columns.

Here’s the final result:

 

faq final

 

Step 6: Call to action panel

For the final call to action section, start by inserting another two-column row and set it to full width.

In the first column, add a Smart Heading Module and enter your text. Make the necessary changes to the typography, and when you are done click save:

cta headings

Add another Dual Buttons Module and change the button’s title and style as per your wish. When you are done, click on the save button:

cta dual buttons

Next, add a Photo Module to the column on the right. In the settings menu, select the image and change the margin and padding values so that it fits with the row perfectly. Once you are done, click save:

cta photo settings

Here is the result – our call to action block:

 

cta final

 

Final step: Changing the header image and menu in Hestia

At this point, there’s only one task left to do, and that is customizing the default header in Hestia. To do that, follow these steps:

  1. Open the theme Customizer and go to the Site Identity section.
  2. Click on the select logo button. Pick whatever image you think will fit and crop it accordingly if needed.
  3. Go to the Menus section and select the menu that you want to see in the header.

And … we’re done!

Congratulations, you have just built a fully functioning landing page for your WordPress site without touching a single line of code!

Again, our finished landing page looks like this:

finished landing

What about your landing page? Share the design you’ve built in the comments below! I hope you enjoyed this tutorial on how to build a landing page with WordPress, and learned something from it.

Bonus!

If you want to replicate the landing page that we’ve been building here on your site, we have a cool download for you! It’s a  complete XML export of the landing page . All you need to do is import it via Beaver Builder.

About the author: Puneet Sahalot is founder of PowerPack Beaver Addons and CEO of IdeaBox Creations. He enjoys working with WordPress, building interesting WordPress plugins and websites along with his team.

Layout and presentation by Karol K.