An image gallery is a straightforward way to display multiple images in a grid layout on your site. To add one, drag the Image Gallery component to a page of your site. Next, click on the component to open the options panel to the side of the editor.
Images
This section of the options is where you manage which images are used with the component. To add a new image, click on the Upload Images button, then select the images you want to upload. Next, click on each image in the list of images. You’ll see a few different options, such as uploading a different image to replace it, adding a link, ALT text, and a caption.
If you want to change the order of images, click on the three vertical dots from an image and drag it to a new position in the list. You can also delete an image by clicking the red X button.
Behavior
The Allow Zoom option allows you to enable or disable image zoom when a visitor clicks on an image. Note that if you set a link for an image then image zoom is already disabled for the individual image. This option will enable or disable for all images in the gallery.
Layout
This group of options controls the layout of images within the component, and has the following options:
- Columns - Change this option to control how many columns are used to display your image thumbnails. This option can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Image Spacing - This option controls how much space there is between the images, so larger numbers will space the images farther from one another. Note that this will make the icons smaller so they fit within the component. This option can also be set separately for different screen sizes.
- Aspect Ratio - With this option you can set the “shape” of the image icons. The auto option will allow each image to maintain its original ratio, whereas the other options will create a consistent ratio for all icons within the component.
Captions
The options within this group control how captions behave for each image. Note that if you provide a link for an image, then you won’t be able to show a caption when a visitor clicks on an image.
- Caption Type - This option controls whether captions are shown across the whole image, only the bottom of the image, or when one is clicked on as part of the expanded image popup.
- Show Caption on Hover - Toggling this on will only show the caption when a visitor hovers over the image. Note that this option does not apply if you show captions on the expanded image.
Design
Within this group are a few options control the style of the component:
- Shape - This controls the shape of each icon, which by default is the same as the shapes used by buttons on your site. This option can be set for different screen sizes by clicking the desktop/mobile icon.
- Border - This option controls the borders around each icon. You can set the border width, color, and style. Note that color and style do not show when the border is set to none.
Filters
Filters are image effects you can apply to the icons within the component. Similar to the Image component, there are a number of different filters you can choose from. Click on one to apply it, and click it again to remove it.
Spacing
The margin option found in this group controls the space around all of the icons as a whole. This can be set separately for each side or all together, and can also be set separately for different screen sizes.
Hover
If you click on Hover at the top of the options panel, you can further customize the border options and filter option when a visitor hovers over an icon in the element. This is useful for adding a bit of interactivity and visual feedback to the component.