Design Controls
Layout
The layout controls help arrange how elements sit on the page, giving you the power to align content horizontally or vertically, manage the spacing, and ensure your designs look great on all devices.
- Align – Choose the alignment for elements within the container.
- Vertical Align – Adjust the vertical alignment of content within the container.
- Gap – Set the spacing between elements within the container.
- Horizontal – Further options for horizontal layout adjustment.
- Align – Specify the horizontal alignment of items.
- Vertical Align – Set how items align vertically when laid out horizontally.
- Vertical At – Choose the breakpoint at which the vertical alignment setting kicks in.
Background
These controls allow you to get creative with the container background, offering choices for color, images, gradients, or even videos, along with detailed settings for each type.
- Color – Select a solid color for the background.
- Type – Choose the type of background: color, image, gradient, video, or slideshow.
- Overlay – Add an image or gradient overlay.
- Transition Duration – Define the amount of time it takes the background to transition between two states.
Container
This section allows for comprehensive customization of a container’s appearance, offering controls for defining the container’s width and height, adjusting internal spacing through padding, and enhancing visual aesthetics with customizable borders, including options for radius, style, and shadow effects.
- Width – Container > Width
- Height – Container > Height
- Padding – Container > Padding
- Padding – Container > Padding > Padding
- Borders – Container > Borders
- Radius – Container > Borders > Radius
- Styling – Container > Borders > Styling
- Shadow – Container > Borders > Shadow
Spacing
The controls in this section focus on the external spacing of elements, allowing for precise adjustments to the margin at the top and bottom of elements. This functionality is crucial for achieving balanced layouts, ensuring content separation, and maintaining visual flow throughout the design.
- Margin Top – Spacing > Margin Top
- Margin Bottom – Spacing > Margin Bottom
