How to Build Your Own Landing Page with a Free WordPress Plugin
Did you know that only around 22% of business owners are satisfied with the conversion rates that their websites are getting?
This seems a bit low if you ask me. But, at the same time, I totally understand. "Website owning" is hard business. On the one hand, you can build a website pretty easily, even by yourself (thanks, WordPress!). But, on the other, getting that website to a level of performance that's satisfactory from a business point of view is an entirely different story.
If a website is to be successful, it simply needs to generate good conversion rates.
For example, the average add-to-cart rate for Q3 2016 is reported to be at around 8.6% (according to SmartInsights; global data), while the overall sales conversions are at 2.5% (same source). If your site is more about getting email signups rather than direct sales, then the rate to aim for is 1.06% or higher (says SumoMe).
But what if your results are nowhere near that?
Well, this means that we need to act! And some of the best ways to improve your conversions are:
a) directing your traffic to custom-made landing pages instead of your standard homepage, or product listing, or contact page, etc.,
b) employing the right methods to make those landing pages convert (here's a case study presenting the difference between an unoptimized and optimized landing page - 400% improvement),
c) using some of the popular conversion optimization tools to help you carry out the tasks.
Now, the keyword here is custom-made landing pages. As you might be thinking, anything custom-made has to be expensive, or at least has to be time-consuming to create (somewhat by definition of it being custom, right?).
To some extent, that is true. For instance, solutions such as LeadPages will set you back $25 every month on the low end, and working with a designer is a whole different level of costs, so let's not even get into that.
But with all that being said, I do have some good news:
- Basically, your current WordPress website is entirely capable of letting you build a custom - and great-looking - landing page, as long as you're willing to experiment with a couple of specialized plugins.
There are two main areas that we're going to cover in this guide:
how to make sure that what we end up with is a quality landing page from a business point of view,
how to handle everything from a technical point of view.
In other words, this is about the "hows" and "whys" of the whole endeavor.
Here's what you need to get started:
You need a working, self-hosted WordPress website or blog. Self-hosted - meaning that it's been set up on a stand-alone hosting account (not on WordPress.com), and under a custom domain name. If you need help on making sure that you have all that, scan through this guide on how to create a site on WordPress.
You don't need to abandon your current WordPress theme. The method presented here works with every theme (as long as it's not outdated).
It's best to have your offer sorted out beforehand. In other words, don't go creating a general landing page for your whole site. Instead, focus on specific offer / specific product / specific promotion that you want to improve the effectiveness of through a custom landing page.
1. How to build a landing page all by yourself
Install the missing landing page tools
The first step is installing a "content builder plugin" for WordPress.
Some of the popular free solutions that are all capable of handling today's task are: SiteOrigin Page Builder, Live Composer, or Beaver Builder Lite.
You are free to experiment with either of them, but my personal favorite is SiteOrigin Page Builder, and it's the one I'm going to reference going forward.
The easiest way to get it installed on your WordPress site is to go to your WordPress dashboard > Plugins > Add New, and input "Page Builder by SiteOrigin" into the plugin search box. It's this one:
Just click the "Install Now" and then the "Activate" button.
To get some cool additional content blocks (will come handy in a bit), you can also get the add-on called "SiteOrigin Widgets Bundle":
Once you have both plugins installed and activated, we can start working on your landing page:
"The big four" - the main sections of a good landing page
There are many viable ways to build a landing page, but essentially, all quality landing pages should have four key sections - the big four:
1. the "get attention" section 2. the "what's this about?" section 3. the "what's in it for me?" section 4. the "what do I do next?" section
Each one of them resonates with your visitor on a different level and gets them through the whole experience step by step.
a) The "get attention" section
This is the first, and also the most important, part of your landing page. It's the section that grabs the visitor's attention and gets them interested in what you have to offer right away.
Some of the common elements used for that:
Here's an example of a good first section by the Dollar Shave Club:
Please notice how the header section is visually appealing, and how clear the message of the headline is.
b) The "what's this about?" section
You need to get your value proposition right. For example, some time ago the game Sims 3 experimented with their value proposition to see what impact this can have on the number of registrations. The result: a 128% improvement.
The "what's this about?" section is meant to give the visitor a reason to care while using as few words as possible.
c) The "what's in it for me?" section
Right after the visitor gets to know what the page is about, the main question in their mind will be "What's in it for me?" Or, in other words, what benefits does the offer bring them?
The third section of your landing page needs to address that. Usually, it's the most content-rich section of the landing page, since it's where most of the convincing is being done.
However, don't focus on the characteristics of the product/offer. Think benefits, not features. You can present those benefits inside columns, using icons, product screenshots, custom images, whatever makes sense.
d) The "what do I do next?" section
This is the final part of the landing page, and it's all about the call to action - a direct message that tells the visitor what they should do next to take you up on the offer.
Go for simple language and presentation here. It's been proven that simple button calls to action tend to work best (study says), so there's no point in overdoing it.
For example, at one point, SAP BusinessObjects tested a simple but large call to action button instead of a classic text link. The result was a 32% increase in conversion rates.
The winning version:
Now the best part; we can put all of the principles described above into practice with our SiteOrigin plugin.
Just as a demonstration, I'm going to be creating a landing page for a fictional walking tour of Barcelona. Everything's better with a good example, right? The nice part is that you can use these principles to easily create similar landing pages for just about anything.
This is the final landing page that we'll end up with:
Here's how to build it step by step:
2. Understanding the landing page structure in SiteOrigin
The SiteOrigin plugin lets you build custom page layouts - including landing pages - in a very structured way. Basically, it's something like that:
each page consists of a number of rows, one after another
each row can have one or many columns
each column can have one or many widgets, one below the other
To get started, go to the Pages section of your WordPress dashboard and create a new page. On the page editing screen, click on the "Page Builder" tab:
This will switch you over to the SiteOrigin builder, where you will see a new version of the page editor:
3. Creating the hero section - aka "get attention"
The hero section in my example is this:
To create it, start by clicking the new row button:
Set it to a single column and click "Insert":
Next, click on "+ Widget" (button visible in the image above), and from the set labeled "Widgets Bundle" select the one called "SiteOrigin Hero":
You'll see the widget added. Click the small "Edit" link that appears for that widget on mouse hover. Then, click "Add" in the Hero "frames" section:
Now just edit that frame by adding whatever headline you think is going to be best for your landing page. For me, it's "Barcelona Walking Tour" + "It's Free and Awesome."
Scroll down just a tiny bit to see the "Background" section. In it, add a background image:
Clicking that button will open up the standard WordPress media uploader. Just pick whatever image you think is going to work well as the background.
At this stage, you can also add a color overlay to the image in order to make it more uniform. You can do that via the slider labeled "Background image opacity" that's visible in the image above.
To add some spacing to the whole design, you can also set the parameter labeled "Top and bottom padding" that's visible further down the page. I like it at 250px for best effect.
Also, check the "Heading color" to make sure it's visible on top of your background image.
Click "Done" once you've finished adjusting this section.
One final tweak that we need to do in order to get the hero to span across the whole width of the page is adjust the row's main settings. Click that small wrench icon that's in the upper right corner of the row, and then "Edit row":
In the right sidebar, go to "Layout" and then to the "Row Layout" dropdown field. Set it to "Full Width Stretched":
That's it for the hero! Hit the main "Preview" button to see if everything went well.
4. Letting people know "what's this about"
To handle this part of the page, we're just going to use a simple row with a basic headline element.
Again, just start by clicking the "Add Row" button.
Then, click on "Add Widget" and select the one called "SiteOrigin Headline." This is a very straightforward type of widget. It only has two parts: headline and sub-headline. Input whatever text you think will work best for you there. I went with this:
If you want to, you can adjust the fonts and etc., but for me, everything worked out well on the default settings - as you can see above.
5. Giving them the benefits - aka "what's in it for me?"
Here's my benefits section:
I used two rows to get that effect.
The first one I built just by duplicating the very first row in the entire project - the one saying "Barcelona Walking Tour." I just selected the "Duplicate Row" option from the row's wrench menu:
Then, I grabbed the row by the double arrow icon right next to the wrench and dragged it down where I needed it. Lastly, I changed the text and the background image.
(Note: Duplicating an existing row and then just changing some minor details about it is often quicker than creating a new one from scratch.)
For the second row - the one with the three images - I needed to create a new one. But this time, after clicking the "Add Row" button, I set it to three columns of equal widths:
To the first column, I added a "SiteOrigin Editor" widget and a "SiteOrigin Image" widget.
The Editor widget just holds a single line of text:
The image widget is similarly not complicated. To add an image, just click the "Choose Media" button, which will fire up the media uploader. If you want to, you can set a handful of parameters about your image, and then click "Done." (Don’t forget to add alternative text to your images to help your SEO!)
Quick tip: When it comes to images, consider using photos of real people on your landing pages. One case study revealed that adding a picture of a person increased signups by more than 100%.
So this is column #1. For the other two, I just duplicated the widgets from the first one and changed the texts and images. All the settings remained the same. Once done, I have this row/column structure:
6. Creating the call to action - aka "what do I do next?"
Finally, the last section of the landing page. This is mine:
This is just a new row that's been set to two columns - this you already know how to do.
Let's start with the column on the right. There's just a simple Image widget there with a picture of La Sagrada Familia.
The column on the left has two elements:
A "SiteOrigin Editor" widget. Again, very simple. There are just three lines of text there. You can see them in the image above.
A "SiteOrigin Call-to-action" widget. This one is also rather easy to set up. All SiteOrigin widgets are very similar, actually. You basically get a panel with options and input fields where you can set your texts. I set this section's headline to "Reserve your spot here" and the button text to "Reserve your spot."
However, don't rush the button part. Spend your time to come up with the right text to place on your button. The difference in click through rates can be huge. Even 17% or more.
And that's all! Once you save the page, it should look similar to mine:
As you might have noticed, you can use any widgets inside SiteOrigin columns. This includes WordPress widgets offered by your other plugins, plus the native WordPress widgets. This means that the possibilities are basically endless, and that you can put pretty much anything on your landing pages.
There's a lot of third-party plugins, for example, that can give you some really cool custom widgets. Some of the top ones for this sort of customizations have been listed here (section #8). Just to get you thinking, here's a range of elements to consider adding to your landing page:
client testimonials - adding them can improve your conversions by 34% (source),
opt in forms,
social media buttons.
Don't overdo it, though. It's generally believed that short landing pages generate better conversions than long ones. Oftentimes, less is indeed more...
Also, another detail to attend to... mobile optimization. Sources say that there's a 270% gap in conversions between desktop and mobile, and not in a good way. To make the situation better for yourself, check out our other guide on optimizing landing pages for mobile.
A landing page can certainly be built in a number of different ways. The method presented here is just one of the possibilities. But what it has going for it is that it's really really cheap. All you need is a free plugin and some time on your hands.
Granted, there is some learning curve with it. But the skills you master when building your first landing page will pay you dividends potentially for years to come. After all, being able to build landing pages on your own, and without a professional designer's help is a huuuuge relief for your wallet.