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.
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 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.
- 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:
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:
To do so, click on add new page from the dashboard first:
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.
I changed my layout to full width (we will be doing this for all the Rows).
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:
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:
- Open the theme Customizer and go to the Site Identity section.
- Click on the select logo button. Pick whatever image you think will fit and crop it accordingly if needed.
- 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.
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.
Layout and presentation by Karol K.
Latest posts by CodeinWP Editorial (see all)
- Want to Build Progressive Web Apps Based on WordPress and WooCommerce? Here’s How (w/ Code Examples) - November 9, 2017
- Elementor vs Divi Builder vs Beaver Builder: Ultimate Comparison - October 25, 2017
- 120+ Great Cheat Sheets for WordPress, Web Developers and Designers - October 13, 2017