Components | Image grid

The "Image Grid" is an element that allows us to create an image composition. Clicking on each image zooms in on each image. You can use this component, for example, to include in each image a link thus creating an interactive menu.

By default, it is added within the sections although it can also be added inside other components (for example, within a highlight, a row, etc.).

We will find this component in the "Image" component group.

Configuration process

1. By default, when we add the "Image Grid" the component is created with four images. You can add more by clicking on the"Image" button inside the "Add"tab.

2. Go to the"Properties" tab and set the grid properties.

3. Click on each of the images and go to the "Properties"tab. Tap "Browse" in the "Resource" field and associate an image from the Drive Resources folder (see here). We configure the other properties of each of the grid images (see here to review the image properties).

Remember
It is very important that all images are the same height and width size. Otherwise, the composition will be asymmetrical.

4. To finish, you can add links to each of the images, thus creating an interactive menu.

Properties

PROPERTY DESCRIPTION Images per row In this property we will indicate the number of images that we want to appear per row. The display of images per row is only visible in preview mode, not in edit mode. Fit to column

In this field we indicate how we want to adjust the grid on the page. There are three positions:

Normal: Set to the center of the screen.
Pasted to the right: aligned to the right of the screen.
Pasted to the left: aligned to the left of the screen