Column

Design Controls

Layout

This section provides controls to adjust the overall layout of your column, including alignment, spacing, and specific configurations for different viewing breakpoints.

• Align – Select your preferred alignment for elements within the column.
• Vertical Align – Adjust the vertical alignment of content within the column.
• Gap – Set the space between elements in the column.
• Horizontal – Here, you can further refine alignment and adjust how items are displayed horizontally.
  • Align – Choose how elements align horizontally within the column.
  • Vertical Align – Decide the vertical alignment for elements when laid out horizontally.
  • Vertical At – Specify the breakpoint at which the vertical alignment setting is applied.

Background

These controls allow for detailed customization of the column’s background, ranging from colors and images to intricate gradient designs and animations.

Learn more about Background controls.

Size

The “Size” controls allow users to precisely define the dimensions of the element, ensuring it fits perfectly within the layout. The width control adjusts the element’s breadth, essential for maintaining a responsive design. The minimum height control guarantees that the element has a consistent presence, even when its content varies in length.

• Width – Set the width of the Column.
• Min Height – Set the minimum height of the Column.

Order

The “Order” section provides controls for adjusting the element’s position in the sequence, an essential feature for organizing content. By setting a numerical value, users can dictate the element’s order, ensuring content is displayed in a logical and visually coherent sequence.

• Order – Control where the Column shows up within the Columns element.

Borders

The “Borders” section encompasses various controls for refining the element’s outer edges, a crucial aspect of its visual identity. Users can adjust the border radius for rounded corners, apply complex styles for a unique border appearance, and add shadows to establish depth, enhancing the element’s aesthetic appeal.

• Radius – Set the radius of the Column’s corners.
• Styling – Set the style and size of the Column’s borders.
• Shadow – Setup one or more box shadows for the Column.

Spacing

In the “Spacing” section, users find controls to adjust the element’s internal cushioning, vital for a clean and organized presentation. The padding control, in particular, modifies the space between the element’s content and its border, providing room to breathe and enhancing content readability.

• Padding – Control the space within the Column.