If you’re building your first website, you might be wondering what a landing page is. A landing page is basically meant to represent a scenario in which the visitor comes to your WordPress website and lands on that specific page – effectively making it the entry point to your website.
Now, what landing pages in WordPress are about is grabbing that visitor and convincing them to take care of a given predefined action. In most cases, this is about getting them to subscribe to an email list, click a specific link/button, buy a product, or perform some kind of social-media-related activity (like clicking the re-tweet button).
In other words, the goal here is to take that new visitor and immediately put them through some marketing process on your WordPress site, as opposed to letting them wander around, looking for something to do.
So what makes landing pages on WordPress special?
Of course, you don’t actually need something like a landing page to try convincing your visitors to take some specific action. You can do so from any kind of page that can be built inside the WordPress platform or even from the homepage of the site itself.
However, the difference here is that a landing page (when executed properly) will always bring better results, due to its single-purpose nature, as opposed to a standard homepage which is usually built in a way that tries to present a load of different things and information.
The most interesting thing about landing pages is their design, or more accurately, lack thereof. Most landing pages in WordPress, at least in a way that they’re implemented these days, are very minimalistic. They are usually built entirely separately from the rest of the site and retain very little of the site’s original design.
In short, every element that appears on a landing page should reinforce the main goal of the page (getting the visitor to take a specific action), and everything else should be erased.
So in summary, the elements that make a good landing page in WordPress, and also the elements that we’ll focus on in this post are:
- Simple structure with minimal design.
- No sidebars. Sidebars make the design distracting.
- No footer.
- Minimal header. So the visitor can get straight to the copy.
- If you’re going to use a logo, make it un-clickable.
Method #1: The obvious one – plugins
There’s a plugin for everything these days and landing pages in WordPress are no exception here. If you want a quick way of building landing pages in WordPress, and you don’t care that much about optimizing code at the moment, then plugins are where you should go.
That being said, there’s not much free stuff available out there. I mean, sure there are some plugins in the official directory, but you will quickly find out that they are either very limited in terms of features or even that there’s almost nothing available for free and that you have to do some kind of an in-plugin purchase (I guess that’s a thing now) in order to get the actual features.
Anyway, the only free and functional plugin I could find is WordPress Landing Pages. It’s quite easy to use and has all the basic features you’d need to start building landing pages in WordPress.
You may also be interested in:
- WordPress Maintenance Company vs DIY – Are WordPress Maintenance Services Worth the Money?
- 6 of the Best Cross Browser Testing Tools – In-Depth Comparison for 2021
- Beginner’s Guide to CSS Variables (aka CSS Custom Properties)
Method #2: Drag and drop theme builders
The whole idea of constructing a landing page on a WordPress site is to make it different from all the other pages. But the problem with most WordPress themes is that they are quite limited in terms of what you can and cannot do with the design.
For instance, every theme will allow you to place whatever you want inside the main content block of a page template. However, if you want to do something outside of this area, well, bad luck.
So what’s different about drag and drop builders that are integrated into some of the more developed themes out there is that you can basically do whatever you wish with any page’s design, and this sort of customization is available through a very easy to use interface.
We talked about drag and drop theme builders a while ago, listing 20 of the most popular ones.
In a nutshell, the advice is this, if you’re working on a site that you know is going to require a handful of landing page templates for WordPress to be created along with the main design, consider switching to a drag and drop builder altogether. It will likely make your work a lot faster.
Method #3: LeadPages
(Note. This is a paid solution.)
LeadPages has taken the online marketing landscape by storm! It’s a great tool for building quality landing pages, integrating them with opt-in forms, and dozens of other things to make your WordPress site landing page friendly.
The plans start at $37 per month.
I’m listing it here because it’s a remarkably easy-to-use tool. So if you’d rather invest your money instead of your time, LeadPages is the solution for you. Either way, you can read a direct comparison of ClickFunnels vs LeadPages here.
Method #4: LeadPages hacking
Hold on for a moment. What I’m about to describe is nothing bad, nor illegal. It’s completely okay to do, and as far as I know, the guys over at LeadPages have nothing against this method. That being said, it’s not the most WordPress-optimized solution, and for that reason I’m mostly mentioning it here as a quick fix that you should only use as a placeholder until you integrate a more manageable and functional solution.
Here’s the deal. Every once in a while, LeadPages releases a new template as an HTML download. Everyone can get those templates from the official website and then use them in their projects.
The only difficulty is that those landing pages are pure HTML, so they are not WordPress-compatible right off the bat. What we need to do, then, is to make them WordPress-compatible.
To handle this. Do the following:
1. Start by going to this roundup by LeadPages and picking a template you like.
2. Browse through what’s available and download the template that looks the most promising. (Note. Opt-in required for that.)
3. Extract the archive and rename the index.html file to, say, page-landing-template.php
4. Edit the file and do the following:
- Right at the very top, place this line:
<?php /* Template Name: Landing Page */ ?>
- Change the path to every external file, adding the path to your current theme. For example, a line like
<link rel="stylesheet" href="css/style.css">, becomes
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/css/style.css">
- Right before the closing
<?php wp_footer(); ?>
5. Upload the template files to your FTP server right into your current theme’s folder.
(Note. You may have noticed that in the example above, both the styles and the JS files are hard-coded into the header. This isn’t the best solution for WordPress and should be avoided whenever you’re building your own theme. However, here, we’re working with what we have from the LeadPages template and trying to enable this landing page in WordPress as quickly as possible, so we’re just going to leave it like it is.)
At this point, you have yourself a LeadPages template that works with WordPress. However, it’s still not editable from within WordPress, which means that to change any of the copy, you have to do so by editing the actual .php file.
Method #5: Manually built custom page template
This is the most old-school approach out there when we’re talking WordPress.
Basically, no matter what theme you’re working with, you can always create a custom page template for it and do whatever you wish inside of this template.
Note. Method #4 on this list is basically about creating a custom page template and then placing a standard LeadPages’ template inside of it.
The best way of building a landing page in WordPress manually through a custom page template is to simply take the default page.php template and play around with its CSS/HTML structure.
For example, working with the previous default WordPress theme – Twenty Fourteen, you can easily get rid of the default left-side sidebar, the header, the footer, and everything else. What I did here, is:
- I took the default page.php file, made a copy and called it page-lp-example.php.
- Then I took the default header.php and footer.php files and made copies of them as well (header-lp-example.php and footer-lp-example.php).
- In page-lp-example.php, I changed the default get_header and get_footer calls to the ones using my new templates: get_header(‘lp-example’); and get_footer(‘lp-example’);.
- Also in page-lp-example.php, I removed the call to get_sidebar();.
- Finally, I removed all HTML blocks that I didn’t need on the landing page from all three files.
- I named the template “LP Example.”
Here’s the effect:
And here’s the code of the final files. header-lp-example.php:
<!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) & !(IE 8)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <div id="main" class="site-main">
<?php /* Template Name: LP Example */ get_header('lp-example'); ?> <div id="main-content" class="main-content"> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php // Start the Loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'content', 'page' ); endwhile; ?> </div><!-- #content --> </div><!-- #primary --> </div><!-- #main-content --> <?php get_footer('lp-example');
</div><!-- #main --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
Now all that’s left is taking this landing page and using it to showcase an offer.
Bonus: How to pimp your landing page on WordPress
Even though landing pages require a simplistic and minimal design, there are elements that need to stand out and present the visitor with an obvious action point – things like buttons, links, testimonials.
You can create these elements manually, either in Photoshop or through CSS/HTML, but there’s a faster solution, and it’s called Shortcodes Ultimate.
It’s a plugin that gives you access to stuff like buttons (flat, 3D, different colors, etc.), animations, accordions and a lot of other site elements. Everything is done through, you guessed it, shortcodes. Plus there’s a lot of customization features and the docs are very good (examples and stuff).
Landing pages are clearly not something that WordPress was meant to support natively, but this doesn’t turn out to be such a problem after all. At the end of the day, various plugins, theme builders, custom page templates, even external services like LeadPages make working with landing pages something that every developer can handle.
What’s your take here? What’s your preferred way of building a landing page in WordPress?
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%: