Working with the Unbounce Builder

The Unbounce Builder is the area of Unbounce where you'll be assembling your landing pages and Convertables (your "content"). Within the Builder, you can access a mobile-responsive version of your content at any time by toggling over to the mobile-responsive area of the Builder. The mobile-responsive version of your content is also fully customizable, so you can get things looking just the way you want. 

This article will help you out with:

  • Navigating the Unbounce Builder toolbar
  • Making existing content mobile-responsive
  • Managing the mobile-responsive version of your content
  • Keeping track of all page elements (hidden and visible)

Main Features of the Page Builder

In the Unbounce Builder you'll see your content in progress in the main window, the Widget panel on the left, the Toolbar at the top, and the Properties pane on the right. At any time in the 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: 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 content 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 (e.g., external links will not load in Preview).

Undo & Redo: You can click Undo or Redo even after saving — just make sure you save again once you've made changes. If you revert back to an older version of your content using the Version Control feature, Undo & Redo will be reset for that session.

Move Up / Move Down: Move Page Sections up or down within your content.

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 content in your account. Yes, that means you can copy and paste an element from one page or Convertable 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 CTRL+P command on your keyboard.
  • If you’d like to reproduce elements between different accounts/clients, your best bet is to do one of the following:
    1. Open the Unbounce Builder twice, in two tabs within the same browser window. Log in to each account in its respective tab, and copy the Builder element you wish to duplicate from one tab to the other.
    or:
    2. Download the page from one account and upload it to the new account. Note that this method is not available for Convertables.

Widget panel

To add any element to your content just drag it from the Widget panel (found to the left of the Unbounce Builder) onto your page.

Group 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 you 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 content 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 its 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 content automatically to visitors, depending on their browser size, without using a redirect. When Mobile Responsive is set up and enabled on a page or Convertable, any visitor using a mobile device will see the mobile view of your content, 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 content at 600px. This means that any browser window with a viewport of 600px or less will be served the mobile view of the page or Convertable. Any browser with a viewport of greater than 600px will see the desktop version of the content.

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

Starting your mobile-responsive content

You have three options for making mobile-responsive content in Unbounce:

  1. Start from a template: All Unbounce templates are now mobile responsive, so if you're creating a brand new page or Convertable, starting from one of these templates will mean that most of the initial setup work is done for you already.
  2. Update an existing page: You can update any existing content 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 content.
  3. Start from a blank page: As always, you can start with a blank page or Convertable and customize to suit your brand. Build your desktop content as normal — all objects added to your content will appear in your mobile version. Keep a keen eye on the out-of-bound warnings to make sure everything displays properly on your content.

Building Your Mobile-Responsive Content

There's a few things you'll need to customize your mobile-responsive content and start serving it to your mobile visitors: 

Desktop / Mobile View: Click the buttons on the bottom right of the Unbounce 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 content. You can apply the Mobile Layout Assistant to your whole page or Convertable, or to individual page/Convertable sections, which will get you to a much friendlier starting point.



Mobile Layout Assistant is a huge game changer if you're designing your content 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 tab. 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.

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

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

When you select objects within the Builder, the Contents panel will automatically highlight and scroll to that object. 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 section with objects nested within, all nested items will be hidden.

Moving elements between sections and unparenting nested elements

By default, if any element is moved between sections, it will be moved in both views. To move elements outside of a section without changing both views, 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 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.

Out-of-bounds warnings:

You'll see a warning if any of your objects are out of the bounds on your content. 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 Builder.


Show Mobile Versions to Visitors

You may need to manually enable your mobile view (Convertable templates are mobile-responsive by default but only some landing page templates are).

To enable mobile view for your landing page:

  1. Click the "Mobile" on/off toggle button at the bottom right of the Unbounce Builder.
    Show_Mobile_Version__Landing_Page_.gif
  2. Save and publish (or re-publish) your page.

To enable mobile view for your Convertable:

  1. Click the "Mobile" on/off toggle button at the bottom right of the Unbounce Builder.
    Show_Mobile_Version__Convertable_.gif
  2. Save and publish (or re-publish) your Convertable.

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.


Contents

 

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

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

Click an item in the Contents to select it within your content. You can rename objects by double-clicking them.

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


Republish From Within the Builder

If you are editing content 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 republish your page (note: republishing from the Builder is not available for Convertables).



Keep in mind that re-publishing from inside the Builder will also republish your page variants.

If you are editing content that has never been published, you'll need to do so from the 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/Viewing Your Content

Browser_Support_-_Unbounce_Builder.png

Note that the Unbounce Builder doesn't work in Safari when Private Browsing mode is turned on.

Browser_Support_-_Published_Assets.png

Checkmark.pngFull Support Browsers

What does "Full Support" mean? Basically, this means that all product features should function fully and correctly. If something is glitchy and you're using a Full Support browser, get in touch with our delightful Support team so they can investigate and address your issue!

When a specific browser version is not mentioned for a Full Support browser, it is implied that the browser's current version and most recent previous version are fully supported.

X.pngUnsupported Browsers

What does "Unsupported" mean? It means that while you can use these browsers at your own discretion, we can't guarantee that all product features will function fully and/or correctly, and you may run into issues that even the Unbounce Support team superheroes can't fix due to browser limitations.


Glossary

Unbounce Builder: The area inside the Unbounce app where you create and edit your landing page or Convertable

Toolbar: Found at the top of the Unbounce Builder. It's where you can save and preview, amongst other things.

Widget Panel: Found to the left of the Builder. You can find all the elements that you can drag to your content in the Widget Panel.

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

 

Back to: Building Your Landing Pages >>

Was this article helpful?
3 out of 4 found this helpful
Powered by Zendesk