1. Documentation
  2. Working in the Classic Unbounce Builder
  3. Designing your Classic Builder Page

Hiding and Displaying Objects in the Classic Builder

Follow
Avatar
Samantha Tsang
Last Updated

Let's say there are certain elements you want to appear on the desktop version of your landing page, and not the mobile version. 

One way to set this up would be through hiding elements. This article will explain how to hide or show elements in the Classic Builder. 

Hiding and Displaying Elements with the Properties Tab 

  1. Click the element on your page in the Classic Builder. 
  2. From the Properties tab, click the Visibility icon:
    Arrow pointing to the Properties Panel in the Classic Builder, and the eye emoticon.

Clicking this button will hide the element from view. Click the Visibility icon again to have the element reappear. 

Hiding and Displaying Elements with the Contents Tab 

You can also control visibility with the Contents Panel on the lower left of the Classic Builder.

  1. Single-click the element you want to hide. 
  2. From the bottom-left corner of the Classic Builder, click the Contents panel.
    • When you select objects within the Classic Builder, the Contents panel will automatically highlight and scroll to that object.
  3. 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:
    Annotated image tagged with numbered steps on navigating to the Contents panel.

Note:

All nested items will be hidden if you opt to hide a box or section with objects within it.

Moving Elements Between Sections 

By default, if you move any element between sections, it will change its position in both the desktop and mobile versions of your page.

To move elements outside of a section without changing both views, hold down the Command key (Mac) or Control key (Windows) while you move an element. 

Pro-tip:

Hold down the Shift key to select multiple elements at a time. 

Out-of-bounds warnings

You'll see a warning if any of your objects are out of bounds on the mobile version of your landing page. 

To remedy this, move the object within your page boundaries (while holding down the Command key (Mac) or Control key (Windows). Or, hide the element to remove the warning.

You can also remove out-of-bounds warnings using the checkboxes within the Guide Settings on the upper-right-hand of the Classic Builder:

Gif demo of a user remvoving the image from out-of-bounds; the image was highlighted in red. Once in-bounds, reverts back to original color.

Be sure to Save and Publish your page when you're happy with these changes.  

Related articles