Looking for some Unbounce tips? You are where you should be. Landing pages are an absolute must if you are trying to send people to a page where you want them to take some kind of an action.
With the exception of people landing on your website or web pages directly (which is possible through organic, social, and email traffic), all other visitors must land on a landing page.
Landing pages disallow visitors to be distracted. The way landing pages are built, you can have visitors focus on only one thing they have to do when they arrive:
Take action.
Unbounce is my favorite landing page builder. It’s absolutely essential for our agency work and my own projects. I’ve been working on the Unbounce platform for a long time and I managed to pick a few tricks and tips that I am sure you’d benefit from.
Unbounce now has conversion Intelligence — a smart way to make your campaigns work harder than they ever have, thanks to hundreds of thousands of data points and artificial intelligence.
Other few landing page tools I use are LeadPages and Instapage
Here are some of those Unbounce Tips:
Use the “Mobile page layout assistant”
Unlike other landing page builders, Unbounce took to mobile responsive landing pages a tad late. What that means for us Unbounce fanatics is that there’s that wee bit of work that has to go in before your landing page is completely mobile responsive.
As usual, edit your landing pages completely in the “desktop mode”. Click on the “mobile” tab at the bottom of the editing screen. When you get to the mobile tab, get to the top right side and click on the mobile layout assistant as shown.
That should do most of the work for you. But you are not done yet…
Hold Down the command or control Key While editing mobile versions
After clicking on the “Apply to entire page” button, you’ll often see some of your content and design elements hidden or not aligned properly (and this is where you’d have to set things up).
Drag, realign, change sizes, and change positions as you’d like by holding down your Command key (On Mac) and CTRL key on Windows.
Hold it down for all the changes you’d make on the mobile layout. If you don’t, all the changes you make on mobile side also apply to the desktop side.
This way, your work will never end.
Build multi-page landing pages
The more interested a prospect is, the more they are willing to put in the required due diligence.
A great way to test whether or not your landing page visitors are “that much into you” is to setup multi-page landing pages.
To build multi-page landing pages, you’ll essentially need two landing pages. Something like:
Step1: Build a page for the first step of the multi-step or multi-page landing page
Step 2: Build out a second/final step of the multi-step or multi-page landing page.
Add a video to the background
Johnny Opao, a developer at the Unbounce Community, did a lovely workaround to allow you to add a video background on your Unbounce landing Page.
Here it is, as is:
Here’s a script I put together for those looking for a video background solution. It hasn’t been fully tested so I can’t promise it’s perfect, but it should work for most cases.
This script requires the video be hosted on Youtube. Be sure you own the video or have permission to use it for this purpose.
Here’s a sample page of the script in action:
http://unbouncepages.com/video-background/Steps:
1. Grab the latest version of the script here:
https://gist.github.com/johnnyopao/cb8aa1045dc854fb81aa2. Paste the script into your javascript box and set the placement to ‘before body end tag’
3. You’ll need to make some small modifications to the script. Specifically this line:
lpVideoBG(‘#lp-pom-block-9’, ‘2XX5zDThC3U’, 560, 315, 0);
Here’s a quick reference legend of those values:
lpVideoBG(‘#SectionID’, ‘YoutubeVideoID’, width, height, muted);Replace ‘#lp-pom-block-9’ with the ID of the section you want to apply the video background to. If you want the video be fixed and span across the entire viewport then set this value to ‘#lp-pom-root’.
‘2XX5zDThC3U’ is the YouTube Video ID. This can be found in the URL of the Youtube video. For example:
If your YouTube URL is:
Then the ID would be: vLUNWYt3q1w
‘560’ and ‘315’ are the ‘width’ and ‘height’ of the video. Most standard videos are around this size, but if you know the exact dimensions of your video you can set it here for a better fit.
The last parameter determines whether or not to mute the video. Set this to:
‘0’ for sound
‘1’ to mute4. Set a background image to the page section. It’s very important you do so. The image will act as a fallback in the event the browser cannot load video backgrounds (like on iPhones).
That’s about it! Again I can’t promise this is perfect so please use it at your own risk.
Note: Don’t be too quick to conclude that you “should” or “should not” use video backgrounds on your landing pages. The best way to know if a video background works for your campaigns or not is to do A/B Testing.
Setup everything On Variant A before creating Variant B
If you are going full out on your landing pages and building A and B versions, be sure to complete everything on your first version.
This also includes adding all sorts of scripts and codes for Google Analytics, Mouseflow tracking, Improvely codes, Google conversion codes, and Google tags, if any.
Once you are sure you’ve added everything you’d need, duplicate the page to create your second version.
Be sure to change only one element in version B. That’s the best way to test out the differences and build a high confidence level.
Use those boxes when you should
Below the fold, on almost every landing page you’ll build, you’ll often add anywhere from 3 to 6 blocks or containers to provide more information. These units of information usually have icons, titles, and a paragraph or two with copy.
Start out a section that encompasses all these units together. Use a box (available on the left control panel) and put your icons, titles, and paragraphs within these boxes.
This way, it’s easier to build out your mobile layout and a great way to make sure your elements sit together.
Use Mouseflow with Unbounce
Mouseflow is an awesome tool that helps you live recordings of your visitors’ actual sessions (including heat maps, scrolls, movements, and clicks). While it was primarily built for you to use it for your entire website, you can use Mouseflow exclusively for your landing pages (that’s also where the money is, right?).
Once you setup Mouseflow code on the landing pages you want to track, you’ll be able to see what happens on the landing page live.
All scrolls and no clicks? Visitors paying attention to the top left corner of the landing page while your form (and the call to action button) is on the right?
Remove Borders on Buttons
Not all call to action buttons are built equal. Depending on the colors, design elements, the overall design sense of your landing page, your buttons might or might not do with borders.
Unbounce allows you to build any kind of button you need.
We’ve seen conversion lifts either with a flat, thick bottom border patch or without the border and any other effects on the button at all.
Put a reminder call to action at the bottom of the page
If the landing page is slightly longer than what the usual browser sizes are, your visitors will scroll down their way to the bottom. Most of them forget to come back up. If they don’t, you’ll just lost a few opportunities there. Unbounce lets you add another button (a rather large or wide one, depending on how you design it) right at the bottom of the page.
When users click on it, the page scrolls back up automatically to the form.
This is how you do it. Let’s assume you want your visitors to get to the form when they click the button at the bottom.
- Take note of the form ID. You’ll find it in the properties section as shown.
- Place a button at the bottom of the page and design in context.
- On the right hand panel, input the “form ID” as the URL.
- Save the page.
That’s about it.
How do you use Unbounce? Share some Unbounce tips with me.
1 thought on “8 Unbounce Tips To Make Your Landing Pages Sweat”