Design Controls
Grid
This section lets you fine-tune the layout of your grid, including the number of items per row and the spacing between items. Advanced options also allow you to control the alignment of items and maintain their original dimensions.
- Items Per Row – Set the number of items in each row of the grid.
- Space Between Items – Adjust the spacing between individual items in the grid.
- Advanced – Access more sophisticated settings for precise control.
- Item Vertical Alignment – Align items vertically within the grid.
- Item Horizontal Alignment – Align items horizontally within the grid.
- Use Original Item Dimensions – Preserve the original size and aspect ratio of the items.
Background
Customize the background of your grid with colors, images, or gradients. You can set a single color, choose an image, or create a gradient. Depending on your choice, further customization options will become available, such as image settings and gradient animation.
- Color – Set a solid background color for the grid.
- Type – Choose the type of background: color, image, or gradient.
- Image – Upload or select an image to use as the background (available only if ‘Type’ is set to ‘image’).
- Image Size – Choose the display size for the background image (available only if ‘Type’ is set to ‘image’).
- Image Settings – Fine-tune the background image’s appearance with various settings (available only if ‘Type’ is set to ‘image’).
- Gradient – Create a gradient background (available only if ‘Type’ is set to ‘gradient’).
- Gradient Animation – Add animated effects to the gradient background (available only if ‘Type’ is set to ‘gradient’).
- Scale – Adjust the scale of the gradient animation.
- Speed – Set the speed of the gradient animation.
- Overlay – Add an overlay to the background, which can be a color, image, or gradient.
- Transition Duration – Choose the time it takes to transition from one background state to another.
Container
The container controls allow you to modify the structural elements of the container, including its width and minimum height. You can also adjust the internal spacing with padding settings and define the container’s outer appearance with border and shadow options.
- Width – Adjust the overall width of the container.
- Min Height – Set a minimum height for the container.
- Padding – Modify the internal spacing of the container.
- Padding – Fine-tune the specific padding spaces within the container.
- Borders – Customize the container’s borders.
- Radius – Adjust the curvature of the container’s corners.
- Styling – Style the borders (e.g., width, color, style).
- Shadow – Add or modify a shadow effect to the container’s borders.
Spacing
The spacing controls provide the ability to manage the distance between the container and other elements on the page, specifically focusing on the top and bottom margins. These settings ensure that the container properly aligns with the overall layout and maintains balanced spacing within the page content.
- Margin Top – Set the size of the space above the container.
- Margin Bottom – Set the size of the space below the container.
