A landing page is a page on your website which has been created specifically for a certain marketing campaign. Landing pages are made with a clear call to action (CTA) goals in mind, and they often generate better conversion rates than regular blog posts or site pages. They are also a good source for generating leads and creating an email list for marketing purposes, as well as enforcing a presence in social media.
There are several differentiators between landing pages and regular pages — like the homepage, for example, they have fewer or no header and footer menu links, they’re more visual and tend to have clear messaging. The most common way to categorize landing pages is to lead generation pages and click-through pages.
To successfully follow this guide, you will need:
You can either have your landing page live and active under your domain name and hosting, or store it locally on your computer using software like Local by Flywheel.
You will be creating a page which includes:
So that’s it — let’s start!
Before starting the actual landing page design, it is important to set up the visual editor correctly.
We start by choosing the Elementor Canvas page layout. This gives us a “clean” page, without the header, footer, or sidebar. That’s a good option to go with when building a landing page.
We then set the default colors as follows: primary is white, secondary, and text — black. The default colors will be automatically set when we add a new widget, making our job a whole lot easier.
Let’s do the same to fonts. I’ve set up my primary and secondary headlines font to an Adobe Typekit font, but you can set your own font as you wish.
With regards to the color picker, we set up our colors, so we can access them quickly while building the page.
Our top light blue section includes the heading, text-editor, and button widgets.
What’s special here: The background image blend mode and the overlapping headings.
How we did it: We set the background color to blue. Background overlay gives us the option to set another layer on top, this time set an image overlay. Blend mode is a new option in Elementor 2.1. What it does is mix the overlay with the light blue background. We choose Multiply or Darken, and check out how this affects the image.
To get the heading overlap, we go to the first heading’s advanced settings and add a minus margin just to the bottom.
The navigation area has 3 columns and includes an image widget, nav menu widget, and a button.
What’s special here: Navigation links that help the visitor scroll to the relevant point in the page.
How we did it: We will achieve this functionality later using the Anchor widget. The menu has 3 links: about, features and gallery. Each link is connected to the relevant section using a hashtag.
The About area will be a one-column section. It will include the icon, heading, and text editor widget. This section is pretty simple. The heading has the same style as the top heading, we only changed the shadow a bit.
What’s special here: Icon appearing covered over by the heading
How we did it: We reduced the size of the icon and set a bottom minus margin.
This features section includes a big Vespa image on the left and a list of 3 services on the right.
What’s special here: For this features section, we repeat the background icon effect we used in the previous section.
How we did it: To get this effect, we set the margin setting for the icon widget to 40px to the bottom margin, and -20 to the left. We can duplicate this first service 3 times.
The next area we’ll add is the gallery. Here we have a big title, and a grid made up of call-to-action and other widgets.
What’s special here: A gallery grid make up with various widgets
How we did it:
Here is our contact area, which is a vital part of every page that allows visitors to communicate with the site owners. Using Elementor’s visual form builder, we can easily set up a contact form and customize its style to fit the entire page. We can also seamlessly hook it up to an email marketing service like MailChimp using Elementor’s built-in form integrations.
What’s special here: Background blend mode effect
How we did it: We add an image overlay and set it with the blend mode Multiply setting.
We want our menu to be sticky and to be kept on top when we scroll down.
What’s special here: Sticky menu with navigational links
How we did it: We will set this by choosing the edit section, advanced, scrolling effect, sticky top. We can set on which devices we’ll have it sticky, and also the spacing from the top. We also add anchors so the visitors will be able to navigate through the page easily. We do this by dragging an anchor widget in each section.
Now a little trick regarding the navigation; As you can see, the navigation area is visible throughout the site, but what if we want to hide it a little?
What’s special here: Hiding the navigation when the user scrolls past a certain point on the page.
How we did it: We’ll choose the navigation section, advanced, and under z-index give it a 1. Under the gallery section settings, style, give it a white background. And under the advanced tab, z-index set it to 2. This means it should cover the menu section. Let’s see if this works. We’ll scroll down, and check it out — the navigation is Gone.
Let’s view what we’ve created. Looks cool, right?
In this post, you learned to build a landing page from scratch, as we went over the creation process every part of the landing page.
An alternate method is to use Elementor’s landing page templates and customize them for your needs. You can find more than a hundred full-page templates in Elementor’s free and Pro template library. Browse through the list and pick the ones that suit you best.
Another option is to use Elementor Blocks to quickly construct the various elements of your landing page. The Blocks categories include hero, call to action, FAQ, services, and other sections you are likely to need.
A common question we get is which theme works best with Elementor. The answer, however, is practically any theme.
Since you are using the Canvas blank template, the entire landing page is built-in Elementor. Choosing a simple theme is a good way to go to ensure the landing page loads quickly.
Here are some great free themes you can use:
These themes also come with Elementor templates that you can use for your landing pages.
This tutorial focused on creating a static landing page, but you can just as easily create a landing page template and using Elementor’s Dynamic Content feature attribute that template to multiple landing pages. This way, you can make changes to a single template and have it affect across your landing pages.