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.
- Color – Pick a solid color for the background.
- Type – Choose the type of background, either a solid color, an image, or a gradient.
- Image – Upload or select an image to use as the background. (Note: This control is only available when the background type is set to “image”.)
- Image Size – Define the size of the background image. (Note: This control is only available when the background type is set to “image”.)
- Image Settings – Dive into advanced settings for background images, such as custom dimensions, repetition, positioning, and more. (Note: This control is only available when the background type is set to “image”.)
- Size – Select standard sizing options for the background image or choose custom dimensions.
- Width – If custom size is selected, specify the width for the background image. (Note: This control is only available when the size is set to “custom”.)
- Height – If custom size is selected, specify the height for the background image. (Note: This control is only available when the size is set to “custom”.)
- Repeat – Choose whether the background image should repeat, and in which direction.
- Position – Pick a predefined position for the background image or select custom positioning.
- Custom Position – If custom position is chosen, specify the exact position using a focus point. (Note: This control is only available when the position is set to “custom”.)
- Attachment – Decide if the background image should scroll with the content or remain fixed.
- Unset Image At – Choose a breakpoint at which the background image should no longer be displayed.
- Gradient – Design a color gradient for the background. (Note: This control is only available when the background type is set to “gradient”.)
- Gradient Animation – Add and customize an animated effect to your background gradient. (Note: This control is only available when the background type is set to “gradient”.)
- Scale – Adjust the scale of the gradient animation.
- Speed – Set how fast the gradient animation cycles.
- Overlay – Apply an overlay to the column background, tweaking it with various options for color, images, gradients, and effects.
- Color – Choose a color for the overlay.
- Type – Select whether the overlay is a solid color, an image, or a gradient.
- Image – Set an image for the overlay. (Note: This control is only available when the overlay type is set to “image”.)
- Image Size – Choose the size of the overlay image. (Note: This control is only available when the overlay type is set to “image”.)
- Image Settings – Modify detailed settings for the overlay image. (Note: This control is only available when the overlay type is set to “image”.)
- Size – Select from standard sizing options or define custom dimensions for the overlay image.
- Width – If custom size is selected, specify the width of the overlay image. (Note: This control is only available when the size is set to “custom”.)
- Height – If custom size is selected, specify the height of the overlay image. (Note: This control is only available when the size is set to “custom”.)
- Repeat – Decide if and how the overlay image should repeat.
- Position – Choose a standard position for the overlay image or opt for custom positioning.
- Custom Position – If custom position is chosen, determine the exact spot with a focus point. (Note: This control is only available when the position is set to “custom”.)
- Attachment – Select whether the overlay image is fixed or scrolls with the content.
- Unset Image At – Pick a breakpoint to stop displaying the overlay image.
- Gradient – Create a gradient for the overlay. (Note: This control is only available when the overlay type is set to “gradient”.)
- Gradient Animation – Customize animated effects for the overlay gradient. (Note: This control is only available when the overlay type is set to “gradient”.)
- Scale – Define the scale of the gradient animation.
- Speed – Control the speed of the gradient animation.
- Opacity – Set the transparency level of the overlay.
- Effects – Add and adjust various effects to enhance the overlay, like blur and brightness.
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.
