How To Create a Landing Page in Elementor: Step-by-Step Guide

Step 1: Start a new landing page

Create landing pages in Elementor by going to Templates → Landing Pages, then choose a template or build one from scratch with drag-and-drop tools.

One of the best parts of using Elementor is its built in landing page management. It keeps your campaigns organized and separate from your main site content.

To get started:

1. Go to your WordPress dashboard and navigate to Templates → Landing Pages.
2. Click the Add New Landing Page button.
3. The Elementor editor will open. From here, you can either:
   • Pick a ready made landing page template and customize it, or
   • Close the template library and build your page from scratch with the drag and drop editor.

Step 2: Set up colours, fonts, and colour picker

Set up your landing page by using the blank Elementor Canvas, then apply global fonts and colours to keep your design consistent and efficient.

Before you jump into designing your landing page, take a moment to set up the visual editor for a smoother workflow.

When you create a new landing page in Elementor, it automatically applies the Elementor Canvas layout. This removes the default header, footer, and sidebar, leaving you with a clean, distraction free canvas that’s perfect for focused design.

Next, configure your global settings:

• Global colours:
  • Set Primary to white
  • Set Secondary and Text to black
    • These will apply to new widgets automatically, keeping your design consistent and saving you time.
• Global fonts:
  In this example, we used Montserrat for both primary and secondary headings, but feel free to choose fonts that fit your brand.
• Colour picker:
  Add your brand palette so you can quickly grab the right colours while designing.

With these settings in place, you’ll have a solid foundation to create a clean, cohesive landing page.

Step 3: The landing page's top section

Top section includes a heading, text, and button, styled with a background image blend and overlapping text for a bold visual effect.

We’re adding a background image with blend mode and layering the headings to create a bold, eye catching effect.

Here’s how to do it:

1. Set the background: Start by giving the section a light background colour.
2. Add an overlay: Open the Background Overlay settings and drop in an image on top of the background.
3. Blend the image: In the Blend Mode options, try settings like Multiply or Darken. This merges the image with the background colour for a striking effect.

Section uses a light background, image overlay, and blend mode with overlapping text created by adjusting the heading’s bottom margin.

4. Create the overlapping heading:

• • Go to the Advanced tab on your first heading.
  • Adjust the bottom margin to a negative value.
  • This pulls the heading upward so it overlaps with the text below, giving it that layered look.

Now you’ve got a hero section that grabs attention right away.

Step 4: Header & navigation area

Three-column navigation bar with logo, menu, and button; anchor links enable smooth scrolling to About, Features, and Gallery sections.

Our navigation section is built with a three column layout, using three key widgets: an image, a navigation menu, and a button.

Here’s how to make it easy for visitors to smoothly scroll to different parts of the page with anchor links.

1. Set up the layout: Add a new section and choose a three column structure.
2. Drop in the widgets:
   • In the first column, place an Image widget.
   • In the second column, add the Navigation Menu widget.
   • In the third column, insert a Button widget as a clear call to action.
3. Enable smooth scrolling:
   • Drag an Anchor widget into each section you want visitors to jump to (About, Features, and Gallery).
   • Name each anchor with simple lowercase keywords like about, features, and gallery.
   • In the navigation menu, link each menu item to its anchor using hashtag links (for example: #about, #features, #gallery).

And that’s it! You now have a clean, functional navigation bar that guides visitors straight to the most important parts of your page.

Step 5: About area

One-column layout with icon, heading, and text. The icon is layered behind the heading using negative margin for a creative, stacked visual effect.

In this section, you can keep things simple with a one column layout and three widgets: an icon, a heading, and a text editor.

We’re creating a layered effect where the icon peeks out from behind the heading, making the design more dynamic.

Follow these steps:

1. Set up the layout: Add a new section and choose a single column.
2. Add the widgets:
   • Place an Icon widget at the top.
   • Add a Heading widget below it, using the same font style as the hero section but tweak the shadow slightly for variation.
   • Drop in a Text Editor widget underneath to share supporting content.
3. Create the layered icon effect:
   • Scale the icon so it fits neatly above the heading.
   • Open the Advanced tab for the icon and apply a negative bottom margin.
   • This pulls the icon down behind the heading, giving it a polished, overlapping look.

And with that, you’ve got a clean, eye-catching section that adds visual interest without being overwhelming.

Step 6: Designing a features area

Two-column layout with image on the left and a list of three services on the right. Reuses overlapping icon style for a bold, consistent look.

This section has a bold, eye-catching layout with two main parts: a large image on the left and a list of three services on the right.

We’re reusing the background icon styling from an earlier section to keep the design visually consistent.

Here’s the process:

1. Set up the layout: Add a new section and choose a two column structure.
2. Add the image: In the left column, drop in an Image widget.
3. Build the first service item:
   • In the right column, add an Icon widget.
   • Adjust the margins: set the bottom margin to -50px and the left margin to -15px.
   • This creates the same overlapping effect we used earlier.
4. Add the heading and text: Place a Heading and Text Editor widget next to the icon to describe the service.
5. Duplicate for consistency: Once the first item looks right, duplicate it twice to create your three item service list. Each copy will keep the same styling, making the layout quick and consistent.

Pro Tip: Optimize the section for mobile before duplicating widgets. It saves time and ensures your design looks clean across all screen sizes.

Step 7: Gallery area

Gallery section with a bold title and a stylish masonry grid layout to showcase images with optional descriptions.

Next, let’s build the gallery section. This part includes a bold title and a custom grid made with the Gallery widget.

This is perfect for showcasing products, services, or past work.

Here’s what to do next:

1. Add the title: Drop in a Heading widget and type “Gallery.”
   • Pro Tip: To save time, right click another heading on the page, choose Copy, then use Paste Style on your new heading. This keeps your styling consistent without redoing settings.
2. Insert the gallery: Add the Gallery widget below the heading.
3. Set the layout: Switch the gallery to the Masonry layout for a clean, modern grid.
4. Add your images: Upload the images you want to showcase. You can also add short descriptions for each one to give context.

And that’s it. You now have a polished gallery section that puts your visuals front and center.

Step 8: Contact area & contact form

Contact section with a custom form over a blended background image, designed to match the page and encourage visitors to get in touch.

This is the contact area, one of the most important sections because it encourages visitors to reach out and connect with you.

We’re giving the form a sleek look by using a background blend mode that makes the whole section feel polished.

Here’s how to create the contact area:

1. Add the form: Create a new section and drag in the Form widget.
2. Customize the fields: Adjust the form fields so they match the style of your page.
3. Set up integrations: Connect the form with GoHighLevel (or your preferred email tool) so submissions feed directly into your marketing system.
4. Style the background:
   • Use the Background Overlay feature to place an image over the section’s background.
   • Set the blend mode to Multiply so the image merges with the background colour.
   • This creates a clean, modern finish that blends with the rest of the page.
5. Publish your page: Once the form looks good and works properly, click Publish.

And that’s it. Your landing page now has a fully functional contact form that looks professional and encourages visitors to take action.

Sticky menu with navigation links

Want your navigation menu to stay at the top of the page as visitors scroll? Let’s set up a sticky menu and make it feel smooth and clean.

1. Select the section that contains your navigation.
2. Go to the Advanced tab → Motion Effects → Sticky → choose Top.
3. Pick which devices this should apply to and adjust the Top Offset for spacing.
4. For smooth navigation, drag an Anchor widget into each section and link your menu items to those anchors.

Now your menu stays visible and makes it easier for visitors to move around your page.

Smart navigation hiding

Here’s a handy trick if you want your sticky menu to disappear once visitors scroll past a certain point. This creates a cleaner, more immersive experience.

1. Select the navigation section, open the Advanced tab, and set the Z-Index to 1.
2. Next, choose the section where you want the menu to disappear, like the Gallery section.
   • Under the Style tab, set the background to white.
   • Then go to the Advanced tab and set the Z-Index to 2.
3. Scroll down the page. You’ll see the gallery section slide above the menu, making the navigation fade out of view.

This little detail helps your page feel more polished while keeping the focus on your content.