Building Landing Pages Shouldn’t Be Hard
If the words, Landing Page conjure up images of blank pages that verge on the consuming you like the White Screen of Death, you’re not alone.
It’s a common issue that many marketers and web developers (because their clients are marketers) face every day. The more it consumes you, the more likely you are to start shelling out big bucks for subscriptions to drag ‘n drop solutions.
I’m not going to lie, this is a fear that consumes me, too. I recently launched a product, wrote the copy for the page, finished it up by adding a “buy” button and realized that it looked awful. The copy is better suited to a video sales letter. I had little in the way of direction, graphics, or anything that might actually entice someone to buy my product.
It’s the Conversions, Stupid
Think about it: No amount of traffic is going to help you if your page doesn’t convert. If you’re selling yourself as a service or selling a product, whether it’s your own or as an affiliate, that page is the thing that has to convince people to click on links and pull out their credit card. They have to trust you more than your parents trust you to get a real job.
So, I decided that I was going to, as a pedestrian, dig into landing pages, discover how they work, and how to build one. This what I’ve come up with so far. If you’re on WordPress and looking for a cheap way to put up a simple landing page or two that doesn’t look like your kid sister’s dog ate it, this tutorial is for you.
I came across a course at Udemy.com called Landing Page Design & Conversion Rate Optimization by Isaac Rudansky. This is a comprehensive course. Wait for a promotion from Udemy and grab it. Spend some time over hot chocolate with it. You won’t be disappointed. Take your time. I’m only half way through it and it’s already proved to be an invaluable resource. This is the easiest way to learn how and why to write copy and use images to enhance your sales pitch. While he goes through building a page in Unbounce, this tutorial goes over building landing pages in WordPress. In this way, you can build your own landing pages: templates that you can use over and over again, no matter what domain they reside on.
That’s the first $11.00 you’ll spend. Next up, you need the plugin that goes with the Socrates Theme. The Socrates Toolkit Plugin can be used with any theme. In this demo, I’m using it on the Genesis theme, Monochrome Pro. The developer’s license allows you to use this plugin on any of your themes.
That’s the other $47 you’ll be spending. Dan Nickerson will also give you access to a CSS/HTML page that has all of the code on it using the Socrates Plugin which means you can decipher those and use them as HTML pages instead of the WordPress/php sites.
You don’t need to be an HTML expert, but a little knowledge on that and its styling cousin, CSS, will go a long way to helping you if/when things go awry. Any references you need can be found at W3Schools.
Because I’m working with a Genesis theme, I also installed Genesis Dam Buster by Russell Jamieson. Although Dam Buster was originally used in conjunction with the Beaver Builder page builder, you don’t need the Beaver Builder plugin to build your pages. In fact, most page builders will get in the way at this point.
Also, because WordPress has been updated and eliminated the Classic Editor, you’ll need to bring it back. Install, “Classic Editor” from the WordPress repository (it’s the second or third plugin when the Add New options come up) and activate it. I don’t have it in my screenshots because I did this tutorial using XAMPP and localhost and my WordPress version wasn’t updated.
Other third-party software you’ll need:
Bitmap Editor: I prefer using IrfanView for cropping. For other editing, I usually use RealDRAW by MediaChance. Yes, I’ve used just about everything out there. I prefer RealDRAW because I’ve been using it for nearly 20 years. It does everything I need it to do, maybe not as elegantly as other options out there, but I’m used to its shortcomings. Of course, the usual free suspects will work here, too. Inkscape, the Gimp, Pixlr, Paint – anything you’re used to using is fine. Plus, if you’re used to stylizing photos using CSS, you might just get away with cropping the images.
Basic Elements for Your Landing Page
Here then, are the basic elements needed for a landing page:
A Product/Service– Know your audience and why they’ll want this product.
Sales Copy – Know how to tell your audience the features and benefits of how this product will solve their problem (even if their problem is just which shoes to buy). Include bullet points and very little in the way of words.
Images: People skim copy, read headlines, and look at pretty pictures. Your images should be congruent with your message. Include trust badges like “Money Back Guarantee” and your logo. Also gather anything like logos relating to your industry, checkout credit card logos and product pictures.
A Plan: You should have a mock up, or, at least, a very good idea of how you want your page to look. It’s going to start with a title, talk about pain points (like trying to cook with less oil if you’re selling an air fryer), and move on to your product, touting features and benefits.
Call to Action: You can add bonuses and, most importantly, a Call to Action. As a rule, landing pages and squeeze pages always have one call to action. This is why it’s important to eliminate navigation and any clickable logos that aren’t directly related to your page and your objective.
Once you’ve collected your images, you should optimize them at tinypng.com. This great site compresses your images which will speed up your web page’s loading time. You can do this before you upload them to the Media Library and everything will be ready for you once you start editing.
Go to your website’s Plugin section and, if you’re on a Genesis theme like I’m using, install the Genesis Dam Buster plugin. Install the Socrates Toolkit Plugin by uploading when prompted and activate both plugins.
Adding a New Page
While you’re going to hide the title from the main section, don’t forget that it will still show up in the tabbed section of your visitors’ browser, so be sure and name it appropriately. If your theme has an option to pick a template such as Landing Page, choose that.
- You should also avoid any sidebars on the page.
- Save it as a Draft and click the Preview button next to it.
- You can see the orange Socrates button in the toolbar.
Next, scroll down to the bottom of the page to find the Genesis Dam Buster editor (if you’re using it). If it isn’t there and you know you installed and activated it, make sure the box to let it show is enabled in the Screen Options settings at the top of the page.
I just go through the tabs, ensuring that every box is checked, then I click on “Enable Tweaks”.
Save the draft again and refresh the landing page. Your header, logo, and title should be gone…and it looks intimidating, right?
You’re ready to start editing.
There are two things to keep in mind when using the Socrates Toolkit Plugin:
You have two views in the WordPress Editor; Visual and Text.
Shortcodes are entered when using Visual Mode, while Links are entered using Text Mode.
If something looks “off”, it’s usually due to WordPress deciding to add code like “gt&;” where you wanted the symbol for “greater than”. If you’ve refreshed your memory on HTML code, you’ll recognize these and be able to deal with them easily.
When you want to add a link to an image, you get that hyperlink by going to the Media Library and selecting “Edit Image”. The hyperlink is the one on the right-hand sidebar. To make this easier on myself, I usually keep the Media Library open in a separate tab.
Put your cursor in the hyperlink box, right-click and choose “Select All” and copy the link.
Editing the Page
Adding a Hero Banner
While in Visual Mode, go to the Socrates Icon and scroll down until you see “Hero Banner”
Select this from the dropdown box. You’ll see the following code.
Switch to Text Mode
You’re going to grab your media hyperlink and insert it in-between the quotation marks where it says, bgimage=”INSERT_URL_HERE”
Save the Draft and Check Your Page
Looks awful, doesn’t it? That’s okay. Let’s keep going.
You’ll notice, from the Media Library, that the image height is 250 pixels. We’re going to change our height to reflect that.
Okay, what’s going on here? It’s that Parallax thing that everyone talks about but no one explains. It’s really just a setting where stuff scrolls and the image stays stationary or moves more slowly. It really isn’t important in a picture with a height this small but that’s okay. We want people to scroll and the parallax effect kind of takes away the focus of your message. Let’s just fix it by changing the number to 5
Save the Draft and take a look at the page. It’s starting to look like a banner, but the banner text is in the corner. Here’s where you start to discover the coolness of the Socrates Toolkit Plugin. You can nest the shortcodes to get the look you’re after.
Switch back to Visual Mode and right after the hero code, add the Headline Code and Save the Draft.
In this code, change the headline color to contrast your picture, change shadow to “1” and change your headline text. (Hint: #000 is black, #fff is white.)
Select the Headline Code and Cut it
Paste this Code Where in the Hero Code where it says “Banner Text”
To change the position of the text up or down, use the padding setting inside the hero code
To put text on one side and a picture on the other, use the Columns Option. This works well inside a full section.
For the Full Section, I changed the background color and parallax to “0” and came up with this:
This doesn’t work without the Dam Buster. Now, I want to get rid of that white space in-between the two sections. The easiest way to do this on a per-section basis is to use an old CSS trick where you use a negative number in the margin. In this case, I changed the margin for the Full Section to “-25”.
The code is responsive and since we don’t have any text in here, it’s time to add some copy.
I also like the idea of adding copy next to a picture. To do this, I’m going to next a two-column shortcode inside the Full section.
I got fancy in this section. Dissecting it, you can see where I added an unordered list on one side with custom coloring and no bullet (that’s the list-style-type-none) and alternating colors.
The code on the second half is just an image of a little girl and the columns code closes.
What we have so far, looks like this
Now, we take our columns code and, like we did before, paste it into the section code where it says, “Section Content”.
While we’re at it, let’s give this proper headline
Here’s the final look:
From here, you now have most of the control to complete your page as necessary.
Hints for Completing Your Landing Page
- The shortcodes are mostly CSS modifier types of code.
- Margins move sections.
- Padding moves what’s inside the sections.
- You can add media anywhere, both inside and outside of the shortcodes. In the demo page, the image of cash is inside a full section with a black background. The trust badge is in the headline section, which is nested inside a full section. The Buy Button is in a full section which gives you control as to how to center it. As it turned out, I needed about 600 pixels of padding to get it into position. Not ideal, but I’m not a professional. The credit card icons image is a single image that’s inserted as a normal media file and centered on the page.
- Div code will still work outside of the shortcode.
- Using full sections with negative margins is the easiest way to eliminate gaps between sections, but WordPress is still trying to read your shortcode as if it were text and will add gaps accordingly.
As an example, look at this screen shot with a gap between the sections:
Checking the code, I changed the top margin on the orange section to minus 25, and it looked like this:
What’s going on? WordPress is trying to read my shortcode as text and you can see that space. WordPress thoughtfully added a paragraph for me (DOH!). Once I cleaned up the code (by hitting BACKSPACE), the problem was resolved.
Check out the completed demo landing page here.
So, that’s about all there is to it. Go to Udemy.com and get Isaac Rudansky’s course. Pick up the developer’s license for the Socrates Theme (a one-time fee) so that you can download the Socrates Toolkit plugin and you’re well on your way to building as many landing pages and squeeze pages as you’ll ever need without subscribing to anything.
Now, if you’ll excuse me. I have some old landing pages that I need to clean up.