What do your favorite online magazine, fitness app, and cloud-based software have in common? They all use landing pages. A landing page can be an exceptional tool for getting useful information from potential customers, increasing sales, or simply driving traffic to your site.
The only real caveat is that your landing page has to be good. A poorly designed or broken landing page can make customers dismiss your business before ever giving it a chance.
That’s why – after building more than a few myself – I’m here to show you how to create an outstanding landing page in WordPress. I cover everything from general design tips to the nitty-gritty, so you can get yours up-and-running in no time.
What even is a landing page?
If you’re here, you probably already have some idea what a landing page is. Still, it’s worth clarifying, just so we’re on the same page.
First off, a landing page is not a homepage. A homepage is where visitors arrive when they go to your website – it’s your site’s “home”. Homepages have many purposes: to direct visitors to other pages of your site, to give them a familiar place to land, to provide a central hub to market your brand, and more.
A landing page is a single page designed for a very specific purpose: convincing visitors to take some action. This could be to access more information, buy a product or service, or visit your main site. It’s called a landing page because it’s where you want your visitors to “land” after clicking on a link or advertisement.
What’s an effective landing page?
Let’s dive a little deeper into what makes a landing page effective. If your landing page is going to convert visitors, it should have at least these three elements:
- A header. This will draw your visitors’ attention. It should be short and to the point.
- A subheader. This is a bit of text where you explain to your visitors how you can help them. Though you have a little more space here to elaborate on your header, your subheader should also be short and sweet.
- A CTA. That’s shorthand for “call to action”. It’s the button you want your visitors to press. Simple as that.
Technically, that’s all you need to create a landing page. But you’d end up with something that looks like this:
If you want to create an effective landing page, there are a few more things to consider:
- There should be little-to-no navigation. An effective landing page should do everything to draw attention to your CTA. Other navigation elements could distract from your CTA, ultimately losing you leads. Though there are effective landing pages that include navigation elements (DoorDash comes to mind), try to keep these to a minimum.
- Include interesting visuals. You don’t want to fill your page with text, but you need to make it attractive somehow. High-quality images are a great way to increase interest in your service. Bonus points if you can include video.
- Include social proof. Have you received any positive feedback? Don’t be shy about sharing it on your landing page. Human beings are social creatures. If your visitors see that others recommend what you’re offering, they’re more likely to be interested.
- Make it interactive (if appropriate). Getting visitors to interact with your site can be an effective way to increase their interest. Quizzes, moving bars, and mini-games are all great for encouraging visitors to click. Make sure any interactive elements actually relate to what you’re offering, though. Otherwise, you risk annoying your visitors.
- Know your audience. What are you offering? Is it elegant? Energetic? Trendy? A gaming magazine might benefit from an in-browser mini-game. A candle store could have a little questionnaire that helps visitors find the ideal candle. Everything from fonts to background colors should appeal to your target audience.
If you want to go into further detail, you can read our extensive guide to building a fantastic landing page. Now it’s time to get to work.
Method 1 – Use a WP Page Builder
Before we begin, we need to be clear on the difference between WordPress.com and WordPress.org.
WordPress.org is an open-source platform for creating and managing websites. You might have heard that about a third of all websites run on WordPress. That’s exactly right.
To use WordPress.org, you need a web hosting provider as well as a domain name. But don’t worry – this sounds more complicated than it is.
WordPress.com is the version of WordPress that comes with its own hosting. Compared to WordPress.org, it’s a lot more like a traditional website builder. This means it’s easier to manage, but it’s also more limited.
Let’s start with creating a landing page with WordPress.org. If you’re only interested in using WordPress.com, you can skip ahead.
Step #1: Get Yourself Some Hosting
Before you start, you’ll need a hosting provider where you can install WordPress and a page builder. If you’re already using one for your main site or online store, stick to it; there’s no reason to complicate things. If you don’t already have a hosting provider, I suggest you read our review of the best hosting providers for 2022.
The process of installing WordPress will vary depending on your provider, but it shouldn’t be too complicated with any. I went with Hostinger for my page. Hostinger has specialized plans for WordPress hosting, so all I had to do was create an account and follow the instructions on its auto-installer.
Save up to 75 % on your Hostinger plan!
Limited-time offer - Don't miss it!
Step #2: Install Your Page Builder
Now you have the right hosting provider, it’s time to install your builder. All you have to do is go to your WordPress dashboard, navigate to Plugins, and click “Add New”.
If you’ve already downloaded a .zip file for your builder, you just have to upload it. Otherwise, you can search for your preferred builder on the “search plugins” bar and click on the “Install Now” button.
I used Elementor for my landing page, but the steps will be very similar regardless of your page builder. If you don’t know which builder to use, you can take a look at some of my favorites below.
Whichever builder you choose, play with it a bit before you start. Watch YouTube tutorials, create mock pages, etc. You want to get comfortable with your builder’s interface and functions before you dive in.
Step #3: Sketch Out Your Page
If you don’t have a clear picture of what you want, you could easily end up with a messy landing page and no idea how to fix it. That’s why it’s important to have a plan.
Start by making a mock-up of your landing page. There are no rules for this part. You can design it in Photoshop, MS Paint, or draw it on a napkin. The only thing that matters is that it’s clear enough to work with.
If you don’t know where to start, you can always check out examples of great landing pages in your niche. Think of your brand, style, and who you’re appealing to.
For this example, I decided to design a landing page for a subscription-based bookstore that sends personalized suggestions every month. Besides the basics, I chose to include a quiz that recommends new books to the user.
Step #4: Choose the Perfect Template
So, you’ve picked a hosting provider, you’ve installed WordPress, and you’ve got your page builder up and running. You’re ready to get on with the fun part, right?
Almost. You still have to pick a template. Sure, you could just start with a blank page and begin building from there, but the amount of minute design decisions you’ll have to make – things like fonts, colors, animations, and background designs – might surprise you. The more an existing template matches your ideal design, the less work you’ll have to do to bring your vision to life.
WordPress.org has a massive gallery of templates to choose from. Your page builder might also come with a variety of options built in. If you get overwhelmed, our list of the best landing page templates in 2022 can help.
I started with the Online Life Coach theme from Elementor. Even though I adapted it for a different purpose (ask anyone, I’m in no position to tell you how to live your life), its elegant fonts and neatly-arranged elements gave me a great starting point.
Step #5: Customize Your Page
The exact process of customizing a landing page will be different for everyone. Personally, I like to start with the general aspects and work my way into the specifics.
To edit with Elementor, simply go to your WordPress dashboard, create a new page, and choose “edit with Elementor.” You’ll see a menu with various widget options. Click on the hamburger menu on the top left (that’s the three horizontal lines) and then “Site Settings.” Here, you can customize the more general aspects of your page, like global fonts, background color, and more.
When you’re done, click on the little squares at the top right of the menu. You’ll see a series of widgets you can add to your site. Basic widgets include things like text, image, and videos. I decided to upgrade my plan to Elementor Pro to unlock more interesting widgets like animated headlines and media carousels.
Either way, you can simply drag and drop any widget to where you want it to appear on your page. You can then click on your widget to bring up the widget menu. Depending on the widget, you can customize things like color, borders, and even animations.
For my own page, I started by changing background colors and removing unnecessary elements from my template. I then edited my heading, subheading, and created a space where I could add a quiz.
I wanted my landing page to be as simple as possible, so I deleted most of the scrollable items on the page. I only kept the pre-made elements for social proof and a small “About Us” section, which I modified to match the style I wanted.
The quiz took a bit longer. Luckily, Elementor comes with a built-in form widget, so it was still pretty straightforward. If you’re using another builder, you’ll find plenty of form plugins you can install to your page.
The Best Page Builders for Landing Pages
There are a lot (and I mean a lot) of page builders for WordPress. Even a list of the great ones would take up too much space. What I can do is give you a quick look at my absolute favorites.
Elementor is one of the most popular page builders for WordPress, and for good reason. Elementor offers powerful, drag-and-drop editing for free. There is a bit of a learning curve to mastering its more interesting features, but Elementor is extremely powerful once you get used to it. Some of its best features for landing pages are:
- Tons of third-party themes. There are thousands of Elementor-compatible themes on the web. This includes plenty of great landing page themes to suit every budget.
- Scalable functionality. Elementor’s free plan is nothing to scoff at. Still, if you’re looking for even more functionality, the Pro and Expert plans are reasonably priced and offer fantastic features like the theme builder and an advanced popup builder.
- Custom CSS editing. From the Pro plan forward, you can edit just about every part of your website with custom code. You’ll need a bit of technical know-how, but the possibilities are endless.
Divi by Elegant Themes is a flexible option for building all sorts of sites. The module editor is incredibly easy to use, despite the huge variety of customization options it gives you. And if you prefer backend editing, Divi also supports this.
Some of Divi’s best features are:
- The module editor. If you want to edit an element, all you have to do is click on it. The various customization options will then appear directly over the element.
- Fantastic layout packs. Divi offers 250+ template packs (called layout packs) to help you build any kind of page.
- Incredible ease of use. There are very few page builders out there as easy to use as Divi.
SeedProd is the only page builder on this list that’s specifically designed for landing pages. It has almost no learning curve, and the results are stunning. It’s particularly great if you’re looking for a more landing-page-focused version of Elementor, as both builders’ interfaces are pretty similar.
SeedProd offers great features like:
- Lightning-fast editing. Thanks to the simple layout and responsive widgets, it only takes a couple of minutes to create an awesome landing page with SeedProd.
- High-quality templates. SeedProd offers up to 180+ high-quality and customizable templates, depending on your plan.
- Subscriber management. SeedProd’s subscriber management tools lets you track subscriber growth and gives you visual data on your subscription numbers.
Beaver Builder is a simple, module-based page builder. Though its focus is on building pages for agency websites, its user-friendly interface and wide template variety make it enjoyable for anyone to use.
Beaver Builder offers:
- Incredibly responsive editing. When you make changes to your website, there’s virtually no lag in the editor.
- Easy button editing. Beaver Builder offers every tool you could need to fine-tune a clickable button (an especially important element on most landing pages).
- Massive support center. If you’re ever lost, Beaver Builder offers hundreds of video tutorials to help you get back on track.
Method 2 – Use the WordPress Gutenberg Editor
If you’re using WordPress.com, you’ll need to be on the Pro plan to install a page builder (or any plugins for that matter). On top of that, most page builders hide their best features behind a paywall, so costs can quickly rack up.
The good news is that every WordPress plan comes with the Gutenberg editor, a simple block editor for creating websites easily. Though it’s more limited than many other builders, you can still use it to craft an effective landing page, and for little-to-no money. Here’s how:
Step #1: Create a WordPress.com Account
To begin, all you need to do is go to WordPress.com and click “get started.” You’ll have to input your name, email, and create a password.
Save up to 43 % on your WordPress plan!
Limited-time offer - Don't miss it!
Choose a domain and then a plan. I suggest starting with the free options for both – you can always upgrade later. Finally, you’ll have to choose a theme. Select the blank one for now (we’ll get back to this later).
Step #2: Plan Out Your Landing Page
This is pretty much the same advice as before, except now you must consider the limitations of the Gutenberg editor when planning your design. Don’t plan a page with complex animations and dynamic backgrounds and… I don’t know, particle effects? With Gutenberg, you’ll have to make do with the basics.
Don’t let this put you off, though. A good landing page doesn’t need a bunch of fancy elements. All you need is a strong CTA and a distinctive identity.
Step #3: Choose your theme
Now you have a roadmap for your page, it’s time to choose a theme. Go to your WordPress.com dashboard, click Appearance, and then Themes.
Pick the one that’s best suited to the design you have in mind. Themes in WordPress.com are designed for different purposes. Instead of focusing on colors and text styles (you can always change these later), find a theme that’s optimized for your ideal structure.
Step #4: Get To Know Gutenberg
When you edit your site for the first time, WordPress.com will offer you a quick tour of the Gutenberg editor. This is a great chance to brush up on the fundamentals. I also heavily recommend playing around for a bit before you start creating your page. Try adding and removing blocks, just to see what they do.
To customize your page, go to your dashboard, Appearance, and then Editor. There, you can start adding and modifying different blocks to suit your needs. To change more general aspects of your site’s appearance such as background color, header design, and fonts, click on the “styles” button in the upper right corner. What you can and can’t customize will depend on your chosen theme.
Step #5: Edit Your Page
WordPress.com separates blocks into different categories, like media, text, and design. The design blocks are especially useful as they let you edit your site’s basic layout. Separating your site into columns, groups, and custom spaces can help you create a cohesive design.
If you need to add an element, simply head to the top left corner and click on the plus sign. WordPress.com offers plenty of basic blocks, but your best tools will be those for adding and customizing headings, images, and paragraphs.
If you need to customize a block, click on the “Options” button (shown as three dots) that appears on its top right and click “Show more settings”. Depending on the block, this will give you different customization options which you can use to modify its design.
You can also use what WordPress.com calls “Patterns.” Patterns are pre-built collections of blocks you can use to add common features to your page. There are patterns for inserting CTAs, contact blocks, “about us” sections, and more.
Guttenberg isn’t the most responsive page builder, so make sure to preview your site every so often. Once you’re happy with your page, click “save.” Then, head over to settings, general, and click on “Launch Site.” That’s it! Your landing page is now live for the world to see.
Method 3 (Bonus) – Ditch WordPress for an Easier Solution
Hey, quick question. Why do you want to use WordPress, exactly? Don’t get me wrong, WordPress is a fantastic platform with tons to offer, but it’s not the only way to create a landing page.
There are plenty of website builders out there that will let you make an effective landing page in half the time. And while it’s true that they can’t match WordPress in terms of scalability, for a landing page, they don’t have to.
So, as a bonus, here’s a quick guide to creating a landing page using a website builder.
Step #1: Choose a Website Builder
The best website builder for you will depend on what you need in terms of features, ease of use, and design flexibility.
For landing pages, my top recommendations are:
- Wix. Wix provides incredible design flexibility thanks to its free drag-and-drop editor. It’s really user-friendly, so it takes only a couple of minutes to get used to. It also includes plenty of cool-looking animated features and pre-made elements you can use to spice up your page.
- SITE123. SITE123 is one of the easiest website builders out there. With SITE123, anyone can create a landing page in a matter of minutes, regardless of experience. It’s also mobile-responsive, so you can be sure that your page will look as good on mobile as it does on desktop.
- Squarespace. Squarespace is a fantastic option for pages that emphasize visuals, draw attention to specific elements, and get interactions. I could’ve just said landing pages. I recommend Squarespace if you want an elegant yet dynamic design that does most of the explaining for you.
I used Wix to create my own landing page, but the steps are similar with every builder.
Step #2: Plan Your Design and Choose a Template
Yes, this one again. I won’t go into too much detail because the steps are the same as before. Plan the structure of your page beforehand and then choose a template that’s close to it. Wix has a library of over 800 high-quality templatIes (35 are specifically made for landing pages), so it shouldn’t be too difficult to find the perfect foundation for your design.
Website builders offer a lot more design freedom than the Gutenberg editor. Some even offer dedicated landing page builders. They’re also way more user-friendly. Wix’s drag-and-drop editor, for instance, makes it easy to change the look and functionality of your template as much as you like.
Step #3: Get To Editing
Start by changing your theme’s colors and typography to the style that suits you best. To do this, simply head to the menu on the left and click on “site design.” Here, you can start deleting elements you don’t need and adding new ones.
To browse elements, all you have to do is click on the plus sign on the upper left. Wix offers over 20 element categories, ranging from text and decorative elements to store features and a blogging tool. To add an element, simply click on it and drop it wherever you want on the page.
I suggest you take full advantage of the large variety of dynamic effects Wix offers, such as animations and transitions. They are a great way to add visual interest to your page and keep visitors engaged.
To edit an element’s properties, all you have to do is click on it. Depending on the element, you’ll see buttons for different menus pop up. On these menus, you can do things like edit content, add custom animations, and more.
Remember to preview the different versions of your site to make sure it works well on both mobile and desktop. With a little tweaking, you’ll have an awesome landing page in no time.
Step #4: Publish Your Page
To publish your page, you’ll need to register a domain for it, even if it’s just the free version provided by Wix. Don’t worry, though, most site builders come with an integrated domain register that makes it easy to get your site online.
Wix is now only $4.50 per month!
Sign up for an annual plan and enjoy the savings.
The Magic of a Great Landing Page
Landing pages are like magic. They take a lot less effort to make than a regular site, yet they can increase your success (however you define that) enormously. Now, you can start creating your landing page and increasing your leads.
A page builder is a great way to create a landing page in WordPress. Page builders give you incredible creative freedom, even if they can come with a bit of a learning curve. Of the builders available, I recommend Elementor. Its drag-and-drop functions make it a powerful yet easy-to-use option.
If you don’t want to mess with hosting, you can always use WordPress.com. The Gutenberg editor can help you create cheap and effective landing pages, but keep in mind that it doesn’t have as many customization features as most dedicated page builders.
Alternatively, you could use a website builder. Site builders give you advanced customization options and are easy to use. Of all the options available, Wix is my favorite. It offers more design freedom than almost any other builder while being very intuitive, even if you have no experience.
What is a landing page?A landing page is a specialized web page designed to get visitors to take some sort of action. This could be buying a product or service, subscribing to a newsletter, clicking through to another site, or something else. To increase the chance that visitors will take the desired action, a landing page usually has little-to-no navigation, clear and concise copy, and a prominent call to action. If you want to build a landing page, you should know the fundamentals of website design. For more info, check out our comprehensive guide for creating a site in 2022.How do you create a landing page in WordPress?It depends on which version of WordPress you’re using. If you’re using WordPress.org, the best method is to install a page builder and start modifying a template. You’ll need to arrange your own hosting provider to do this. If you don’t know which to choose, you can always check out our guide to the best hosting providers for WordPress in 2022. If you’re using WordPress.com, then all you have to do is create an account, choose a theme, and edit from there.What is the best page builder for WordPress? This will vary from person to person. Personally, I like Divi and Elementor, as they offer real-time editing and plenty of customization options. For example, Elementor offers intuitive drag-and-drop editing and lots of interesting Widgets you can use to draw your visitors’ attention. Divi, on the other hand, gives you incredible tools for customizing your page, and it lets you manage all important aspects of your site from a single dashboard. That said, it does come with a steeper learning curve. Can you build a landing page for free? You can create a landing page for free using WordPress.com. Just keep in mind that the free version of its Gutenberg editor is pretty limited in terms of design freedom. Another option is to use a website builder. Wix’s free plan will let you create a landing page at no cost, while giving you a lot more features for customizing your page and engaging your visitors. Wix is not the only option, though, many other website builders will let you create a landing page for free (or very cheaply). If you don’t know where to start, check out our review of the best website builders in 2022.