Create a Container

You can organize Style functionality in a way that fits your individual needs by creating containers and moving Style controls (such as panels, tabs, buttons, etc.) to those containers.

PREREQUISITES:

  • You must be assigned to a developer profile (i.e., developer (built-in)). See Create a Profile for more information on creating a developer profile.
  • You must be viewing the developer profile you've been assigned to in order to see any of the developer tools and functionality. See Switch Customization Profiles for more information.
  1. Select the Plugin and the Profile you want to customize. See Select a Plugin to Customize for more information.

In addition to the Controls and Layout Strings panels, there is a Layout panel added to the top of the page. The Layout panel is the developer view of the Controls panel. It allows you to view all the controls at the same time and how it will be laid out on the page.

You can use the Controls or Layout panels to insert, move, or remove containers, tabs, panels, or accordions.

  1. From the Controls or Layout panels, select the control you want to add a container after or in (such as a container, panel, tab set, etc.).
  2. In the Control Details panel, click Insert Container.

When you click Insert Container, a container is added after the selected control.

Containers can include controls (such as panels, tabs, buttons, etc.) within them.

  1. Rename the container's Control Id in the Control Details panel to help you easily differentiate between multiple containers and what they include. Such as Container1, ContainerLeft, ContainerLocation.

  1. Enter a width for the container.

The Widths field allows you to set breakpoints for devices that users may use, such as phones, tablets (portrait or landscape), desktop, or 4k screens. Breakpoints use a scale from 0 to 12 because web pages commonly have 12 column grids. Therefore, the scale specifies how many grids to take up on a web page and divides it by 12. For example, 9 divided by 12 is 75% of a screen's width.

There are five breakpoint values separated by commas in the width field that determine the width (breakpoint) of the screen for phones, portrait tablet, landscape tablet, desktop, or 4k screens.

NOTE: When you enter the widths, keep in mind that 0 uses the value of the previous breakpoint (or defaults to using the full screen if it is the first breakpoint value) and 12 means full screen; anything between 0 and 12 will be divided by 12 and use that amount of the screen for that device.

EXAMPLE

If you enter 12, 6, 12, 0, 6 for the value in the Widths field, it will affect the devices in the following way:

  • 12—Phone: full or 100% of the screen
  • 6—Portrait Tablet: half or 50% of the screen
  • 12—Landscape Tablet: full or 100% of the screen
  • 0—Desktop: full or 100% of the screen (the zero uses the previous value of 12)
  • 6—4k screen: half or 50% of the screen
  1. Enter a Label for the container, if you want. This is what the users viewing the profile will see.
  2. Select a control and move it to the container. See Move a Control or Panel for more information.

NOTE: A container will be grayed out and not visible until a control is added to it.

  1. Move more controls as needed to the container.
  2. Select the container and click Remove to remove it.
  3. Click Save Profile in the Profile panel.