Add an image gallery

If you want to display multiple images at a time or in a certain order you can use one of the following section templates that you can find in the Images and Slider category of the left Content Sidebar:

• Gallery
• Filter Gallery
• Slider

Gallery

The Gallery section templates offer different variants to style your gallery. The default version comes e.g. with images in a 1:1 aspect ratio. 

But there are also other designs like rounded images, images with captions on hover, or a grid layout: 

Filter Gallery

The Filter Gallery is a special form that displays images of certain categories at once. If a category is selected on the website with a click, only the images assigned to this category are displayed. Images can be assigned to one or more categories. In order to adapt the Filter Gallery to your wishes, it's necessary to make changes to the buttons and images. Let us assume that a category for Wedding should be set up. Write "#wedding" in the Link tab of the button in the URL field (without quotation marks). It's important that you use the same word that you used for the button.

Now click on an image that should be displayed when filtering for Wedding and switch to the Style tab in the left panel and open the "ID & classes" section. Here, you enter "filter-wedding" as an additional class. It is important that the class begins with the keyword "filter-" (without quotation marks) and that the following term corresponds to the term from the step above.

If you want to add a category to the Filter Gallery, please follow these steps for an exemplary category "Company celebration":

1. Click on the last button once and duplicate that button by using the context menu (right-click the element and click Duplicate element) or by using [Ctrl] + [D]
2. Change the button text if you like and change the link in the button's Link tab to '#companycelebration' 
3. Add the class "filter-companycelebration" to the images you want to show in the new category; it is important that you prefix the category's name with "filter-"
4. If you wanted a category called "Release Party" you could use the link "#releaseparty" and the class "filter-releaseparty"

To preview the Filter Gallery you will need to save your changes and open the preview website by hovering over the eye icon at the top navigation of the editor and select Open preview website. 

Slider

The Slider is the perfect layout if you want to highlight one (or more) image(s) at a time since the slider doesn't display the images all at once but one after the other. From the Slider category of the left Content Sidebar, you can drag and drop the Image Slider into the website. 

Once you have added the slider you can customize it to your needs, e.g. you can decide if the slider should work automatically or if only a manual click on the arrows on the sides or the dots at the bottom triggers the image change.