How To Create A Modern Landing Page For WordPress Using Free Tools

A few days ago I wanted to create a landing page for a new product I created. After considering my options, I decided that there was probably a free and easy way to get something up and running with WordPress for testing purposes. So I went searching. Unfortunately, the offerings were hard to come by.

After testing quite a few plugins that claimed to do landing pages (for free, or with no mention of cost), I found that they were ALL problematic. The various problems I found were:

  • Claimed to be free but didn’t work until you paid
  • Wasn’t free at all, but didn’t reveal this tidbit until the install
  • Was buggy and didn’t work properly
  • Was too confusing to use (in the time I wanted to give it)

I can’t claim to have tested all the landing page plugins out there, but I did test a cross section of options. I used what I found on the first page of a plugin search for “landing page”, and two that were recommended on the ‘net. Also, my limit with any builder was two hours – if I made no reasonable progress in that time I moved on.

After two days of failure, I started to get annoyed that there were no free, easy plugin solution for what I thought should be an easy task. So I decided to start looking for another way to get my “lander” working in WordPress. All I wanted was a simple, modern looking landing page.

After considering how this might be done in WordPress, I went ahead and gave it a go. In the end I had success and you can see the result here. Here’s how I did it.

Firstly I knew I needed a plugin that would break the standard blog structure and just display a blank page. I found a great (free) plugin called Blank Slate that did the job well.

TIP: When testing Blank Slate in the page editor, make sure you selecte the Blank Slate template before publishing the page. Your content should appear on an otherwise blank page.

TIP: Some Theme’s will be too complex to allow Blank Slate to work properly, so if you are going to use your site just for landing pages, use a simple theme and test it before proceeding. I used a free theme called “Karen” that I had found a few years back, but I don’t think it’s available any more. I’m sure you’ll find something pretty quickly if you google “free simple wordpress theme”.

The next free plugin ¬†needed is XO Post Background. After installation, you’ll find it on the WP page editor near the “featured image” tool.

Now add your image. In combination with Blank Slate, you should now have the image filling the screen, ready for your copy.

TIP: I use the excellent free program Paint.net to change the opacity of my image to 75%. This resulted in an image that didn’t overwhelm the important text on the page.

Now put ALL of your text into the body of the page, including the code from your autoresponder (I use AWeber). The page header will not appear on the final page so you can leave it blank or give it a reference name like “landing page 1”.

TIP: Check that everything looks as expected before proceeding. Your theme may still causing you problems. For example, I tested the standard “2015” theme and it didn’t allow my landing page to present correctly.

Now install the final free plugin of our design process, Elementor. This is a pretty amazing free editor that gives you the ability to edit a page or post with WYSIWIG functionality.

Once installed, you can now edit your landing page to completion.

I enjoyed using Elementor because getting things done was quick and reasonably pain-free. It wasn’t entirely intuitive – I did need to watch a few youtube videos to clarify some of the finer points of using it. Still, when I got what I needed, I was able to carry on without delay.

TIP: If you use the standard WP editor to edit a page previously edited by Elementor, be careful, as you may lose all of your formatting! The way to save your work after a standard edit is to click “edit with Elementor” and then save the page from Elementor. It will save your formatting, including your basic edits.

The only thing I really didn’t understand using Elementor was controlling the whitespace within section elements on the page. I had to use the basic editor to (carefully!) delete blank lines (especially in my optin-form) to ensure my page displayed without scrolling. Fortunately after my basic edits nothing broke, but I did get a shock the first time I displayed the page before going back to Elementor!

In the end, all the sections of my completed landing page displayed within one screen, at least on my computer (but it was close). I was very happy with the result, all done in a day. In future I’ll probably chase up that whitespace problem – it’s still an unresolved issue I want a better solution to. I’ll update this post I if find the right way to adjust whitespace using Elementor. If you know how, please leave a comment letting us all know. UPDATE: This video helped a lot!

So there you go, how to make a modern looking landing page with free tools in WordPress. I hope this helps you in your business. If you do go ahead and make a successful lander using this how-to guide, leave a link to it in the comments below, I’d love to see it.

PS: I just created a simple advertorial page related to my landing page, also using Elementor. Once again, very happy! You can check it out here.

 

Leave a Reply