Posted on

Budget Friendly Landing Pages for WordPress

WordPress Site Care Landing Pages

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.

For our little tutorial, I am using the CyberChimps in the WordPress repository and the Genesis Framework and Sample theme by StudioPress.

For plugins, I am using Ninja Forms, SiteOrigin Page Builder, and Beaver Builder.

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.

Genesis has layout options
Genesis has layout options

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.

>>> Learn how to create a custom page template here >>>

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.

A look at the Beaver Builder Editor
A look at the Beaver Builder Editor

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.

Looking at SiteOrigin's editor
Looking at SiteOrigin’s editor

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.

A Simple Landing page layout
A Simple Landing page layout

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.

Simple Ninja Form
Simple Ninja Form

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.

Closing

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.

Discuss

What kinds of landing pages do you create?

How do you create landing pages?

Get MainWP News and Notifications

Todd Jones
Along with being the resident writer for MainWP and content hacker at Copyflight, I specialize in writing about startups, entrepreneurs, social media, WordPress and inbound marketing topics.

2 thoughts on “Budget Friendly Landing Pages for WordPress

  1. Great write-up and a combo I’ve been using very successfully for a while now. The code (CSS and PHP) to setup a full-width template for Genesis is readily available online (hit me up if you need it) but one easier way for Genesis users is the Genesis Dambuster plugin.

    This allows you to turn on/off all the elements on any page in WordPress and when combined with BeaverBuilder is a hugely powerful combo.

    1. Thanks, Andrew! Yeah, there are tons of ways to do landing pages, but finding something you can do quickly and easily is paramount.

      I use the Beaver Builder + Genesis + Dambusters as well and it works great!

      Some of the Genesis Child themes come with a landing page template already which I have used.

      I had Premise back in the day. Do you remember that one? I would be interested to hear more about how you execute these? If you are on the MainWP Facebook page, holler at me.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.