Scroll to top
USA
651 N Broad St, Suite 206,
MiddleTown, New Castle,
Delaware - 19709
Canada
635 Ashprior Avenue,
Mississauga, Ontario,
Canada - L5R3N6
India
34, Shiwanshu Bunglows
Vadodara, Gujarat - 390007

How to make Landing Pages in WordPress? A Step-by-Step Guide

84 / 100

Do you want to grow your email list and generate more subscribers for your WordPress site? Then, building landing pages in WordPress would be a great way to promote your lead magnets. The more landing pages you have the greater chance you’ll have at generating more leads. According to statistics, 48% of marketers create a new landing page for every new marketing campaign.

how to make landing pages in WordPress

In this article, we’ll show you how to build landing pages to grow your email list.

What do you mean by a Landing Page?

A landing page is a purpose-built webpage where you want people to land on your website, view your content, and take an action; like buying a product, subscribing to your site, playing a video, etc.

It is designed with clear call to action (CTA) goals in mind, to increase sales and collect more leads. It can also be referred to as a powerful marketing process that serves both as a traffic-generating tool as well as a conversion machine.

They are also a good source of creating an email list for marketing purposes, as well as enforcing a presence in social media. 

The goal of a landing page is to convert more of your website traffic into customers and increase your revenue. And for that, you need to make it look attractive and engaging.

Above all, you’ll have to properly design and organize the various call-to-action elements like the buy button, signup forms, play media button, etc. appealingly.

What does an Ideal Landing Page contain?

The Landing Page of your WordPress site must include the following:

  • No outbound links: You have to get rid of all the links and navigation bars on your page that would allow visitors to leave your landing page.
  • An effective CTA: You have to make your call-to-action (CTA) buttons more compelling by using actionable words like “Download Now” or “Get It Free” or “Sign Me Up”.
  • Including the CTA above the fold: You can add your CTA section in both the top-half of your landing page as well as at the end of the page, which makes it more compelling to the site visitors.
  • Embedding a video: Embedding a video in your landing pages encourages your visitors to stay longer on your website.
  • Optimization for color psychology: The colors you use on your landing page and your CTA buttons also have a psychological effect on people. So, you need to choose the colors wisely to achieve better results.

In this article, I will show you how to make a perfect landing page using 2 methods. You can use any one of the methods as per your choice. The first method is using the Beaver Builder plugin and the second method is using the Elementor plugin.

Creating Landing Pages in WordPress using Beaver Builder plugin

The easiest way of creating a landing page is by using any of the WordPress landing page plugins. Even if you are not a developer or know less about coding, still you can create a high-converting landing page in WordPress and boost your website traffic and sales.

beaver builder page builder in WOrdPress

Here, we will use the Beaver Builder plugin, which can be referred to as one of the best WordPress landing page plugins.

Step 1: Installation of the plugin on your site

First, you have to visit the Beaver Builder website and purchase the plugin. After that, you need to download the plugin file to your computer and copy the plugin license key to your clipboard.

Then, you’ll have to log into your WordPress dashboard, install the plugin and activate it.

installing beaver builder

Visit Settings >> Page Builder from your admin panel. There, you need to enter the license keys you’ve copied from earlier via your account on Beaver Builder’s website, in the expected field.

After that, you’ll see the plugin Updates & Support Subscription status as Active which means you’ve completed the basic plugin configuration process.

Now, you need to refresh your WordPress dashboard, and you would be able to see a new menu called Beaver Builder added to your dashboard menu. This indicates that you are ready to create your landing page

opening beaver builder from WordPress dashboard

Step 2: Creation of landing page

Then, go to Pages >> Add New from your WordPress dashboard to create a page. Now, you can see a regular WordPress page template as depicted by your theme but it consists of an extra Beaver Builder tab above the post editor.

You need to name the page first, then click the Beaver Builder tab to launch the builder interface. However, in some themes, you’ll need to change the page templates, which you can do from the Page Attributes section on the right-hand side before clicking the tab.

Then, your page will open in Beaver Builder’s page builder interface.

Creating landing page in Beaver builder

The page builder elements would be visible on the right side of the page with blank space on the left. You can see Modules, Rows, and Templates on the right-hand page builder panel. Now it’s your time to drag a row layout or module to the left side and start editing.

You can also choose any pre-built template from the Templates tab. They provide a professional landing page design that you can use with minimal customization.

using beaver builder templates

You can choose any professional-looking template by clicking on it and the Beaver Builder will load the template in the preview window on the left. Now you can customize the template with your own content.

editing templates in WordPress

Step 3: Customization of landing page template

This step of customizing the template is very simple as you can easily adjust each and every element of the template just by pointing and clicking on it.

adding content to beaver builder landing page

You can alter the text, its style, color, alignment, layout, background color, etc. to fit your product or overall brand. You can also use images within the template with your product-related standard colors. Also, you can adjust the height and width of the rows and columns.

You can adjust the content blocks, rows, or modules that are useful for your landing page by deleting or duplicating them. You can delete them by simply clicking the cross icon on mouse hover and can duplicate a content block, row, or module simply by clicking the duplicate icon on mouse hover.

You can also add new rows to your landing page template. For that, you need to click the Add icon next to the Done button on the top right-hand side.

adding a new article in beaver builder

Then, switch to the Rows tab and simply drag the row that you want to use to the page editor screen on the left.

selecting row segmentation

After that, switch to the Modules tab and drag the modules to the rows you created earlier.

Then, you can add content to the modules and customize as per the requirement of your brand.

Once you’re satisfied with everything, click the Done button on the top of the right side.

saving beaver builder landing page

And finally, you can publish the page or save it as a draft as well.

After publishing, you can visit your site to see your landing page in action. You are free to modify your landing page anytime.

So, this was an effortless 3-step process to create your own landing page using the Beaver Builder plugin.

Creating Landing Pages in WordPress using Elementor plugin

The initial setup before you start creating your own landing page using the Elementor plugin includes a WordPress installation and the Elementor/Elementor Pro installation. Your landing page can be live and active under your domain name and hosting or stored locally on your computer depending upon your choice.

Step 1: Installation of the plugin on your site

Visit your WordPress dashboard and head over to Plugins >>Add New page. Now, search for the Elementor plugin.

installing elementor in wordpress

Then, simply click Install to begin the installation process. Once the installation is complete, click Activate to enable the plugin.

Step 2: Creating a new page

After the installation of Elementor is over, you’ll get to see two options to edit your pages in WordPress – the default WordPress editor or Elementor. To edit a page with Elementor, click on the big blue button.

creating a new page with elementor

Before clicking the Edit with Elementor button, make sure to select Elementor Canvas as the default template for the page. This will remove all the navigation menus and links from your page and give you a blank page to design a landing page of your choice.

Step 3: Editing with Elementor

Click on the Edit with Elementor button and start designing your landing page.

There are two ways you can make a landing page with Elementor.

You can either use a pre-built template or start building it from the scratch. There are a few great free landing page templates you can use to instantly set up a landing page and customize it as per your needs.

elementor page library

The first method is the easiest. All you have to do is choose a template and customize it to your preference. So, instead, I will show you how to build a landing page from scratch.

Step 4: Customization of the Page Design

You can build a page with up to 6 columns, though a 2-column design is an ideal structure for a simple landing page. You have full freedom in selecting the structure of your landing page.

customize page layout with elementor

You have to select the section and edit the Style settings to add a background – a color, an image, a gradient, or even a video can be set as the background of your landing page.

You can switch over to the Advanced section to set the padding and margins to make your design fit the page.

advanced settings in elementor

Then you can enter the description for the landing page on one column by dragging and dropping the Heading and Text Editor elements onto the design. You can also add images and videos as per your requirement.

Step 5: Creating the Email Subscription Form

In the next step, you need to create an email option form to embed on the landing page.

mailchimp add form functionality

To do this, first, log in to your email marketing service and select your email list to create an embedded Signup form.

Now, customize the template to your preference and then copy its code.

embed mailchimp in WordPress

The Pro version of Elementor can help you with its built-in email subscription form builder to create a unique subscription form and connect it to your email marketing service.

Step 6: Embedding the Subscription Form

In Elementor, drag and drop the HTML element into the empty column in the landing page design, and then paste the code you’ve just copied from your email marketing service.

You can further customize the signup form buttons and layout to match your landing page design, using HTML and CSS.

embedding form using elementor

Step 7: Publishing your Landing Page

When you’re done with all the customization of the design, hit the Publish button to publish your landing page.

updating page with elementor

You can also save it as a template to use later to create more landing pages as well.

Though it’s good and more authoritative to make landing pages from scratch, it is always a better and less time-consuming idea to use the built-in templates of the landing pages. You need to do the regular maintenance of your landing pages which will surely increase traffic and will give more exposure to lead magnets.

You can use other plugins as well but these mentioned plugins would surely be the best. You can read other articles for your WordPress site here and can visit the official plugins’ website here:

Elementor: #1 Free WordPress Website Builder | Elementor.com

WordPress Page Builder Plugin | Beaver Builder (wpbeaverbuilder.com)

Author avatar
Tim Michaels
I am into WordPress and web development for the last 10 years. I use my experience to help people just starting with WordPress. Follow my blog at WP Uber for everything related to WordPress.
We use cookies to give you the best experience.
Do NOT follow this link or you will be banned from the site!