How to build a landing page with a drag-and-drop content builder [ELEMENTOR]
Here's an example of the kind of page that you can create using any of our themes and a popular drag-and-drop content builder plugin called Elementor.
| A quick tour of the Elementor Interface
|| Building the headline section
| Creating the feature list section
|| Creating the "About" section
| Creating the contact form section
Install the Elementor plugin.
If you feel the need, check our documentation about how to install a WordPress Plugin.
In the following example, we’re going to use the Hestia theme.
You can use which theme you prefer, just make sure it’s one that allows a full-width template so that the navigation structure feels more cohesive across the entire site.
Pick the right template for the landing page. Templates allow you to change the basic “canvas” that you build your landing page with.
You can find more details about how to change a page template by following this link.
Choose from the drop-down in the Page Attributes box the Fullwidth template.
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:
If you’d rather use one of Elementor’s professionally designed templates, you can access those by clicking the Folder icon and select Templates Library:
Many of the templates require Elementor Pro, but you can still find plenty that are available in the free version. Select the desired template and click on Insert:
If you feel the need, check this documentation about how to import Elementor templates in Hestia.
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 that you can add your elements to. For this example of the landing page, 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 actually build a landing page with Elementor, the basic process goes like this:
- 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, opacity.
- Advanced – this is where you can add custom margins and padding, as well as other advanced settings. Custom margins are especially helpful for changing your elements’ positioning.
BUILDING THE HEADLINE SECTION
To create the headline section click on Add New Section:
Select a column setup.
I’ll use this two-column option for this example, but your choice depends on your desired design:
To add an image to the right column, just drag over the Image element:
It is the same approach for any other element, drag over the element.
Then, select your image in the sidebar interface (1) and see a live preview (2):
You have different settings for every element that you add.
To add text to the left column, in this example, we will use a combination of the Image and Text Editor:
To change the alignment and positioning of the elements, you can always go to the Advanced tab and manually change margins and padding.
If it fits your goals, you can also add a button by dragging over the Button element:
You also have the possibility to 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 absolutely perfect for this.
To use it, let’s first create a three-column section to house your three features:
From there, we can use the Icon Box element under the General Elements section:
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!
The Image Box element is also another good option for this section if you’d like to use your own images instead of icons.
CREATING THE “ABOUT” SECTION
If you’re not sure where to start, a good option is an offset two-column design:
On the left side, let’s put an image 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 a difficult thing to do with the free version of Elementor.
If you purchase the Pro version, you can create all types of forms just by dragging over the Form element.
In order to create a contact form with the free version of Elementor, we’ll use the free Orbit Fox plugin.
First, you’ll need to add a contact form in the widget area. In order to do this, you can type "contact form" in the search bar (1), select the element (2), and drag it (3).
Add the options that you need and make any necessary or desired settings.
The OrbitFox 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).
For more details about the Orbit Fox plugin that provides the forms mentioned in this chapter, check the complete documentation.
And that’s pretty much it for our basic landing page for free!