Skip to content

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

 This is a contribution by Puneet Sahalot. 

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

Build a Landing Page With WordPress and Beaver Builder

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:

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

Building a landing page or even building 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.


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 – 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


You may also be interested in:

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:

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.

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.

Yay! 🎉 You made it to the end of the article!
WPShout Editorial

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Priya Ganesh
September 27, 2017 10:41 am

This one is just perfect. Really I wanted to build landing pages myself & now I can do it with the help of Beaver builder. Thanks for the nice article. Bookmarked already!

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...