How To Create A Landing Page On WordPress Without Any Code

WordPress does a lot of things well. But, at least out of the box, being able to create a conversion-hungry landing page is not one of those things. Let’s change that – in this post, I’ll teach you how to create a landing page on WordPress even if you don’t know how to write a single line of code.

Better yet – I’m going to show you how to do it using a free plugin. That means, in addition to not requiring any code, you also won’t need to reach for your wallet to follow this guide.

By the end, you’ll be able to build something like this:

And here’s the thing:

I have zero design ability. So if I can do it – so can you!

If you’re ready to learn how to build a WordPress landing page, let’s jump in!

Here’s What We’ll Use To Create A Landing Page On WordPress

If you’re familiar with the WordPress ecosystem, you can probably guess where this is going. To create our landing page, we’re going to use something called a page builder. But not just any page builder – I specifically recommend Elementor because:

• It includes the Elementor Canvas template that lets you build your landing page from a blank slate (that is – it makes sure your theme’s header, footer, and sidebars don’t get in the way of your landing page)
• You have access to all the necessary elements to build a landing page.

If you’re interested in more behind why I chose Elementor for this WordPress landing page tutorial, you might be interested in some of these posts:

• My Elementor review
• A comparison between Elementor and Divi
• Another comparison between Elementor and Visual Composer

For this tutorial, I’ll exclusively use the free version of Elementor to keep to my promise.

Article continues after this block

You may also like these related articles

Brought to you by Bibblio's Related Post Plugin

So, to get started, literally all you need is:

• WordPress – duh!
• The free Elementor plugin – you can download it here.

If you want to keep things entirely free, you’ll also need a third-party plugin for one section (more on that later!). Or, you can always purchase Elementor Pro for a simpler approach (there will also be more on this at the end).

This tutorial will work for every single WordPress theme – so don’t worry about any issues on that end.

Ready to get started? Let’s gooooo!

A Quick Introduction To The Elementor Interface

Before I start digging into the tutorial, I want to give you a quick introduction to how the Elementor interface works at a basic level before I dump you into building a landing page.

If you’re already familiar with how Elementor works, click here to jump ahead. Otherwise, here’s your basic primer…

Elementor is a visual page builder, which means that you can desistepgn your pages in the same view that your end users will see it. Essentially, you’re looking at what they’re looking at.

You can enter the Elementor interface by clicking the Edit with Elementor button inside the WordPress editor interface:

The Elementor interface is comprised of two parts:

• Sidebar – this is where you can add “elements” (the building blocks of your landing page) and style them with a ton of detail.
• Visual preview – this is where you can preview how your landing page will look.

To add an element to your page, you just drag it over from the sidebar to the visual preview:

Then, to configure the element, you can use the sidebar and the various tabs:

Each element sits inside a section. You can also configure sections in a similar manner, which is helpful for adding things like backgrounds and adjusting spacing.

And that’s your crash course in the Elementor interface! Now, let’s build something…

Step 0: Figure Out What You Want To Build A Landing Page For

There’s a reason people draw up blueprints for a building before they start construction…

Why that random thought? Because before you can start creating your landing page, it helps to know what you actually want to build and at least a general idea of how it should look.

If you’ve never built a landing page in your life, you might want to spend some time reading up on the basic principles of landing page design. Or, you can always just take inspiration from some of your favorite landing pages. You know what they say about great artists!

For this post, I’m going to build a fictional landing page for the WPLift WordPress Academy. It will include:

• A hero section at the top with a single call to action (CTA)
• A features section that lists 4 key benefits of the academy
• Testimonials from happy participants
• A pricing table so people know how much they’ll pay

In real life, you might want more elements – but for our fictional landing page, this should give us enough “meat” to make the tutorial worthwhile.

Step 1: Create Your Blank Canvas

If you truly want to create a landing page on WordPress, you have to find a way to get your pesky theme out of the way. See, if you just create a normal page, your theme is still going to output its:

• Header
• Footer
• Sidebar (not always – some themes give you a full-width option)

All those things add clutter and get in the way of creating an effective landing page.

Thankfully, Elementor provides a built-in way to get around this called Elementor Canvas. Here’s how to use it:

• Create a new page by going to Pages → Add New
• Look for the Page Attributes box on the right sidebar
• Open the Template drop-down
• Select Elementor Canvas

Then, click the Save Draft button:

And now you’re ready to jump into the Elementor interface and start building.

Step 2: Building The Hero Section

Ok – at this point you should be staring at a blank canvas. Let’s jump in…

Creating The Background For Your Hero Section

To get started with the hero section, click the ADD NEW SECTION button and choose an offset 2-column design:

Now, select your section to configure it:

In the Layout tab:

• Turn Stretch Section ON

Then pop over to the Style tab:

• Set the Background Type to Gradient
• Choose two colors
• Set the Angle to 220 (this changes the angle at which the colors blend together)

Then hop over to the Advanced tab and add 80px top padding

And now you should see a full-width background section with a nice gradient effect.

Adding Content To The Hero Section

Now that you have the background section, it’s time to add some content.

In the left column, you’ll need to drag over 3 elements:

• Heading
• Text Editor
• Button

You’ll need to play around with the text sizes and colors for each element in the Style tab. But once you increase the font size and change the colors, you should see something like this:

The only slightly tricky thing I did here was:

• Add some box shadow and border radius to the button in the Style tab
• Add some left padding to move it over in the Advanced tab

Next up, you’ll need to add some content to the right side of the hero section.

To do that, drag over an Image element and upload a relevant image (I’ll choose the WordPress logo for this example – but don’t use it in real life!).

After adding the image, the landing page hero section is all done – here’s what it looks like:

But let’s kick things up a notch with one of Elementor’s cooler features – a shape divider.

A shape divider is basically a way to divide (or connect) two different sections on your landing page.

To add one, edit the Section again just like you did at the beginning. Head to the Style tab and scroll down to the Shape Divider section. Configure it like so:

• Bottom location
• Type – Pyramids
• Width – 100
• Height – 115

Now, you should have a neat effect like this:

Step 3: Creating The Features Section

Next up, it’s time to list out the various features of the WPLift academy.

Creating Your Background Section

Remember that shape divider you just created above? We’re going to connect it to the background section of our Features list.

To get started, create a new section with 4 columns. Then, edit that section and:

• Enable Stretch Section in the Layout tab
• Give it a solid background that’s the same color as the shape divider in the Style tab

And just like that, you should see something like this:

Easy, right?

Add Content To Feature List Section

To display the features, I think the Icon Box element provides a neat solution.

To get started, drag an icon box into each of the 4 columns in the section. Then, customize the text, colors, and icon as needed using the sidebar interface.

By the end, you should have something like this:

If you’re wondering how I did that, I:

• Changed the View to Stacked in the Content tab
• Changed the font colors in the Style tab.

That’s all there is to it!

Step 4: Showcasing Testimonials For Some Social Proof

Social proof is a great way to convince people to sign up – so let’s showcase some testimonials on our landing page!

Creating The Testimonials Background Section

For the testimonials background section, let’s get a little fancy and use a shape divider to connect with the feature list above.

First, create a new section with two equal columns. Then:

• Turn on the Stretch Section option in Layout
• Use the same gradient background as your hero section in the Style tab
• Add a Shape Divider in the Style tab
• Choose the Pyramids type and the Top location
• Set Width – 100 and Height – 115

It will look a little odd at the beginning:

To fix that, go to the Advanced tab and set the top padding to 110:

Problem fixed! Now, let’s add some testimonials.

Add Testimonials To Each Column

The free version of Elementor includes a Testimonials element, which makes it super easy to add testimonials to your landing page.

All you need to do is drag over a Testimonials element to each column.

In the Content tab, enter:

• The testimonial text
• An image
• The name and job of the testimonial giver.

Then, pop over to the Style tab and change the text colors and sizing as desired.

And bam! You should have testimonials:

Only one thing left to do to bring us home.

Step 5: Adding The Pricing Table At The Bottom Of The Landing page

Unfortunately, the free version of Elementor does not include a pricing table element (you can get this as part of Elementor Pro, though).

So to get around this, here’s what you need to do:

Install a third-party Elementor add-on that includes a pricing table element.

Before that happens, though, you need to create the background section for the pricing table.

Creating The Contact Form Background Section

To create the background section for the contact form, I’m going to take a shortcut and just duplicate the background section for the testimonials:

Then, I’m going to:

• Remove the Shape Divider in the Style tab
• Change the Angle on the gradient background to 330 in the Style tab
• Adjust the Top padding to 20 in the Advanced tab
• Delete the testimonial elements

You could always recreate the section from scratch – but why not save a little time and not duplicate work?

Adding The Pricing Table

At this point, you need to open a new tab and head to your WordPress dashboard. There, install the free Addons for Elementor plugin.

Then, go back to the Elementor interface, save your changes, and refresh the page to load the new elements.

Once you do that, you should see a new LIVEMESH ADDONS section where you can drag over the Livemesh Pricing Table element:

Then, all you need to do is configure the pricing table using the sidebar options. You can add as many pricing options as needed, but I’m going to stick with two for the WPLift Academy.

Putting It All Together

Congrats, friends! If you’ve made it this far, you should have a landing page that looks something like this:

Now, all you need to do is make it the homepage for your WordPress site.

To do that, go to Settings → Reading.

Then, check the box for Your homepage displays…A static page and select the page that you just created with Elementor:

Now, when visitors go to your homepage, they should see the awesome landing page that you just created with Elementor.

Why Elementor Pro Might Be A Better Option If You’re Serious About Creating Landing Pages With WordPress

Everything that I showed you above can be done with the free version of Elementor (and a free Elementor add-on).

But if you’re serious about creating landing pages on WordPress, I think that you should consider upgrading to Elementor Pro for a few reasons. You get a bunch of new:

• Functionality – you get the ability to build forms using Elementor, as well as other helpful features.
• Templates – you might not even need to build a landing page because Elementor Pro includes 100+ pre-built templates.
• Elements – you get pricing tables, price lists, animated headlines, and lots more without the need for third-party add-ons.

Elementor Pro starts at just $49, which is fairly affordable as far as WordPress page builders go.

Get Elementor Pro

Wrapping Things Up

Because of all the little steps, I wasn’t able to take a screenshot for each tweak that I made on the WPLift Academy landing page. Despite that, I hope you were still able to follow along and learned something new about how to create a landing page on WordPress using Elementor.

While there are plenty of other quality page builders (e.g. Divi WordPress builder)  out there, I find Elementor to be the easiest, quickest way to build a landing page using WordPress.

If you have any questions about Elementor, landing pages, or any of the steps I took in the tutorial above, be sure to leave a comment and I’ll do my best to try and help you out.