How to Create a Landing Page in WordPress Using Elementor

In this guide, we'll go over on how to build and design a landing page in WordPress, using Elementor. We will cover the essential steps and guidelines you need to follow to create an effective design.

Let’s start with a quick overview of the landing page we’ll be building today.

We will be creating a page which includes:

  1. Top section — This takes most of our screen space. It’s made of a headline title, some text, and a call to action button – that will lead the user to our form.
  2. Navigation Menu section This area helps the site visitor to quickly navigate to any part of our landing page.
  3. About section — An important sections that tells our visitors more about our business or service.
  4. Features section — A list of features, with a big image on the left.
  5. Gallery section — For this section, we created a unique gallery layout using a combination of widgets, with some images, text, social icons, and a video background.
  6. Form section — Here, we included a contact form which will allow our visitors to easily connect with us.

So that’s it — let’s start!

Initial Setup: Setting Up Colors, Fonts and Color Picker

Before starting the actual design, it is important to set up the editor correctly.

We start by choosing the Elementor Canvas page layout. This gives us a “clean” page, without the header, footer, or the 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.

The Top Section

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.

Navigation Area

 

The navigation area has 3 columns and includes an image widget, nav menu widget and a button.

What’s special here: Navigation links that helps 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.

About Area

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.

Features Area

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. 

  • Tip — if you have a section or any other element you want to duplicate, first make it mobile ready, and only then duplicate it.

Gallery Area

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:

  • To create this gallery-like grid, we will use the columns widget to create an inner section. 
  • We will combine several widgets, and a background video, to create a uniquely styled gallery. 
  • We use the spacer widget, so we could set a background color to the left column. We do the same for the center column. 
  • We also add another Columns Widget section, and this time under style we’ll set a background type of Video. In the new Elementor 2.1, you can set a start and end time for the video. This is great for creating a background loop.

Contact Area

Here is our contact area, which is a vital part of every page that allows visitors to communicate with the site owners.

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.

Sticky Menu and Anchor

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

Final Trick: Hiding the Navigation

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 in the page.

How we did it: We’ll use 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 See the Result...

Let’s view what we’ve created. Looks cool, right?

We’d love to hear from you  so please leave any questions or comments below. And don’t forget to subscribe to our YouTube channel for more videos like this and more!

About the Author

Saar Kedem


18 Responses

  1. THANK YOU, Ben Pines!
    This is very helpful.
    I am able to print the article and refer to it as I work. In the future I can easily find and re-read the information I need.
    I have only one monitor. Switching back and forth between a video and my work is awkward and time wasting. A problem with a video is that I must call for full screen to see the video’s details, every time I change from my work back to the video.
    Thank you for this useful explanation of some of Elementor’s powerful features.

  2. It’s stunning. I love the product, it’s possibilities, the well designed templates and examples and the way you and the team does the content marketing. It’s always a pleasure to discover new features and things that you share.

Leave a Reply