Grid
Last updated
Was this helpful?
Last updated
Was this helpful?
The Grid section displays a flexible collage of feature images. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.
In the editor side panel, click (+) Add section and select Grid. Click and hold the drag handles ⋮⋮ to re-order sections.
Click the section to add a section header and change section styles for colors and spacing.
Add Grid item blocks with background images or autoplay videos. Create different layouts by reordering the blocks with the drag-and-drop handles ⋮⋮ and customize the width and height of each block.
Add background images or autoplay videos.
Add headings and buttons with selected positions
Change the width and height of each item
Add an image or autoplay video (without sound) as the grid item's background.
For autoplay videos, make sure your video files meet the following requirements:
Video file type
.mp4 or .mov
Embedded YouTube or Vimeo videos are not supported.
Video length
< 15 seconds (Recommended)
Video size
< 10MB (Recommended)
Click Grid item block to find settings
Image
Select or upload an image.
Mobile image
Select or upload an alternate image to display on mobile screens.
Video
Add a short autoplay video (without sound) to replace the image.
Mobile video
Upload an alternate video to display on mobile screens.
Adjust the width and height of each block to create unique layouts.
Click Grid item block to find settings
Width
Choose the width of the grid item as a percentage of the section width. Select 33%, 50%, 66%, or 100%.
Height
For desktop and mobile, change the height of the grid item between 300 to 800 pixel.
Add headings, text, and optional button to overlay the grid media.
Click Grid item block to find settings
Content position
For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions.
Text alignment
For both desktop and mobile
Content width
Choose to display the content full width or a custom width. Select Custom width to set the maximum content width between 100 to 900 pixels.
Overline
Add text to show a small heading above the main heading.
Heading
Add text to show a main heading.
Heading size
Change the font size of the heading from small (1) to large (8).
Heading tag
Text
Add text to show a subheading below the main heading.
Text size
Change the font size of the text from small (1) to large (8).
Button link
Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.
Button label
Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Join us, Shop now).
Button style
Change the style of the button. Select Solid, Outline, or Text.
Button size
Change the size of the button to Small or Regular.
Display scrolling text around the edges of grid items.
In the grid item block settings, add the text you want to show.
Then, in the section settings, change the style of scrolling text:
Use the Scroll duration slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.
Choose to scroll content towards the Left or Right.
Show an icon and change the text divider
Click section for settings
Enable scrolling text
Toggle on to rotate scrolling text added to grid blocks.
Scroll duration
Change the number of seconds it takes for the content to scroll from beginning to end.
5 - 45 secs
Scroll direction
Choose the direction of scrolling.
Left Default Right
Text divider
Display an icon or dot between scrolling text blocks.
Icon Dot None
Icon
For the icon text divider, select from 30+ free icons.
Adjust the grid spacing between grid blocks on desktop and mobile screens.
Click section to find settings
Desktop spacing
For desktop screens, adjust spacing between the grid blocks: between 0 and 60 pixels.
Mobile spacing
For mobile screens, adjust spacing between the grid blocks: between 0 and 50 pixels6
Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to . This option doesn't change the heading's appearance.
Section header
Section colors
Width and Padding
Using color overlays
Learn how to change overlay colors and use gradients.
