Design Controls
Layout
In this section, you can manipulate the arrangement of columns on your page. Easily add more columns, stack them, adjust their width, or even reverse their order to achieve your desired layout, offering you flexibility in design and responsiveness.
- Add Column – Add another column to your layout.
- Stack Vertically – Choose at which breakpoint your columns should start stacking atop one another for better mobile responsiveness.
- 50% Width – Set your columns to take up 50% of the available width at a specific breakpoint, perfect for a two-column layout.
- Reverse Order – Flip the order of columns, useful for changing visual hierarchy or improving mobile display.
Size
Here, control the dimensions of your columns element. Define its width and height, or set a minimum height. Custom sizing options ensure your content looks perfect no matter what the viewer’s screen size is.
- Width – Specify the exact width of your columns element, ensuring it aligns with your overall design.
- Height – Set a specific height for your columns element to maintain a uniform appearance.
- Min Height – Establish a minimum height for your columns element to ensure content visibility. Note: This control is only available when the height is set to “custom”.
Spacing
This section allows you to adjust the spacing within and around your columns. Modify the gap between columns, alter padding for content breathing space, and fine-tune the container margins to create a balanced, well-spaced layout.
- Column Gap – Adjust the space between your columns for aesthetic spacing or distinct separation.
- Column Padding – Set the padding inside each column to ensure your content isn’t cramped and maintains readability.
- Container – Customize the container holding your columns with these options:
- Margin Top – Add space above your column container to enhance visual separation from other elements.
- Margin Bottom – Add space below your column container to prevent content from visually colliding.
