← BACK

What is a Container?

Containers are special invisible elements in Studio that allow you to group other elements and treat them as a single layer in Canvas View. Most commonly, Containers are used to combine image assets with the Button elements as described in Add buttons and URLs. You can then resize or place them at a specific location on the screen while preserving their relative positions inside their Containers.

Depending on your demo design, you can also use a Container to toggle between multiple images, set a consistent background color throughout the demo, or simply use it as a base layer to work off, for example, when you are not using a full-screen image or video in a scene. 

In Canvas View, Containers appear as bounding boxes with a yellow border. In the Layers panel, they appear as drop-down menus that you can expand to add or see their elements.

How to Create a Container

There are three ways to group multiple elements within a scene to create a container:

  1. Simply click and drag within the canvas view over the entirety of the elements you’d like to group, right click over them to open up the context menu and select group (or use the shortcut command+g/ control+g). 
  2. Hold Shift while selecting the elements in the Layers panel you’d like to group, right click and select Group (or use the shortcut command+g/ control+g). 
  3. Click and drag a Container element from the Elements panel. Manually group the desired elements by clicking on the drop down arrow of the container in the Layers panel and dragging the desired elements into the Container.  

All of these ways to group will create a new container element at the top of the layers panel. This means that this element exists above all additional elements beneath it.

Note: Simply dragging other elements inside a Container bounding box on the canvas will not automatically group them. Instead, you need to drag them inside the Container drop-down list in the Layers panel as shown in the video below. For step-by-step instructions, see Add Buttons and URLs.

After you place elements inside a Container in the Layers panel, it becomes a bounding box for the elements within it on the canvas. If you resize the Container, the elements within it will get resized too. You can move and resize elements individually inside the Container in Canvas View but you cannot move them outside the Container bounding box. You can also create a Container within a Container by grouping the container and additional elements. 

What You Need to Know

Here’s what you need to keep in mind when working with Container elements:

  • Any elements that you place inside a Container using the Layers panel are automatically resized relative to the size of the Container. They also retain their relative original placement on the screen.

    For example, in the screenshots below, the green image and semi-transparent App Store Button box are initially placed at the bottom of the screen. When moved inside the purple Container, they got resized but placed in the same location relative to each other and position on the screen. You then need to place and resize them as desired within the Container.

  • To avoid rearranging and resizing elements inside a Container, the easiest and most efficient way to use a Container is to resize it to fit the entire screen. Then you can add other elements and position them as shown below.
  • Since the Layers panel displays the frontmost layer on the screen at the top of the list (see the image in Elements and Layers), if you resize a Container to fit the entire screen, always make sure that any layers, such as gestures, are on top of the container layer on the canvas.
    This means all interactive elements must be listed above the Container element in the Layers panel. If they are not, drag any layers from the top of the list and place them above the Container.
  • Similarly the order of layers inside a Container matters, too. Always make sure that interactive elements like Buttons are on top of the image in Canvas View and on the screen. This means that in the Layers panel, these interactive elements are listed above the image. See also Elements and Layers.

 

 

Was this helpful?

Updated August 15, 2019