Grid

Grid arranges child elements in rows and columns. Use it for repeated cards, logos, or a set of features that should share a consistent layout.

Add and configure Grid

1. Click Add, choose Grid, and place it in the container.
2. Add the items as children of Grid.
3. Set Design > Grid to control items per row, gaps, and advanced grid options.
4. Configure Background, Container, and Spacing for the outer grid.
5. Save your changes.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Design > Grid

Setting	Purpose and options	Behavior
Items Per Row	Set the numeric items per row value.	Responsive
Space Between Items	Space between items and unit.	Responsive
Advanced > Item Vertical Alignment	Stretch, Start, Center, End.	Responsive
Advanced > Item Horizontal Alignment	Stretch, Start, Center, End.	Responsive
Advanced > Use Original Item Dimensions	On/off.	Shared

Design > Background

Setting	Purpose and options	Behavior
Color	Color or supported fill.	Hover
Type	Image, Gradient.	Shared

Shown when Type = Image.

Setting	Purpose and options	Behavior
Image	WordPress media.	Responsive, Hover
Image Size	Registered WordPress or custom image size.	Responsive, Hover
Lazy Load	On/off.	Shared
Image Settings > Size	cover, contain, auto, custom.	Responsive

Setting	Purpose and options	Behavior
Image Settings > Width	Width. When: Type = Image and Size = custom.	Responsive, Hover
Image Settings > Height	Height. When: Type = Image and Size = custom.	Responsive, Hover
Image Settings > Repeat	repeat, no-repeat, repeat-x, repeat-y. When: Type = Image.	Responsive
Image Settings > Position	center top, center center, center bottom, left top, left center, left bottom, right top, right center, right bottom, custom. When: Type = Image.	Responsive
Image Settings > Custom Position	Set custom position. When: Type = Image and Position = custom.	Responsive
Image Settings > Attachment	scroll, fixed. When: Type = Image.	Responsive
Image Settings > Unset Image At	Breakpoint. When: Type = Image.	Shared

Shown when Type = Gradient.

Setting	Purpose and options	Behavior
Gradient	Color or supported fill.	Shared
Gradient Animation > Scale	Scale and unit.	Shared
Gradient Animation > Speed	Speed and unit.	Shared

Setting	Purpose and options	Behavior
Overlay > Color	Color or supported fill.	Hover
Overlay > Type	Image, Gradient.	Shared

Shown when Type = Image.

Setting	Purpose and options	Behavior
Overlay > Image	WordPress media.	Responsive, Hover
Overlay > Image Size	Registered WordPress or custom image size.	Responsive, Hover
Overlay > Lazy Load	On/off.	Shared
Overlay > Image Settings > Size	cover, contain, auto, custom.	Responsive

Setting	Purpose and options	Behavior
Overlay > Image Settings > Width	Width. When: Type = Image and Size = custom.	Responsive, Hover
Overlay > Image Settings > Height	Height. When: Type = Image and Size = custom.	Responsive, Hover
Overlay > Image Settings > Repeat	repeat, no-repeat, repeat-x, repeat-y. When: Type = Image.	Responsive
Overlay > Image Settings > Position	center top, center center, center bottom, left top, left center, left bottom, right top, right center, right bottom, custom. When: Type = Image.	Responsive
Overlay > Image Settings > Custom Position	Set custom position. When: Type = Image and Position = custom.	Responsive
Overlay > Image Settings > Attachment	scroll, fixed. When: Type = Image.	Responsive
Overlay > Image Settings > Unset Image At	Breakpoint. When: Type = Image.	Shared

Shown when Type = Gradient.

Setting	Purpose and options	Behavior
Overlay > Gradient	Color or supported fill.	Shared
Overlay > Gradient Animation > Scale	Scale and unit.	Shared
Overlay > Gradient Animation > Speed	Speed and unit.	Shared

Setting	Purpose and options	Behavior
Overlay > Opacity	Set opacity. Range: 0–1.	Hover
Overlay > Effects > Filter > Filter Items	Add, edit, remove, and reorder filter items.	Hover
Overlay > Effects > Filter > Filter Items > Type	blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia.	Shared
Overlay > Effects > Filter > Filter Items > Blur Amount	Blur amount and unit. When: Type = blur.	Shared
Overlay > Effects > Filter > Filter Items > Amount	Amount and unit. When: Type = brightness, contrast, grayscale, invert, saturate, sepia.	Shared
Overlay > Effects > Filter > Filter Items > Rotate	Rotate and unit. When: Type = hue-rotate.	Shared
Overlay > Effects > Blend Mode	normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.	Shared
Transition Duration	Transition duration.	Shared

Design > Container

Setting	Purpose and options	Behavior
Width	Width.	Responsive
Min Height	Min height and unit.	Responsive
Padding	spacing controls.	See linked controls
Borders	borders controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Spacing	spacing controls.	See linked controls

Troubleshooting