How to build a landing page with a drag-and-drop content builder [ELEMENTOR]

 Here's an example of the kind of page you can create using any of our themes and a popular drag-and-drop content builder plugin, Elementor.

Jump to:

Step 1: 

Install the Elementor plugin.

In the following example, we’re going to use the Hestia theme. 

Step 2:

Pick the right template for the landing page. Templates allow you to change the basic “canvas” with which you build your landing page.

Choose from the drop-down in the  Page Attributes box the Fullwidth template.

Step 3:

Once the theme is ready, make sure you have activated the Elementor plugin.

Click on the Edit With Elementor button.

You should see this sample page from which you’ll build your landing page:

Step 4:

If you’d rather use one of Elementor’s professionally designed  templates, you can access those by clicking the Folder icon and selecting Templates Library:

Many templates require Elementor Pro, but you can still find plenty available in the free version. Select the desired template and click on Insert:

Step 5:

You should have a basic idea of the structure of your landing page before you start dragging over Elementor elements.

There are roughly four sections:

• Main headline section
• The “Feature list” section
• About section
• Contact Form section

Elementor lets you create individual Sections to which you can add your elements. For this landing page example, we’ll use four different sections for each of the elements above.

A QUICK TOUR OF THE ELEMENTOR INTERFACE

The interface is comprised of two core elements:

• Sidebar – this is where you’ll add new elements and edit existing ones
• Visual preview – this is where you can preview your final design exactly as your end users will see it

To build a landing page with Elementor, the basic process goes like this:

1. Drag over an element from the sidebar:

Then, you customize the element in the same sidebar interface:

• Content – the most important tab – where you customize the basic content and function of the element.

• Style – this is where you can change typography, dimensions, and opacity.

• Advanced – this is where you can add custom margins, padding, and other advanced settings. Custom margins are especially helpful for changing your elements’ positioning.

BUILDING THE HEADLINE SECTION

Step 1:

To create the headline section, click on Add New Section:

Step 2:

Select a column setup. 

Step 3:

To add an image to the right column, just drag over the Image element:

Then, select your image in the sidebar interface (1) and see a live preview (2):

Step 4:

To add text to the left column, in this example, we will use a combination of the Image and Text Editor:

Step 5:

If it fits your goals, you can also add a button by dragging over the Button element:

You also can make changes to it:

And that finishes up our basic heading section!

CREATING THE FEATURE LIST SECTION

You need to create a feature list section that tells people the key features of your product. Thankfully, Elementor includes an element that’s perfect for this.

Step 1:

To use it, let’s first create a three-column section to house your three features:

Step 2:

From there, we can use the Icon Box element under the General Elements section:

Step 3:

Put an icon box in each column. Then, all you need to do is customize the text and icon for each feature:

And that wraps up our feature list! 

CREATING THE “ABOUT” SECTION

Step 1:

If you’re not sure where to start, a good option is an offset two-column design:

Step 2:

Let’s put an image on the left side by dragging over the Image element (left). Then, we can use the Text Editor element (right) to write some basic about text:

CREATING THE CONTACT FORM SECTION

Building a contact form section is not difficult to do with the free version of Elementor. 

We'll use the free Orbit Fox plugin to create a contact form with the free version of Elementor.

Step 1:

First, you’ll need to  add a contact form in the widget area. To do this, you can type "contact form" in the search bar (1), select the element (2), and drag it (3).

Step 2:

Add the options that you need and make any necessary or desired  settings.

The Orbit Fox plugin has 2 other forms in the Free version, such as:

• Registration Form (1) - allows users to register on your site. You can customize it as you wish. (2)

• Newsletter Form (1) -  is integrated with Sendinblue, MailChimp, and MailerLite. You can customize it as you wish (2).

And that’s pretty much it for our basic landing page for free!