landingpage 1 e1620822106858 - How To Create Landing Pages With Elementor Pro

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:

create a page

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

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

Click add Template button

Once the template window opens choose Hero on the templates.

at the library choose "Hero"

Then pick one that you need.

pick one you need

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

our template

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

change background

And changing the Headers:

change header
Change title

This is what our header now looks like:

look at your header

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:

choose a template for "About" Block

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

our template

We will edit it a bit:

editing title and picture

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

divider

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:

select a template for service blcok

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

our service template

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.

editing the new block

This is what the section looks like after our edit:

look at the service block

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.

choose a features block

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

our "features" template

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

change background image

And change the styling to create a scrolling parallax effect:

change styling

And we will edit the content:

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.

choose a call to action template

For our example, we will be using this template:

our call to action template

Let’s first change the image:

change image

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

look at the page

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:

adding testimonial block

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

our testimonial templates

Since the template is already sufficient, we will just be editing it a bit:

editing

Adding the Contact Block

The last section we need to ass is a contact form. This section is needed because the visitors viewing the landing page:

choose a contact block

For our example, we will be using this template:

our contact block

After some edits and additions, this is what the Contact Us section looks like:

our final contact form

Final Product

Putting it all together we get this page:

Final Page

Conclusion

Now you know how to create a Landing Page! Thank You for reading our article.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *