Agencies
Services
Column Control
The Column Control component enables you to divide the component into 2, 3, or 4 parts, or columns. In each column, the author can add a different component to make the presentation more uniform on the site page.
The Column Control enables the author to divide an area of the page into multiple columns, each using our standard container component set to the width specified. Users may then author additional components within, as normal.
When a user initially inserts a Column Control component, the component will greet the author to configure the component before it can be used. Users configure using the Wrench icon just like other components.
Configuring the Column Control tab
Please make sure that all the columns are empty before changing the column width!
Column Width: dropdown field that allows the user to set the number of columns and their widths via specific configurations. The numbers at the end indicate the percent width that column uses in the available space.
The following options are available:
- 2-columns-25-75
- 2-columns-33-67
- 2-columns-50-50
- 2-columns-67-33
- 2-columns-75-25
- 3-columns-50-25-25
- 3-columns-25-50-25
- 3-columns-25-25-50
- 3-columns-33-33-33
- 4-columns-25-25-25-25
ID & Class: Set an ID and/or Class to the component for CSS targeting.
After configuring the component, the user will see the component on the page automatically laid out with containers in the widths specified. These containers are seen as Layout Containers and are not able to be resized or deleted.
Authors may add components to these containers, from additional Text, Titles, or Images, to Callout Boxes and different Data Tables; just like our standard containers.
Adding & Removing Columns
If the author wants to update the configuration of the Column Control to use a different number of columns, they may do so easily. Components will adjust their widths to the new space allocated, whether a column was added or removed from the configuration.
If a column is removed from the configuration, the container and data are effectively hidden from view and is not exposed in page data. If the configuration is updated to re-display a previously-removed column, the components and data will be re-displayed as they previously were.
Examples
Each row in the example below shows each configuration the Column Control can be set to; 5 "2 column" configurations, 4 "3 column" configurations, and the lone 4 column configuration.
