How to add an image gallery to my website?

You can add an image gallery to your website to present your products and services, draw visitors’ attention to highlights of your content, or create a visual vibe that will showcase your business.

How to add an image gallery?

1. When in the Website Builder editor, click on the Add elements button.

2. Drag and drop the Gallery element into your page content. Note that the editor will highlight the spots where you can drop it.

3. Click on the gallery design you want to add to your page.
   
   Choose from Slider, Masonry, or Grid gallery type.

How to change images in the gallery?

1. Click on the gallery to open the toolbar and then click on the Edit link next to the image you want to change.

2. Click on the Replace button and choose an image from the library, add a new one, or embed one from a URL.

How can I add a new file?

• Click on the Add files button. All your custom files are available in the My files tab.

• In the Add files window click on the select a file from your computer link or drag-and-drop a file from your device. Then click on the Add button.

• Your file will be added to the Files and Images stash. Click on the Use button to add it to your website.

How can I use a file from the library?

Files in the library are sorted in four tabs:

• My files
  Select your own image stored in Menu > Files and images.
  
• My websites
  Choose from images you’ve already used in the Website Builder.
  
• Unsplash
  Choose from thousands of stunning free stock photos powered by Unsplash.
  
• Giphy
  Add an animated GIF powered by Giphy.

• Find the file you want to use. You can use the Search file bar to filter images by keywords.

• Click on the Use button to add the image to your website.

• If you want to find more photos by the same author, click on their name under the Use button. It will open the photographer’s profile on Unsplash in a new tab.

You can also customize any image in your gallery by replacing it with an image from a URL and adding an alternative text.

• Embed a file from a URL
  You can replace the current image with an image from a URL provided in this field.
  Learn more on how to embed an image from a URL here.
  
  
• Alt text
  Add a text describing the image that will appear in place of the image that doesn’t load. It’s also read out loud by screen readers.

How to add more images to the gallery?

1. Click on the gallery to open the toolbar and then click on the Add image button.

2. Click on the Add image button in the new image block and choose an image from the library, add a new one, or embed from a URL.
   
   You can also add Alt text for your new image.

How to delete images from the gallery?

Click on the X button next to the image you want to remove.

How to change the gallery layout?

Click on the gallery to open the toolbar and then click on the Display style section.

Each gallery style has different properties you can adjust.

Grid

Set up the size of the images and spacing.
In Advanced settings you can adjust the images’ border, radius, and shadow.

Slideshow

Set up the width and height of the slide.
In Advanced settings you can adjust the slide’s border, radius, and shadow.

Masonry

Set up the size of the images and spacing.
In Advanced settings you can adjust images’ border, radius, and shadow.

Block settings

The form block is a framed workspace around your gallery with a Gallery label on the left. You can only see the frame after clicking on the object. It won’t be visible on your website.

You can customize its color, padding, border, radius, and shadow.

Absolute positioning

Enable this option to move the gallery to any place on your website.

Hide on mobile devices

Enable this option to hide your gallery while your page is opened on a mobile device.
You may want to use this option to make your page simpler for mobile users.