This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Latest update: We’ve got more great news! Unbounce has added several new design features, giving Unbounce users access to some very powerful design tools. The new features are:
- Parallax Scrolling
- Color Overlay
- Image Scale to Fit Containers
These updates will allow Unbounce customers to add these features without using any third-party code workarounds. All of the operations added in this update can be performed quickly and easily — web designers of all stripes will be able to take advantage of the new features in Unbounce.
We’ve updated the post again to reflect these recent changes. We’ll show you where to find the features, and how to use them. You can learn more about the latest updates at the end of Part 2 below!
Update: Big news! Unbounce landing pages are now mobile-responsive, which means designers can create and sell templates that will automatically adjust to any device. This is Unbounce’s biggest product update to date and thousands of marketers will be looking to upgrade their landing pages so that they're mobile-responsive. In other words, they’re going to need new templates ASAP.
We've updated this post to walk you through what mobile responsive is and how you can design a mobile-responsive template in Unbounce. You can jump to Part 4 below if you've already mastered Unbounce and are ready to start designing for mobile!
In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.
Unbounce was built to solve a very specific problem; to empower professional marketers to build beautiful and high-performing campaign-specific landing pages on their own. That is, without the help of developers or – here’s where templates come in – designers.
Landing pages are standalone web pages that serve a specific, pre-defined goal for marketers. If marketers are trying to sell a product or service, they may use a landing page to educate the user before directing them to the pricing page. If they’re promoting a new ebook, they’ll need a landing page to gather contact information from their visitors before handing over the file. For both of these campaigns (and almost every campaign!) simply sending visitors to their homepage – instead of a dedicated landing page – would spell marketing failure.
In short, landing pages are designed to push users toward a specific, conversion-centered goal.
Who Uses Unbounce?
Mostly experienced professional marketers. They’re constantly running marketing campaigns and cannot/do not want to rely on their internal developers to build a unique landing page for every campaign. About a third of our customers are part of a company’s marketing team, another third work at a marketing agency and the remaining third are entrepreneurs.
How Are Marketers Using Unbounce?
If Unbounce customers don’t have the design chops to feel comfortable building a page from scratch, they will start from a template or have their designer create a template for them. After they’ve customized a template to suit the needs of their campaign, customers often use the same template for every similar campaign they run.
A/B testing is a core feature of Unbounce. Users can duplicate their finished page, make one change to the design or copy of the new page, split traffic between the two pages and use Unbounce’s reporting to determine which version converts better. A/B testing allows customers to constantly improve their landing pages and marketing campaigns.
Designing Unbounce Landing Pages
This guide will help you design and build a high-converting landing page for the Unbounce platform.
We encourage template authors to sign up for Unbounce’s free account and email email@example.com to let them know you’re designing templates for resale. Emailing our team will ensure that your account remains free if you exceed the 200 unique visitors normally allowed on the free plan.
What We’ll Cover
Let’s quickly run down what we'll cover in this tutorial.
- Designing Unbounce Landing Pages
Part 1: What’s in a Landing Page?
- Homepages vs. Landing Pages
- Anatomy of a Landing Page
- Lead Gen vs. Click-through Landing Pages
Part 2: Design Guidelines
- Design from an Unbounce grid
- Font Options
- Sample Landing Pages
- Scale to Fit Container
- Parallax Scrolling
- Color Overlay and Opacity
- Elements to avoid
- Part 3: How to Build a Landing Page in Unbounce
Part 4: Making Your Landing Page Mobile Responsive
- What is mobile responsive?
- How does it work in Unbounce?
Part 5: Submitting Your Template to Themeforest
- Your Essential Checklist
- Themeforest Approval Requirements
- Downloading a Page
- Packaging Multiple Layouts Together
Part 1: What’s a Landing Page?
Homepages vs. Landing Pages
Let’s compare the Webtrends homepage (left) with one of their landing pages (right). The homepage is beautifully designed and allows a visitor to accomplish a number of tasks. There are five concepts presented in the main promo area (via a rotating banner), four supplementary messages below that, and a total of twenty eight interaction points.
However, marketing campaigns should be laser-focused, driving users to one single action. When designing a landing page to be used in marketing campaigns, the concept of Attention ratio needs to be considered. Attention Ratio (AR) is defined as the ratio of interactive elements (links/leaks) on the page, to the number of campaign conversion goals (which is one). On this homepage, the attention ratio is 28:1 meaning that there are twenty seven distracting actions and one desired action.
Compare the homepage with one of the lead generation landing pages (right). On the landing page, there is only one action to perform; users are asked to fill out the form and click the CTA button to complete the conversion. This produces a much more focused experience for visitors, keeping the attention ratio at 1:1.
Anatomy of a Landing Page
There are five must-have core elements on any landing page, which can be broken down further into a more detailed list of building blocks:
Your Unique Selling Proposition (USP)
- The main headline
- A supporting headline
- The hero shot (images/video showing context of use)
The benefits of your offering
- A bullet point list summary of benefits
- Benefit and features in detail
- Social proof (“I’ll have what she’s having”)
- A single conversion goal – your Call-To-Action (CTA) (with or without a form)
The diagram below represents a sample layout. The order and location of the 5 elements will be determined by the story you want to tell your visitors, and may vary from this example. But it’s helpful to look at this for reference as we walk through each element.
Lead Gen vs. Click-through Landing Pages
There are two main types of landing pages: lead generation (lead gen) and click-through.
Lead Gen Landing Pages
Lead gen pages are used to capture user data, such as a name and email address. The only purpose of the page is to collect information that will allow for further communication with the prospect at another time. A lead gen page will contain a form along with a description of what the visitor will get in return for submitting their personal data.
Click-Through Landing Pages
Click-through landing pages have the goal of persuading the visitor to click through to another page.
Typically used in ecommerce funnels, they can offer details about a product or service in order to “warm up” a visitor and bring them closer to making a purchasing decision. When the prospect clicks through to the following page, they’ll be primed with all the information they require and will be much more likely to buy.
Part 2: Design Guidelines
Design From an Unbounce Grid
At Unbounce we use a standard grid system that utilizes 12 columns, making a 940px container. The example below breaks down the column combinations available. We recommend you use the Unbounce grid for the best landing page design results.
Unbounce offers a standard set of typefaces within its landing page builder, as well as a Google Web Fonts set. We recommend that you use the following typefaces when designing for Unbounce.
Google Web Fonts
Below is a list of Google Web Fonts available in Unbounce, please use/download only the following fonts from the Google Web Fonts Library.
- Abril Fatface
- Dancing Script
- Droid Sans
- Gravitas One
- Josefin Sans
- Josefin Slab
- Old Standard TT
- Open Sans
- PT Sans
- PT Serif
- Playfair Display
Below is a list of the standard fonts available in Unbounce.
- Courier New
- Lucida Sans Unicode
- Times New Roman
- Trebuchet MS
Sample Landing Pages
Every landing page has one goal in mind; moving visitors to perform one call-to-action, such as completing a form or clicking-through to another page. Below you will find a selection of the most common types of landing pages.
Both simple minimalist designs as well as fully styled examples are shown.
NEW: Complicated Design Made Simple
Tapping into popular web design trends can help set your landing page apart from others, but the implementation can be difficult to code. To allow Unbounce users to take advantage of some recent and effective design trends, we have built new tools into the Unbounce builder. You can now integrate features like parallax scrolling into your landing page with the click of a button without having to rely on third-party code.
Scale to Fit Container
You’ve scoured the internet for the perfect image for your page. You add it to your section and it is larger than the container. There is an easy fix for this in Unbounce.
Once you have added the image to your page section, just select Stretch to fit page section. If you would like it to fill the whole page you can select Stretch to fit page.
To create a fixed image that remains in place while visitors scroll down the page (parallax), just select the “Fixed background as you scroll” checkbox. A design element that can be very impactful on landing pages, parallax scrolling usually requires custom code. Unbounce allows you to add this feature with the click of a button.
Note: This feature will not be displayed when visitors are in mobile view.
Color Overlay and Opacity
Using the color overlay feature, you’ll be able to add tints to your background images that bring a specific color of your choosing to the foreground.
You can adjust the transparency of your images by selecting the Opacity feature. A color overlay of 100 will permeate your background with your chosen color completely.
Elements to Avoid
To ensure your page still looks and functions as intended after it’s shared, please avoid using the following:
- Horizontal or multi-column layout forms (Forms must be vertically stacked)
- Galleries, carousels or animated elements
- Custom overlays
- Gradients with more than two stops
- Drop shadows that can’t be cut up as part of an image
- Text shadows
- Designing liquid layouts that expand with the browser (and ensure your page can be center-aligned)
- Layouts that are not center-aligned on the page.
- Check out the Unbounce template library for inspiration
- Read the The Ultimate Guide to Conversion Centered Design or Designing for Conversion - 8 Visual Design Techniques to Focus Attention on Your Landing Pages by Oli Gardner.
- Sign up for The Landing Page Ecourse
Part 3: How to Build a Landing Page in Unbounce
How to Build a Landing Page
The translation of a design into a landing page on the Unbounce platform should be executed in a pixel perfect manner. In the example below, the landing page is structured by page sections and columns using the standard Unbounce grid. Export all of your image assets in .png or .jpg format before you begin.
Start With a Blank Page
When building a landing page from a photoshop file, we recommend starting from a “blank page” on the Unbounce platform.
Using your original photoshop file as your guide, set the width of the page in the page properties pane. Assign the background color to the landing page. Upload a background image if necessary. Set the default text color to be the most commonly used text color in your design. Assign the link colour to complete your page properties.
Page Sections and Tree Structure
Now it's time to structure the landing page. Drag and drop page sections onto your page. Typically you would add one page section for each clearly defined vertical portion of your design. For instance, you could add page sections for: the header, content area 1, content area 2 etc., the footer. Then you can set the height of each section according to the measurements in your photoshop file. Once all page sections have been set up, open the tree structure menu on the left, and name each section accordingly. This will make it easier to modify and organize the landing page.
Every new element that is created within the landing page will appear in the tree structure, so make sure you name each new element as it’s added, for future reference and easy modification.
You can assign a background colour or gradient to a page section, or you can upload an image to use for your background. Images can also be tiled. In the example below, a background texture was uploaded for the main area, and another for the darker strips above and below.
Images and Video
Images that you've cut up and exported from Photoshop can now be uploaded and added to the landing page. Drag and drop images using the image tool on the left toolbar, and position them on the landing page according to your photoshop design
Once positioned, remember to name them in the tree structure. To place video on your landing page, use the video tool from the left toolbar and paste your YouTube/Vimeo embed code in the window that pops up. Resize and position it according to its intended size and aspect ratio.
Drag and drop the text tool onto the page. Position each text block according to your photoshop file and insert your copy using the text editor below. You can adjust your copy, font, size, line-height and color to match your photoshop file.
You can use boxes as containers for elements such as forms, images or text. Modify stroke, color, and corner radius for the desired visual result, and even turn boxes into circles if necessary.
Drag and drop your form element onto the landing page. You will be prompted with the form builder overlay window. Choose pre-made fields or create your own. When using the pre-made email field, turn on the “Validate as Email Address” option. Once complete, click to select the form and stylize by adjusting spacing, fonts, colors, width and height in the properties pane on the right.
Stylize buttons by color, gradient or by adding a custom image. Rollover states can also be set. Edit the button text and modify the font settings to match your design.
If you have a form on your page, a confirmation page will be triggered when the form is filled out. You can access the confirmation page tab in the top-left corner of your page.
Modify the design of the confirmation page to match the design of your landing page. This will reassure users that they have followed the correct path and provide a seamless experience from landing to post-conversion
Set Conversion Goal
Every landing page needs a conversion goal. You can set this by clicking on the “Conversion Goal” tab in the properties pane. If you have a form, it should be set as “Form Submission”.
Once all your landing page elements are on the page, simply drag to reposition the elements to match your photoshop file and create the final layout. Use preview mode to do a final review of your landing page.
NEW – Part 4: Making Your Landing Page Mobile Responsive
What is Mobile Responsive?
Mobile Responsive in Unbounce allows you to serve either a mobile or desktop version of your page automatically to visitors depending on their browser size without using a redirect. When Mobile Responsive is set up and enabled on a page, any visitor using a mobile device will see the mobile view of your page, while anyone using a desktop device will be served the desktop view.
How Does it Work in Unbounce?
Unbounce sets the "break point" for your Mobile Responsive pages at 600px. This means that any browser window with a viewport of 600px or less will be served the mobile view of the page. Any browser with a viewport of greater than 600px will see the desktop version of the page.
Note: retina displays, like the iPhone, are technically larger than 600px due to their high resolution, but the viewport behaves like smaller browser window, so retina phones will show the mobile version of the page
Building Your Mobile Responsive Landing Page
There's a few things you'll need to customize your mobile responsive page and start serving it to your mobile visitors:
Desktop / Mobile View
Click the buttons on the bottom right of the Page Builder window to toggle between Desktop and Mobile view.
You can resize the text from your desktop version to fit your mobile version. Select the text box and use the scale bar on the upper right of the Properties Page. The text box itself can also be resized separately on desktop and mobile.
Note: Any adjustments to font, font size, format or line height made from the Text Editor (instead of the scale bar) will affect both views.
Forms and Buttons
Forms and buttons will be the same across your mobile and desktop view. You can hide a button on one view and show a different one in the other view. Your form must be consistent across both versions though.
Hiding / Displaying Objects
If you have objects you'd like to hide in either mobile or desktop view, click the object, then click the Visibility icon in the Properties Panel.
You can also control visibility by clicking Page Contents on the lower left of the Page Builder.
When you select objects within the Page Builder you'll see them highlighted in your Page Contents Panel. You'll see an eye when the element is visible or a solid circle if it's not. Click to toggle between the two.
Note: If you opt to hide a box or page section with objects nested within, all nested items will be hidden.
Moving Elements Between Page Sections and Unparenting Nested Elements
By default, if any element is moved between page sections, it will be moved in both views. To move elements outside of a page section without actually changing page sections, hold down the Command key (mac) or Control key (Windows) while you drag an element. You'll see a reminder of this anytime you move an element from one page section to another without holding down Command or Control.
If multiple elements are nested in a box, moving those elements in one view, will also move all elements in the other view. You can also use Command/Control+click to unparent an item in one view and move it independently of the other view.
Tip: remember that you can also shift+click to move more than one element at a time
Out-of-Bounds warnings: You'll see a warning if any of your objects are out of the bounds of your landing page. Just move the object within your page boundaries, or hide it, to remove the warning. You can also disable out-of-bounds warnings using the checkbox in the upper right of the Page Builder.
Show Mobile Version to Visitors
When you're all done laying out your Mobile page, go to the Properties Pane on the right and check Show Mobile Version to Visitors to enable the mobile view. Then save and publish (or re-publish) your page.
Part 5: Submitting Your Template to Themeforest
Your Essential Checklist
- Verify Page Properties
- Review Tree Structure
- Review Images and Layout
- Review Copy and Fonts
- Test Links
- Test Form and Button
- Review & Set Conversion Goal (if your page has a form)
- Review desktop and mobile form confirmation pages (if your page has a form)
- Verify that the "Show Mobile Responsive" option is checked (if your page has a mobile responsive version)
- Publish Page
Note: Publishing your page allows you to provide a live preview link in template marketplaces.
ThemeForest Approval Requirements
A landing page template should be customizable. The end user should be able to easily swap out any hero shot images or photographic backgrounds. To ensure that the quality of your landing page remains intact and that your page passes approval by ThemeForest, please follow these guidelines:
- Do not edit the source of a text element
- Leave page guides and section guides turned on
- Margins in page sections should be used to create gaps, not blank page sections
- Placeholders are images and easy to swap out
- Any custom stylesheets or Javascrips need to begin with a comment including the author’s contact info and instructions for support
- Your tree structure can have no broken elements
- A form’s button must be properly attached to the form
- If your template includes a form, the Conversion Goal should be set to “Form Submission”
- If your template has a mobile responsive version, the "Show Mobile Responsive" option should be checked
Downloading a Page
Once you’ve built a beautiful, easy to customize landing page template, you’ll need to download it before you can share it with (or sell it to) the world. To download a page, go into the page overview (the section that lists all your page’s variants and stats), find the gear/cog icon in the top-right and click “Download Page”.
A dialog window will appear, which will email you when the file is ready to download. The file will have a “.unbounce” extension. Once you’ve downloaded your file, feel free to rename it as necessary, but leave the “.unbounce” extension intact.
Packaging Multiple Layouts Together
Want to package multiple layouts of the same template? Please steer clear of using page variants for packaging multiple layouts together.
Instead, create each layout as a separate page and download each layout separately. This will ensure you’ve got a functional preview link for each layout and it will reduce confusion from the downloader, as variants are used specifically for A/B testing.
I hope this gave you a thorough introduction to Unbounce and authoring mobile-responsive Unbounce templates for sale on marketplaces such as ThemeForest. There's plenty more to learn, however, so if you have any questions please feel free to ask away in the comments.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post