The ThemeForest Author’s Guide to Unbounce Templates

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
• Transparency
• 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.

Introducing Unbounce

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.

Since Unbounce’s primary user-base is marketers who may not be familiar with robust design tools, the landing page builder is designed to be easy to use, with a WYSIWYG, drag and drop interface. That said, skilled designers can also feel equally at home; it’s possible to add custom JavaScript, CSS and HTML widgets and fine-tune page elements to the pixel.

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 templates@unbounce.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
  • Inspiration
• 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:

1. Your Unique Selling Proposition (USP)
   • The main headline
   • A supporting headline
2. The hero shot (images/video showing context of use)
3. The benefits of your offering
   • A bullet point list summary of benefits
   • Benefit and features in detail
4. Social proof (“I’ll have what she’s having”)
5. 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.

Lead gen flow

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.

Font Options

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
• Allan
• Arvo
• Cabin
• Dancing Script
• Droid Sans
• Gravitas One
• Josefin Sans
• Josefin Slab
• Lato
• Lobster
• Merriweather
• Old Standard TT
• Open Sans
• PT Sans
• PT Serif
• Playfair Display
• Quantico
• Ubuntu
• Vollkorn

Standard Fonts

Below is a list of the standard fonts available in Unbounce.

• Arial
• Courier New
• Georgia
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

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. 

Parallax Scrolling

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.

Inspiration

1. Check out the Unbounce template library for inspiration
2. 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.
3. 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.

Page Properties

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.

Background

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.

Text

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.

Boxes

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.

Forms

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.

Buttons

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.

Confirmation Page

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”.

Final Layout

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.

Resizing Text

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
• When creating your help document for the template, please include this link to the usage instructions. If you have included any custom Javascript/CSS in your template, you should include detailed instructions for how to use or update the scripts and functionality.
  

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:

1. Do not edit the source of a text element
2. Leave page guides and section guides turned on
3. Margins in page sections should be used to create gaps, not blank page sections
4. Placeholders are images and easy to swap out
5. Any custom stylesheets or Javascrips need to begin with a comment including the author’s contact info and instructions for support
6. Your tree structure can have no broken elements
7. A form’s button must be properly attached to the form
8. If your template includes a form, the Conversion Goal should be set to “Form Submission”
9. 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.

Conclusion

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.