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.
Save: you can save your work at any time but make sure to save prior to exiting the Builder otherwise your changes will be lost.
Version Control: restore back to an older version of your page by clicking “Last saved…” right beside the “Save” button.
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. However, if you revert back to an older version of your page using the Version Control feature, Undo & Redo will be reset for that session.
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.
- 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.
- 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.
(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:
- 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.
- 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.
- 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.
Mobile Layout Assistant: This feature is the best way to get started on customizing your mobile responsive page. You can apply the Mobile Layout Assistant to your whole page, or to individual page sections, which will get you to a much friendlier starting point.
Mobile Layout Assistant is a huge game changer if you're designing your page from a blank template. The feature works best if you apply it first, then go ahead with the detail work. Try to avoid making changes before you apply layout assistant, as this can cause minor reparenting issues.
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.
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.
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, the Page Contents Panel will automatically highlight and scroll to that object. 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.
Remember that you can also shift+click to move more than one element at a time.
You'll see a warning if any of your objects are out of the bounds on 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 on the upper right of the Page Builder.
Show Mobile Versions to Visitor
If you've started with a mobile responsive template, you're all set (and this will be pre-checked, but if you're updating an existing 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.
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.
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.
Republish From Within the Page Builder
If you are editing a page that has already been published, saving your changes will activate the re-publish button, so that you don't have to leave the builder to re-publish your page.
Keep in mind that re-publishing from inside the page builder will also republish your page variants.
If you are editing a page that has never been published, you'll need to do so from the Page Overview so that you can set the URL, integrations and page traffic weight (if you are running an A/B test).
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.
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). We recommend users install and use one of our currently supported browsers, all of which are free. Your choices are:
- Firefox, which you can download from here:
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.
- Google Chrome, available here:
Another alternative to IE
Rest assured that the pages that Unbounce publishes work fine in all reasonably current browsers including IE.
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.