← BACK

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. You can also set the background fill color in the Properties Panel of the Container element.

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.

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 them individually inside the Container in Canvas View.  You can’t, however, move them outside the Container bounding box. Nor can you multi-select them with the elements outside the Container in the same scene.

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 bottom 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 under the Container element in the Layers panel. If not, select the Show All checkbox and drag any layers from the top of the list and place them underneath 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 under the image. See also Elements and Layers.

 

 

Updated May 10, 2019