Grid layout

This component allows you create a dynamic layout of elements, called Grid blocks or just Blocks, as we will refer to them for the purposes of this article.

It provides several options to add an image along with content, which is optional, to generate an aesthetical presentation of different topics. The way in which each block gets displayed within the component will vary depending on how many of them you add.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

Featured block

This option allows you to define which will be the block that’s gonna look bigger compared to the rest, hence, it will be featured.

How this “featured” block looks will vary depending on the option you choose here, along with how many blocks you are using. Next you can find a table that explains it:

Amount of blocks / Featured	First	Middle	Last
7 blocks	1st block	4th block	7th block
6 blocks	1st block	3rd block	6th block
5 blocks	1st block	3rd block	5th block
4 blocks	1st block	2nd block	4th block
3 blocks	1st block	2nd block	3rd block
2 blocks	1st block	1st block	2nd block
1 block	1st block	1st block	1st block

Image options

Within this group you will find options with which you can define how images will look and behave:

Ratio

Allows to define the ratio or dimension in which images are gonna be displayed. This will have an effect on how images will adapt to the block area where the image goes.

Crop automatically

By enabling this option the theme will crop the images you upload, so they are rendered in the necessary dimensions (width and height) that each block needs.

If you disabled it, images will adapt vertically and horizontally to the block image area, but they will be rendered in the dimension in which you uploaded.

Transition

Allows to define a transition when you “hover over each block.

Title options

This group allows you to customize how titles look and behave within each block, as long as the Show option is enabled.

If you disabled it, blocks will only display the image.

Size

Allows you to define the size of all titles based on predefined measures. By choosing Custom, you will be able to manually adjust the size for desktop and mobile devices.

Weight

Allows you to define the weight for all titles within blocks.

This will depend on the available variables of the font that you have defined for the Main font option within Theme settings > Fonts.

Letter spacing

Allows you to adjust the space between letters for all titles within blocks.

All caps

Allows you to force all blocks titles to be displayed in All caps (uppercase), even when they weren’t originally written like that.

Alignment

You will find two options to define the alignment for desktop and mobile devices.

Overlap titles

By enabling it, titles will be placed over the blocks images and a second group of options will become visible for you to customize their behavior:

• Vertical position: allows you to choose the position of the titles in the vertical axis.
• Overlay: allows you to show or hide this element, to generate contrast between the title and the image. Overlay opacity will be come visible if this option is enabled so you can control its transparency.
• Content colors: allows you to define the Color pack to use on all blocks, which will affect the background color of the Overlay element, as well as the color of the title.

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options on this page.

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component. This will affect the color of the titles if Overlap titles is disabled.

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available on this page.

---

---

Subcomponent settings

As mentioned initially, the subcomponent for a Grid layout component is called Grid block, and you can add as many as you want. The options for this subcomponent are the following:

Title and link

This first group of options allows you to define the Title of the block. When adding a Link, the title will become clickable and take to the page you chose.

The following options will become visible once you add a link:

• Link text: this text displays when a user “hovers” over the title.
• External link: if enabled, the link will open in a new browser tab.
• Arrow in title: displays an arrow icon on the right side of the title.

Image options

If you add a link and if it’s of type category, page or product and has an image added in the admin panel, this will be displayed automatically on the block.

If there’s no image available, you will need to mandatory use the Custom image option to upload one. By doing so, a second option will become visible so you can upload one for mobile devices.

Note: if the link has an image, this will be replaced by the one you upload on the Custom image option.

Devices options

You will find two group of options to define how the image adapts horizontally and vertically within the block’s image area, on desktop and mobile devices.