“How do I use the grid home page section?”

The grid section lets you overlay up to five images. Each image can be paired with marketing text and call to action buttons. The grid changes size and shape based on how many grid items you have configured—and your customers’s screen sizes.

Grid home page section

Grid mobile

To see the grid section in action, check out the Ecstatic demo.

Image
An image upload form for a content block’s image. For recommended image dimensions, see Grid layout below.
Overlay opacity
Sets the amount of opacity of the overlay color setting below. It ranges from No overlay (transparent) to 100% (completely opaque).
Overlay color
Sets a color that sits on top of your image. We recommend using this to soften your colors so that the text on top can be read easily.
Text color
Sets the text color for a grid item’s heading, text, and button.
Heading
The heading text. This is the most dominant text on the grid image.
Subheading
The subheading text. This is typically used as description.
Link
Set a link to a page of your choice. This is generally another page in your store.
Button text
The button text.
Choose button style
Sets the button style for a grid item. Choose from No button, Standard button or Transparent button.

If you choose the No button setting, the grid item is still clickable and sends the customer to the assigned link.

Text alignment
Aligns a grid item’s text content. See examples

Grid layout

You can upload up to five images to each of your grid sections. Depending on how many images you display, the size and shape of the grid changes. In the diagram below, you can see each possible configuration, and what size of each item would be:

Grid configurations diagram

Ira will crop your uploaded images (from the center point of each image) so that they fit perfectly into the grid. Depending on the size of the grid item, the top and bottom of your images may be cut off. To avoid unnecessary cropping, use our recommended image dimensions below as a guideline.

Width Height Aspect ratio Grid item
1440 pixels 864 pixels 3:2 (landscape) 1 of 1
1280 pixels 853 pixels 3:2 (landscape)
1, 2 of 2
2, 3 of 3
2, 3 of 4
3, 4 of 5
640 pixels 960 pixels 2:3 (portrait) 1 of 3
1, 4 of 4
2, 5 of 5

Text alignment

Because each grid item’s image may have a different focus point, you can choose an appropriate text alignment setting for each item. The available settings are as follows:

Settings marked “left” appear on the left side and also have left-aligned text. Settings marked “right” appear on the right side and also have right-aligned text. The Center setting is the only option that has center-aligned text.

Below, you can see examples of left-, center-, and right-aligned grid items:

Grid text alignment examples