Column Control
The Column Control component presents content side by side in columns.
Uses
The Column Control component is a simple container. It holds other components and allows you to present content in 2 to 5 columns on desktop display.
In the two-column example below, the left column contains a YouTube video component and a WYSIWYG, while the right column contains an image and a WYSIWYG. The Column layout is set to 2 columns (50%, 50%):
The column control can also hold buttons, like in this example. The Column layout set to 3 Columns (33%, 33%, 33%):
AEM editors are welcome to edit column control components when the content within them needs to be updated.
Best practices
Settings
- When you're adding or deleting content from a column control, you may need to adjust the Column layout so it suits the new content.
- While you can choose up to 5 columns, 4 or 5 columns may create narrow, cramped columns. If this is the case, it's better to add a second column control component with 2-3 columns.
- Leave the boxes beside Vertical separators, No gutter and Double margin unchecked.
- If your column control contains button components, check the box beside Equal height.
- In Responsive settings, ensure that Stack after (tablet) is set to 1 and Stack after (mobile) is also set to 1.
Preview your work
After you edit a column control, it's essential to preview and refresh the page. Carefully review the page on desktop. Then drag one corner of your browser inwards until it's the size of a phone and review the page again.
If anything looks even slightly off, please contact webcoord@concordia.ca. Our web designer will review the page and make any needed adjustments.
