Grid is a layout structure commonly used in web and graphic design. It consists of a series of intersecting horizontal and vertical lines that create a framework for arranging content. Designers can use a grid to create a sense of organization, balance, and hierarchy. The grid helps to guide the placement of elements on the page, ensuring that they are aligned and spaced in a visually pleasing manner. This makes it easier for users to navigate the content and find what they want. A grid can also make designs more adaptable to screen sizes and devices. Grids are a powerful tool for designers, helping to create aesthetically pleasing and functional designs. Additionally, you can use it to group your products by different categories or features.
| Settings | Description |
|---|---|
| Heading | Shows the title of the section. |
| Block Height | The size of the block height: |
| • Small | |
| • Medium | |
| • Large | |
| Zoom on Hover | Click the checkbox to enable zoom on hover effect. |
| Columns per Row | Adjust the number of columns using the slider. Opt for a single column (1) or multiple columns (2, 3, 4, or 5) of grid blocks. |
| Settings | Description |
|---|---|
| Width | Displays the width of the block in a single line. |
| Background Type | Select the background type: |
| • Color | |
| • Gradient | |
| • Image | |
| Background Image | Click Select Image to connect a background image with the block. |
| Background Image Position | Select where the image is located: |
| • Middle | |
| • Left | |
| • Right | |
| • Top | |
| • Bottom | |
| Background Color | Changes the color of the block background. |
| Background Gradient | Changes the gradient of the block background. |
| Disable Content Image | Click the checkbox to disable content image. |
| Text Color | Changes the color of the text. |
| Text Size | Adjust the text size using the slider. |
| Bold Text | Click the checkbox to bold text. |
| Subtitle Color | Changes the color of the subtitle. |
| Subtitle Size | Adjust the subtitle size using the slider. |
| Bold Subtitle | Click the checkbox to bold subtitle. |
| Product | Click Select Product to connect a product with the block. |
| Collection | Click Select Collection to connect a collection with the block. |
| Heading | Shows the title of the block. |
| Subheading | Add the secondary text to pair with the section. |
| Link | Enter the URL you wish the heading to direct to if no product or collection is selected. |
| Context URL | Enter the URL you wish the subheading to direct to if no product or collection is selected. |
| Disable Product Image | Click the checkbox to disable product image. |
| Image | Click Select Image to connect an image with the block. |
| Button Text | Shows the text of the button. |
| Bold Button Text | Click the checkbox to bold button text. |
| Button Color | Changes the color of the button. |
| Button Text Color | Changes the color of the button text. |
| Enable Border | Click the checkbox to enable border to the button. |
| Border Color | Changes the color of the button border. |
| Enable Overlay | Click the checkbox to enable overlay. |
| Overlay Color | Changes the color of the overlay. |
| Overlay Opacity | Adjust the overlay opacity using the slider. |
