Grid
Last updated
Last updated
Create a grid of customizable blocks of different sizes. The grid section is a great way to break up the look of your page and set apart your store.
Using one 33% and one 66% wide block will fill out a row perfectly.
Layout
Desktop height
select
Sets the height of the grid section on desktop devices.
Enable mobile height
checkbox
Enables a custom height setting for mobile devices.
Mobile height
select
Sets the height of the grid section on mobile devices.
Text
Heading size
range
Adjusts the font size of the heading text within the grid section.
Text size
range
Adjusts the font size of the paragraph or body text within the grid section.
Buttons
Button color
select
Select the button color: White
, Black
, Primary
, or Secondary
.
Button style
select
Choose the visual style of the primary button: Solid
, Outline
, Soft
, and etc.
Size
select
Sets the size of the primary button: Small
, Medium
, or Large
.
Secondary button color
select
Selects the color theme for the secondary button:White
, Black
, Primary
, or Secondary
.
Button style
select
Choose the visual style of the secondary button:Solid
, Outline
, Soft
, and etc.
Size
select
Sets the size of the secondary button: Small
, Medium
, or Large
.
Colors
Background
color
Sets the background color for the entire grid section.
Overlay gradient
color_background
Adds a gradient overlay on top of the background.
Mobile
Enable slider
checkbox
Enables slider functionality, allowing grid items to scroll horizontally like a carousel.
Items per row
select
Determines how many grid items are displayed per row on desktop: 1
or 2
.
Overlay text on images
checkbox
Displays text over the images instead of below them.
Section spacing
Width
select
Controls the overall content width of the section: Full width
, Page width
, Full width padded
, Page width narrow
.
Add spacing
checkbox
Adds internal spacing between items in the grid.
Padding top and bottom
range
Sets the amount of space above or below the grid section.