All Collections
Website Builder
Website Elements
Website Builder: How to Add an Image Gallery
Website Builder: How to Add an Image Gallery

Learn how to add an image gallery to your website using Hostinger Website Builder

Updated over a week ago

There are two ways to add an image gallery:

Image gallery element

Within the website editor, expand the Add element panel on the left. Drag and drop the Gallery element to the preferred place on your web page:

Click on the element to see more options. You can manage the images, open the settings, duplicate, hide, delete, or resize the gallery element:

Click Manage gallery to:

  • Add more images

  • Sort images: drag and drop images to switch their places

  • Delete images: hover the mouse over an unnecessary image, and you'll see a little trash bin icon – click it to delete the image

In the gallery settings, you can:

  • Select the gallery layout: grid on masonry (see the note below)

  • Set a number of images per row

  • Change the gap between photos

  • Choose what happens on click: by default, a clicked gallery image is shown in the full-screen preview, but you can easily turn it off

NOTE: The grid layout displays images in strict squares; the masonry layout displays images in their original proportions:

Third-party image gallery widget

If you want something more custom, feel free to use third-party tools. Elfsight is one of many platforms that offer various embeddable widgets, including the Photo Gallery widget.

On Elfsight, you'll find a variety of image gallery templates. Once you select a template, customize it to your liking:

Once you're finished creating your widget, save it:

Then, click Add to website and copy the integration code:

NOTE: You may be asked to select an Elfsight plan; feel free to choose the free one

Paste the code into your website using the embed code element and resize it if necessary. Once you're done, update your website for the changes to reflect online.

Did this answer your question?