How to build a landing page with a drag-and-drop content builder 🎥
Let's start with a quick demo. 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.
You can also check the video tutorials at the end of the article.
Just to list some cool details about that little demo page:
- no sidebar,
- full-width hero section,
- multi-column layout,
- columns of different widths,
- custom headings,
- fully responsive structure.
STEP 1: INSTALL THE PLUGIN
Before you start to build a landing page with Elementor, your first step is to actually, well, install the free version of Elementor plugin. (There's also the pro version of Elementor available in case you need to expand your landing page with some additional features. Though, this is not required for the purpose of this guide.)
- You can find the main plugin if you go here: https://wordpress.org/plugins/elementor/
- Here's our other guide on how to install WordPress plugins, step by step: http://docs.themeisle.com/article/199-how-to-install-wordpress-plugins
As for the theme, we’re going to use the free version of our Hestia theme as the demo. You can use whichever theme you prefer, though. Just make sure it’s one that allows a full-width template!
STEP 2: PICK THE RIGHT TEMPLATE FOR YOUR LANDING PAGE
Templates allow you to change the basic “canvas” that you build your landing page with.
For example, most WordPress pages include a sidebar. That’s good for regular pages…but not for a product launch page.
You want your landing page to be the only thing grabbing people’s attention.
There are two ways you can go about this:
- Full-width template – you can build a completely full-width landing page, but your normal WordPress header and footer are still active.
- Blank canvas – you build your page from absolute zero. Not even your WordPress header appears.
Both methods are a viable route to build a landing page with Elementor, but we prefer just using a full-width template so that the navigation structure feels more cohesive across the entire site.
To select your own template, go to Pages → Add New and choose from the drop-down in the Page Attributes box:
If your theme doesn’t offer a full-width template, you can either use the blank Elementor Canvas template or choose a different theme. We have a list of themes that work well with Elementor.
Once you choose your template, click Save Draft to apply the new template (it’s important that you do this before you start editing). Then, hit the big Edit With Elementor button.
You should see the blank canvas from which you’ll build your landing page:
STEP 3: CHOOSE YOUR STARTING POINT
Ok, we’re going to show you how to build a landing page using Elementor from the ground up. But you definitely don’t have to start from a blank canvas.
If you’d rather use one of Elementor’s professionally designed templates, you can access those by clicking the Folder icon in the very bottom left and selecting Templates Library:
Many of the templates require Elementor Pro, but you can still find plenty that are available in the free version:
In addition to benefiting from professional design, these templates can also save you a ton of time.
If you see one that you like, we definitely recommend using it. Otherwise, let’s forge ahead with our blank canvas.
STEP 4: BUILDING YOUR LANDING PAGE STRUCTURE
Before you get started, it helps to know where you’re going. That is, you want to have a basic idea for the structure of your landing page before you start dragging over Elementor elements.
For example, here’s a rough sketch of what a basic landing page looks like:
If you look at the sketch, you’ll see that there are roughly four sections:
- Main headline section
- The “Feature list” section
- About section
- Email opt-in section
Elementor lets you create individual Sections that you can add your elements to. For this example landing page, we’ll use four different sections for each of the elements above.
A QUICK TOUR OF THE ELEMENTOR INTERFACE
Before we start diving into the landing page example, I think it will be helpful to give you a quick tour of the actual 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
“Elements” are basically design blocks. For example, a button is one element. An image is another. And so on. To actually build a landing page with Elementor, the basic process goes like this:
First, you drag over an element from the sidebar:
Then, you customize the element in the same sidebar interface:
Notice that the sidebar now has three different tabs:
- Content – the most important tab – where you customize the basic content and function of the element.
- Style – this is where you can change colors and typography
- 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.
Alright, now that you know the basics, let’s build a product launch page with Elementor!
BUILDING THE HEADLINE SECTION
To create the headline section, first click on Add New Section:
Then, select your column setup. I’ll use this two-column option for this example, but your choice depends on your desired design:
Let’s make the larger right column an image and use text in the left column.
To add an image to the right column, just drag over the Image element:
Then, select your image in the sidebar interface:
To add text to the left column, you can use a combination of the Heading and Text Editor options:
To change the alignment and positioning of your 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:
And that finishes up our basic heading section!
CREATING THE FEATURE LIST SECTION
Next on our list, 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! Easy peasy.
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
Next up, let’s build our “About” section. This one is pretty flexible as far as design goes.
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. Then, we can use Heading and Text Editor elements to write some basic about text:
CREATING THE EMAIL OPT-IN SECTION
Building an email opt-in section is a little tricky with the free version of Elementor because it doesn’t include a dedicated form element. If you purchase the Pro version, you can create all types of forms just by dragging over the Form element.
But to create an opt-in form with the free version of Elementor, we’ll need to get creative with a third-party plugin. I’ll use the free OptinEngine plugin for this guide, but you can use any plugin that lets you insert opt-in forms with a shortcode.
- You can get the plugin here: https://wordpress.org/plugins/optinengine-email-optins-lead-generation/
First, you’ll need to create a form in the OptinEngine interface:
Then, create a new section in Elementor and add the Shortcode element:
Paste the shortcode for your OptinEngine form into the box:
You won’t see your form in Elementor’s interface quite yet. But once you publish your page, you will see the form on the front-end.
And that’s pretty much it for our basic landing page for free!
Building something like this is really simple with Elementor. Once you have your idea, you don't need a designer's help. And again, the process of building a landing page described here works with all of our themes, so the only thing you're restricted by is your own creativity.