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

If you want to build your own website, a landing page is a good place to start. And with WordPress, 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).

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.

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:

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:

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:

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:

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).

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

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:

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.

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:

This is the result – our top hero section:

You may also be interested in:

• How to Launch and Maintain a WordPress Site for Only $10.44 a Year (Domain + Hosting Included)
• WordPress Profile Picture Without Gravatar (And How to Add It to Posts)
• 15 Best Programming Fonts for Coding and Development (Free!)

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:

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:

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:

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:

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:

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:

This is the final result – our customer reviews section:

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:

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:

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:

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:

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:

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:

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:

Here is the result – our call to action block:

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:

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.

Layout and presentation by Karol K.