Getting Started

You can add an image gallery to your website to display multiple images at once to suit your needs. This article will cover how you can add an Image Gallery element to your website, follow all the instructions accordingly.

Adding the Image Gallery element

Follow the steps below to add an Image Gallery to your site.

Click on Add Element in an empty row and section
From the General Elements section, select Image Gallery

Refer to the GIF below:







Image Gallery element after it is added

Editing the Image Gallery element

Follow the steps and instructions below to add and edit an Image Gallery on your site.

The Image Gallery element editor has the following options:

Images
Set Category
Gallery Settings
Filters
Caption Style
Tab Setting and Style
Background

The Image Gallery element editor:

Images

Inside this option, you can add new images to your gallery, delete existing ones and change some necessary settings of the images.





The GIFs below show the settings you will be able to change for each image ⬇️





Image Caption:







⬆️ Set category: You will be able to put every individual image under one or more categories.

⬆️ Image Action: You can also set the image as a LightBox or add a custom URL to it.


LightBox image ⬇️




Add a new image:

Set Category

In this option, you can create or delete the categories for your image gallery.

Refer to the GIF below to see the demonstration:

Gallery Settings

In this setting, you can make necessary changes to your gallery, like adjusting the gap between the images, setting the number you want to display, and the number of columns for the gallery.

Refer to the GIF below to see the demonstration:

Filters

Filters let you change how your images look in your gallery with various effects like blur, invert, adjust the brightness and contrast, etc.

Refer to the GIF below to see the demonstration:

Caption Style

You can change your image caption with this setting, from changing the text size to adding colors, background, and more.

Refer to the GIF below to see the demonstration:




Different Caption Styles:

Overlay on Hover: The overlay on the hover caption makes the caption appear when a visitor hovers over the image.

Default: The caption will appear under the image.

Tab Setting and Style

You can add a tab to your image gallery so visitors can view the specific images they want that fall under the created categories. Here is how you can use this option:

Enable the tab visibility





After enabling it, you will see a tab appear like the one shown in the picture below.




The GIFs below demonstrate what each setting does:

Background

You can add a background color or gradient to your image gallery.

Refer to the GIF below to see the demonstration:

Updated on: 13/05/2024