Tutorial: How To Create Landing Pages With Elementor Pro

Introduction

A landing page is a webpage designed for marketing or advertising. They’re usually the page a visitor lands on when they click on a search engine. Unlike a home page, which serves as the default page of a website, a landing page purpose is to get a visitor to act. Landing pages usually show what products or services a website offers and tries to convince a visitor to buy or subscribe to the product or service.

In this tutorial we will learn how to create a landing page.

Before we proceed, we will assume that you have already downloaded Elementor Pro. We also assume that you’ve installed Elementor Pro and created a header and footer for your site.

Creating the Landing Page

Create a new WordPress Page

To start creating a landing page, we have to create a new WordPress page and then click the Edit with Elementor button as seen below:

Once in the Elementor interface change the Page Layout to Elementor Full Width.

Adding the Hero Block

We’re first going to add the Hero block. This is the first block that visitors will see when they visit a website. It usually consists of a large image and some headlines which try to hook the user into learning more about the website. To add a hero block, click on the Add Template button.

Once the template window opens choose Hero on the templates.

Then pick one that you need.

For our example, this is the template we will be using:

Once the template is placed on the editing section, it can be edited immediately. For our example, we will first be changing the background:

And changing the Headers:

This is what our header now looks like:

Adding the About Block

After seeing the Hero block, the visitors need to know who the owners of the website are. For this we need to add an About block. Open the template window, then select About in the category: Choose a template that you need:

For our example, this is the template we will be using:

We will edit it a bit:

We will also add a divider using a background image so the section will look like this:

Adding the Services Block

Now we will be adding a services block. This will be a lock which tells the visitors what products or services the owners of the website offers. To add a Service block, click on the Add Template button, select Services from the template category, then choose one that you need:

For our example, this is the template we will be using:

You have to edit the new block as necessary by changing its contents. In our example, we changed the images and headers. Then we change the content to show what our site offers.

This is what the section looks like after our edit:

Adding the ‘Features’ Block

Next, we need to add a Features block. This is where visitors get to know the features that a product or services has. Click Add To Template to open the template window, look for Features in the categories then select a template.

For our example, this is the template we will be using:

Let’s edit it. Let’s change the background image:

And change the styling to create a scrolling parallax effect:

And we will edit the content:

Adding the Call To Action Block

This block is essentially the most important part of the landing page. This is the part of the landing page where we ask the visitor of the site to consider using the product or service that is being offered. Elementor Pro also offers a block template for these sections. Open the template window again, and choose Call To Action in the categories, then select a template.

For our example, we will be using this template:

Let’s first change the image:

After editing the styling and content we get something like this:

Adding the Testimonial Block

You need to tell the visitors of your website of the positive reviews of the product or service being offered. To do this you need to add a testimonial block. This block is used to show the testimonies of users who have used the product or service that the owner of the website provides. To add a testimonial block, you just have to select one: