Working With the Page Builder

The page builder is the area of Unbounce where you'll be assembling your landing pages. Once you're in the page builder working on your desktop landing page, you can access a mobile reponsive version of your page at any time by toggling over to the mobile responsive area of the page builder. The mobile responsive version of you page is also fully customizable, so you can get things looking just the way you want.

This article will help you out with:

  • Navigating the page builder tool bar
  • Making existing landing pages mobile-reponsive
  • Managing the mobile-responsive version of your landing page
  • Keeping track of all page elements (hidden and visible)

Main Features of the Page Builder

In the Unbounce Landing Page Builder you'll see your landing page in progress in the main window, the widget panel on the left, the toolbar at the top, and the properties panes on the right. At any time in the Page Builder you can click an object once to bring up its properties on the right of the interface, or double click to edit it further.

Toolbar

Save: make sure to save prior to exiting the Page Builder.

Preview: this will open in a new window and not all third party elements (outside Unbounce) will display properly in Preview.

Undo & Redo: click these, even after saving, just make sure you save again once you've made changes.

Move Up / Move Down: Move Page Sections up or down your landing page.

Bring Forward / Send Backward: Move objects forward and backward relative to surrounding objects.

Duplicate: select (single click) an object and click duplicate.

Delete:  select (single click) an object and click delete.

Copy and Paste: This feature enables you to copy and paste elements between pages in your account. YES that means you can copy and paste an element from one client page to another! Easy peasy. Below are some important notes about using this feature:

Copying page elements

  • You can select an element to copy either by clicking the Copy icon, or by using the ctrl+C command on your keyboard.
  • Once an element is copied the Copy icon will flash ‘Copied!’ to confirm the action. (We get so excited about these things).
  • You can multi-select elements by holding the “Shift” key and selecting items to be copied. The more the merrier!

Pasting page elements

  • The copied item can be pasted either by clicking the Paste icon, or by using the crtl+P command on your keyboard.
  • When pasting an image from one client account to another, you may experience a slight delay. This happens because the image needs to be uploaded into the image library of the new client, saving you time if you want to use the image again in the future.
  • You cannot paste elements between accounts. If you’d like to reproduce a page in a new account, your best bet is to download the page from the current account and upload it to the new account.
  • If you do not select the area for the element to be pasted, it will appear at the top of your first page section. Don’t have a page section? Don’t worry, we’ll go ahead and create one for you at the same time as the paste.
  • If you’re pasting a whole page section, the section will scootch in where you’ve clicked and move the rest of the page sections down.
  • If you’re pasting a whole page section and don’t specify it’s new place, it’ll pop down to the very bottom of your page. All polite-like.

Widget panel

(Found on the left of the Page Builder) To add any element to your page just drag it from here onto your page.

Group page elements to move together

To select multiple objects, simply hold down the Shift key and click on each object you want to select. You should see a selection box surround the objects and can then move them as one group. 

Group page elements to duplicate

While you cannot yet duplicate a selection of multiple objects, you can achieve the same functionality by adding a box element to your page and dragging the objects you wish to duplicate into this box.  These other elements (text, image, buttons etc.) will become children of the box – which means if you duplicate the box, all of it’s contained elements will be duplicated as well.


Using Mobile Responsive

What is mobile responsive

Mobile Responsive 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?

We set 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.

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 show the mobile version of the page. 

Starting your mobile responsive landing page

You have three options for making a mobile responsive page in Unbounce:

  1. Start from a template: All Unbounce templates are now Mobile Responsive, so if you're creating a brand new page, starting from one of these templates will mean that most of the initial set-up work is done for you already.
  2. Update an existing page: You can update any existing pages to be mobile responsive. The objects from your desktop will appear in your mobile version but you'll need to arrange them. Keep a keen eye on the out-of-bound warnings to make sure everything displays properly on your page.
  3. Start from a Blank Page: As always, you can start with a blank page and customize to suit your brand. Build your desktop landing pages as normal - all objects added to your page will appear in your mobile version. Keep a keen eye on the out-of-bound warnings to make sure everything displays properly on your page.

Building Your Mobile Responsive Landing Pages

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.

dm.png

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.

Any adjustments to font, font size, format or line height made from the Text Editor will affect both views.

scale.png

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.

vis.png

You can also control visibility by clicking Page Contents on the lower left of the Page Builder.

pc_button.png

 When you select objects within the Page Builder you'll see them highlighted in your Page Contents Panel. You'll see an eye responsive_eye.png when the element is visible or a solid circle responsive_circle.png 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.

pc_selected.png

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. 

shiftclick.png

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 n the upper right of the Page Builder.

oob.png

 


Show Mobile Versions to Visitors

When you're all done laying out your Mobile page, go to the Page 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.

mr_check.png

Modifying an existing page to be mobile responsive

If you have a page that pre-dates the release of Mobile Responsive, it can still be made responsive. The concepts described above will still apply, but the initial adjustment of the mobile view for your existing pages will likely take a bit longer than if you create a new page with Mobile Responsive design in mind (or start from a new Mobile Responsive Template). 

Tracking mobile vs. desktop visitors

Currently, Unbounce doesn't differentiate between mobile and desktop when counting visitors and views. But you can utilize Google Analytics then segment and filter those stats to track and compare mobile vs. desktop visits to your page. Learn how to add Google Analytics to your Unbounce pages here. And check out this post in our Community for tips on segmenting and filtering your data in GA.

 


What is "Include 'Viewport' Meta Tag for Mobile"?

Unbounce now allows you to include a 'viewport' meta tag for mobile pages, but many of you are likely wondering exactly what this means and how you can most effectively use this new feature.

If your leads are likely to visit your landing page using a mobile device, you can use one our mobile templates and "include 'viewport' meta tag for mobile" will be automatically selected.

If you're starting a mobile page from scratch, make sure to select "include 'viewport' meta tag for mobile."

Including this tag ensures that your page is properly sized for mobile viewing.

There's no need to use this option if you're working on a desktop landing page.

What does including the 'viewport' meta tag do?

Enabling this option simply includes the following HTML on your published pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Page Contents

 

The Page Contents pane is a tree structure that shows the hierarchical layout of your landing page in terms of the elements on the page - you'll see all the objects on your page nested within page sections and boxes.

To access your Page Contents pane click the small arrow at the far left, or the Page Contents button at the bottom of the Unbounce Landing Page Builder.

Click an item in the Page Contents to select it on your page. You can rename objects by double clicking them.

Click the arrow on the right of Page Contents section to close the pane.


Supported Browsers for Building Your Unbounce Pages

All pages created in Unbounce are fully compatible with IE when you publish them (along with Firefox, Safari and Chrome). However, our page management environment is not currently compatible with IE.

While support for Microsoft's Internet Explorer is something we definitely want to add in the future, we've found that most of our users prefer alternative browsers, so we have focused our efforts on supporting those browsers (namely, Firefox, Chrome and Safari).  Until we add support for Internet Explorer, we recommend users install and use one of our currently supported browsers.  Your choices are:

  1. Firefox, which you can download from here:
    http://www.mozilla.com/en-US/

    It's a quick download, and easy to install. Whenever you wanted to manage your pages in Unbounce, you would use Firefox instead of IE.

  2. Google Chrome, available here:
    http://www.google.com/chrome
    Another alternative to IE

  3. If you must use Internet Explorer, try installing Google Chrome Frame:
    http://code.google.com/chrome/chromeframe/

    Google Chrome Frame is an IE plugin (still in beta) that replaces IE's default HTML engine with Google's. This allows you to still launch IE.

All of these options should work fine, and are mostly a matter of personal preference. Again, please note that the published pages you create with Unbounce will work fine in all browsers including IE.

Unfortunately, when developing a complex web application like Unbounce (specifically our WYSIWYG landing page editor), we had to choose between speed of development and browser support. In order to increase our product capabilities to support feature demand we chose to leave IE out of the process for the time being.

Rest assured that the pages that Unbounce publishes work fine in all reasonably current browsers including IE.

Firefox and Chrome are both free downloads and you can continue to use IE for your normal browsing while switching to one of the others to use Unbounce for work purposes.

We understand this isn't a perfect answer, but we have found that it's currently the best way to maintain and progress rapidly with the product for the bulk of our customers.


Glossary

Page Builder: the page inside the Unbounce app where you create and edit your landing page

Toolbar: at the top of the Page Builder. It's where you can Save and Preview, amongst other things.

Widget Panel: at the left of the Page Builder. You can find all the elements that you can drag to your page in the Widget Panel.

Properties Panel: at the right of the Page Builder. You can find Page Properties here, as well as properties of individual elements. This is also the area where you go to optimize your landing page for SEO.

 

Back to: Building Your Landing Pages >>