A few months ago, I took a coffee brewing class. The local coffee shop offered the class, and I jumped at the chance to make a better pour over brew at home.
I learned a lot about the process, but I don’t really feel like I am that much better.
I learned about things that made a difference with pour-overs including water temperature, grams of coffee, the type of grind, and the way one pours the water.
Naturally, you have to have good coffee beans, and it helps to have proper tools. The one thing I am missing is a gooseneck water kettle.
Coffee shops and, yes WordPress developers, are always offering something to their customers. It might be fresh roasted coffee beans, a coffee class or a new website maintenance service.
Building a landing page with WordPress
Each offer is worthy of a single, dedicated page that will create a funnel moving the user toward making the decision to learn more or make a purchase.
These are called landing pages.
We have talked quite a bit about landing pages here at the MainWP blog.
There are many different toolsets available to help create landing pages.
For this article, I wanted to create a simple landing page using tools you can get from the WordPress repository. Much of your setup will depend on the WordPress theme you are using.
Chances are, you already have a theme and a contact form that you know very well.
There are some disadvantages of not using a premium tool designed for building landing pages. I will go over that at the end.
Let’s get started, shall we?
Steps to build a simple landing page
For our WordPress landing page, we will need a theme that allows layout editing (or you will need to customize a page), a drag and drop editor plugin, a robust contact form plugin, and the ability to integrate with your CRM or Email Software.
Step 1 – Enable full page layout (if you don’t need sidebar)
We will need to be able to create a full width, no sidebar page, and if you choose, remove the navigation.
This may be the most complicated part of the process. If your theme does not have layout options for each page, you will need to need to add CSS to hide the display of the sidebar on the page or build a custom landing page layout for your theme. You will also need to customize the container.
Many themes have the option to enable a full-width layout.
To build a custom landing page template, simply build a new template for your theme. While creating the new template like you would for any other template, remove the elements you do not wish to have such as the sidebar and the navigation.
If you are using a Genesis theme, you are a step ahead of the game. The Genesis Framework provides an easy to use layout option for each page. This will allow you to remove the sidebar with the click of a button.
Also, the Genesis Framework sometimes includes a Landing Page template ready for use.
Use the practice you are most comfortable with for your theme.
For the purpose of our landing pages, I simply made the page full-width.
Step 2 – Enable plugin for page builder
For our drag and drop editor, I used Site Orion and Beaver Builder. Each has a free version in the WordPress repository. Each plugin also has a premium version which gives you more options and more support.
The premium versions will allow you to access premade templates for a page. This is a terrific feature as you can customize a ready-made layout.
The drag and drop editor will handle the layout inside the WordPress content container. The layout outside that container is on us.
Step 3 – Determine landing layout
For my landing page, I went with a very simple design of a wide image at the top and two columns below. The left column includes the copy for my optin , and the right column includes my contact form.
You may want to use a design editor to play with layout ideas. In this case, I chose to keep the layout very simple.
I have used Google Drawing in the past to create layouts. More complex layouts may will require the help of the premium version of our drag and drop plugin.
Step 4 – Create and add landing page copy
Create your landing page copy by adding what you wish to say to encourage a sign-up. Use good copywriting techniques remembering to sell benefits before the features. It might be better to create your copy in a text editor before adding to your landing page.
Step 5 – Add contact form (Ninja Forms or Contact Form 7)
For my landing pages, I installed Ninja Forms. I also have the Gravity Forms developer’s license, so that is an easy way to build the landing page contact form as well.
Use the contact form plugin you are most comfortable.
More robust landing page plugins or software usually include their own contact forms and integration features for email software and some client relationship management software.
Here are the finished landing pages.
For this article, I tried to adhere to some requirements.
Inexpensive – I wanted this to be as inexpensive as possible, budget-friendly.
DIY solution – I wanted it to be a fairly simple do it yourself type solution
If you are going to build landing pages regularly, you will want to find the most efficient way possible and a solution that allows integration with your CRM or email software.
This is where some of the premium solutions come into play. Beaver Builder, for example, is not very expensive and you can build nice looking landing pages very quickly.
Some I know swear by Thrive Landing pages.
I also use LeadPages. LeadPages is a fantastic solution, but it has a per month price point that many people may not wish to carry.
Adam Connell has a great review of Landing Page Tools for WordPress over at Blogging Wizard.
There are several third party tools such as Unbounce and Instapage.
As with anything, take advantage of free trials to test, ask friends and developers you respect for their ideas and research. The key is to come up with a solution that works best for you.
What kinds of landing pages do you create?
How do you create landing pages?