Getting Started With Landing Pages

Follow

So you've created your Unbounce account. Congrats! Now you'll be eager to jump into the Page Builder and start creating your first landing page.

Note

Before you begin, you can ensure you're using an Unbounce-compatible browser to create your landing page by hopping over to Supported Browsers for Building/Viewing Your Content.

The Unbounce app has a wide variety of custom, mobile responsive templates for you to choose from.

In case you're looking for even more variety, you can always browse the wide selection of Unbounce templates in Themeforest. At Themeforest, you can buy and sell HTML templates as well as themes for popular CMS products like WordPress, Joomla and Drupal. Items are priced on the complexity, quality, and use of the file; the total price also includes a Buyer Fee. The site is home to a bustling community of web designers and developers and is the biggest marketplace of its kind.

Once you've scouted out the perfect template (either from Themeforest or another source), there's just a few steps to complete in order to upload the template to Unbounce. By following these steps you'll be able to transfer your template over to Unbounce so you can get cracking!

This article will help you out with:

  • Applying native and third party templates for landing page design
  • Identifying the best template for your use case
  • Creating a new landing page


For a comprehensive tutorial, check out our Improving Your Marketing Campaigns with Landing Pages e-course to get started!


Creating a New Page within Unbounce

When you log into Unbounce, the first thing you'll see is your All Pages screen.

  1. Click "Create New" from the All Pages screen.
    Click_Create_New.png
  2. "Landing Pages" should be selected by default under "Pick a content type".
    Select_Landing_Page.png
  3. Select a template from our assortment of landing page templates varying from lead gen, click-through, ebook, product launch, etc. (or click "Start with a Blank Page" if you prefer).
    Choose_Template_or_Blank_Page.png
  4. Name your page to suit your campaign and click "Start with this Template" to get going!
    Click_Start_With_This_Template.png

Creating a New Page from a Variant

Looking to create a new page from a successful variant? You can do that!

Head to the Page Overview for the page where the variant lives and click the gear icon associated with the variant you want to copy.

Click "Create a New Page from Variant" and then choose which integrations you'd like to copy with it.

Once you click "Create Page" you'll be taken to the Page Overview for your new page. Finally, make any edits you'd like and Publish your brand new page! 


Editing Your Page Info Using Page Overview

The Page Overview gives you access to all the publishing functions for your landing page.

Click the Edit button to head back into the Page Builder and make additional page edits.

Hover over your page’s current title and click Edit Name to change the internal name of the landing page.

Click the Change URL button next to the current URL to select a domain and subdirectory name for your page .

Note

The subdirectory name must be lower case and can contain only letters, numbers, dashes, or underscores.

You can always choose unbouncepages.com if you want to test your page before publishing it to your custom domain.

Click the green Publish button in the upper right of the page to publish your page..

If you make any changes once your page is published, you'll see this reappear as a Republish button.

Note

If you're not seeing changes you've made in the Page Builder on your landing page always make sure you've hit Republish.  If you're still not seeing them, clear your browser's cache so you get the latest published version of your page.

Click the gear menu Gear.png in the upper right to Unpublish or Delete your page.

Adding and Editing Page Sections

Drag and drop the Page Section Widget from the Widget Panel on the left to add a new one.

Use the guides at the Page Section borders to expand or contact. (You can change page width from your Page Properties tab.)

Note: you can only add content to a Page Section. If you try to add content outside a page section the Page Builder won't let you - just add or expand a page section where you want to add the content and place it there.


Working with Page Section Properties

Once you've added or selected (single clicked) a page section you'll see its Properties Pane on the right of the Unbounce Landing Page Builder:

Geometry

You can manually adjust the height of and gap below a page section. Width is set from your Page Properties.

Border Properties

Select a border type, color, and location and apply it to all or part of your page section.  Add a corner radius - click the plus to round only certain corners - and select "Ensure maximum curvature" to apply the roundest corners possible for the size of your page section.

Background Properties

Indicate whether you'd like the background of your page section to stretch to the edge of the page section, or to the edge of the total page.  The background fill options are solid color, image, or gradient.

Color and gradient backgrounds

Choose your colors (for gradient this includes base, top, and bottom)

Choose the opacity of the background

Position and tiling

If you’ve selected an image for your background that is much smaller than the container area, you can opt to set the background as a "Pattern", then select the position and tiling.

 

Image backgrounds

These features will be particularly useful to Themeforest designers or those working with Themeforest templates, as well as users less familiar with custom code who would like to include advanced functions such as parallax. 

Scale to fit container

Our background image formatting options allow you to scale the image to fit its container (in this case a page section), and then adjust it to the width of the container, or to the width of the total page. You can also use this feature to create an image background within a box.
 Scale_to_Fit_Container.png

There are several other background options that you should know about

Fixed background as you scroll (parallax)

Fixing an image background during scrolling (also called parallax), is a visual style that creates a ‘sticky’ background image while the user moves down the page. Parallax is an increasingly popular design element which typically requires custom code. With Unbounce, you can activate parallax at the click of a button.

Note

When you select the parallax feature, you will not notice a change in the page builder canvas. You can view the parallax effect through the page preview, and once the page is published.

Scale_to_Fit_Page.png

Note

The parallax feature is not currently available in mobile view

Color overlay and opacity

Color overlay allows you to add a ‘tint’ effect to your background image using a color of your choice. A color overlay of 100 will completely saturate the page section with your selected color.

Color_Overlay_and_Opacity.png


Managing Your Page Properties

If you are looking to edit your page's high-level data, page properties is where you want to be. By adjusting your page properties, you can make sure that visitors don't stumble across your page by accident through search engines, and that supporting information about your page is available so that viewers can verify that they've reached a credible page.

You'll see the Page Properties section in the centre of three tabs on the right of your Page Builder. The features in this area are critical for cooking up some custom elements on your page, like Geometry, Meta Data, Background Properties, and more.

This article will help you out with:

  • Controlling the high level look of your page (dimensions, background, etc.)
  • Controlling how your page interacts with search engines

Geometry

You can edit the width and top margin of your landing page.

Title & Meta Data

You can change the title of your page that visitors will see, add keywords (separated by a comma), and add a description of your page. 

Note: Checking "Hide my Page from Search Engines" prevents Google from indexing your page. This is super handy if you're running only PPC campaigns.

Background Properties

You can select a solid color, gradient or image for your background and then choose its opacity. If you choose an image you can also choose its position and tiling on your page.

Default Text Style

You can set your default text and link colour.


Glossary

Page Overview: gives you access to all the publishing functions for your landing page and integrations with other marketing tools. It's the page where you'll see the stats and status for a particular landing page.

Page Sections: where the content on your landing page lives. You can't add an element without first creating a Page Section in the area where you'd like to place the element.

Page Section Properties: where you'll see the properties (geometry, border properties, and background properties) of the page section that you clicked. 


Next Up: Check out Working with Landing Pages!


Was this article helpful?
41 out of 65 found this helpful