- Last updated on: May 21, 2019
- Elementor, Landing Page, Page builder
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.
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.
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.
3 thoughts on “How To Create A Landing Page On WordPress Without Any Code”
Excellent elementor plugin usage tips, very detailed, we offers lanindg-page creator without code too and 1-click ready templates importer.
Thanks for this detailed write up on WordPress custom landing page creation. I think this will help me to do few A/B testing which I have planned to start from coming week to track my conversion rates and few other metrics against my paid campaigns.
Hello i have service provided on Printer, Computers, Microsoft Office and Business Page you have get the best solutions The MS Office 365 is designed as a way which gives the unique experience to the users. If you run any business then I suggest you to go with MS office 365 because it facilitates too many features for their users like: easily create, edit, organize etc. But in most of the cases users found technical hiccups regarding MS office 365 like: office 365 is not open properly, working very slow, virus infected problem etc. To fix these kinds of errors you have to contact Microsoft office 365 technical support & get the quick assistance Office.com/Setup.
For more info: https://www.apextm.com/support-for-microsoft-office-365.php
Comments are closed.