Gallery

Please Note: This article applies to Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before this date, please refer to the article Elements Management.

Arrange the series of photos with the Gallery element. You can choose from two layout options: Grid or Masonry.

Adding Gallery

Option 1

  • Hover over the desired section, and click the Add Element:

  • Choose the Gallery element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing the Gallery

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing Gallery

Adding and Rearranging Images

  • To add an image to your Gallery, drag and drop it into the Gallery from your computer:

Please Note: You can simultaneously add multiple images to the Gallery. Select several photos on your computer, then drag and drop them into the Gallery in one batch.

  • To rearrange images in the Gallery, drag an item and drop it into the desired place:

Removing the Image

To remove a photo from the Gallery, hover over it and click [x] that appears in its top-right:

Replacing the Image

  • Click the Image icon on the toolbar:

  • Choose the variant on how you want to change the image: Upload from your computer, add from Image Library, or use Free Photos.

Adding Alt Text

To improve the SEO ranking of your website, you can add the image's Title and Description:

  • Click the Text icon on the Tooltip to open the Alt Text Toolbar.
  • Add the Title (which will be seen by hovering over the image on the Published website).
  • Add the Description (will be seen only in Metadata).

You can link the image to any page of your website, an external URL, file, email, or phone via these steps:

  • Click the Link icon on the Tooltip to open the Link Settings.
  • Choose the type of the link: Page, Anchor, URL, File, Email Address, or Phone Number.
  • Specify the link.

If you want website visitors to open this link in a new tab, turn on the Open in the New Tab toggle.

Editing Gallery 

You can modify the Layout and Design settings of the gallery. To access the Settings:

  • Click on the element and choose the Edit button that appears in its toolbar:

  • Switch between Layout and Design tabs:

Layout Tab

Type

You can change the appearance of the Gallery by switching between Grid and Masonry types. 

Please Note: Pictures should be of different sizes for the Masonry type.

  • Grid type:

  • Masonry type:

Photo Spacing

Modify Spacing for images in your Gallery. Drag the Slide Control to increase or decrease padding between the photos:

Photo Size

Change the value in the Slide Control to increase or decrease the size of images in the Gallery:

The number of pictures in a row depends on the selected photo size.

Add Photo 

You can add images to the Gallery via the Layout tab. To upload a photo:

  • Click Add Photo to open the Upload Image dialog:

  • In the Image Library, select Upload Image, Search Stock Photos or drag & drop the image:

Please Note: Your interface for image upload may differ if your plan doesn't include the Image Editor functionality.

Design Tab

Aspect Ratio

Please Note: The element is available only for the Grid layout type.

  • Select the width-to-height ratio for the image placeholders in the Gallery among Square, Standard, Standard (vertical), Four-three, Three-four (vertical), Widescreen, Anamorphic Widescreen:

Show Caption

You can add a Caption for all images in the Gallery. To set the Caption:

  • Enable the Show Caption toggle:
  • Change the Caption Text by clicking the Image Caption phrase below the image in your Gallery and editing or re-writing it.

You can also change the Background for the Caption:

  • Click the Square icon on the right of the Background to open the color picker.
  • Select the overlay color, and drag the control to set the Opacity level for the Caption Background.

On Click Enlarge

With the On Click Enlarge, website visitors can view the full-size image by clicking on it. To enable the On Click Enlarge for all images in the Gallery:

  • Turn on the On Click Enlarge toggle.
  • Select the Theme in the drop-down below. You can set an image to display with the Light or Dark theme on the published website.

Please Note: The On Click Enlarge functionality is unavailable for an image if it is linked to a page, anchor, URL, etc. It won't affect other images in a Gallery.

Gallery Border 

The Border element allows customers to add borders to images and change their color settings.

  • Change the value in the Slide Control to set the border width.
  • To change the border color, click the Square icon on the right to Slide Control.
  • Select the overlay color and drag the control to set the Opacity level for the Border.

Please Note: If the value on the Slider Control is set to zero, the Gallery Border element is disabled.

You can change a separate Border Location by clicking a special Icon and choosing a preferable option among: Top, Right, Bottom, Left:

Gallery Border Radius

The Gallery Border Radius setting allows changing the border radius of the images in the Gallery. Use the Slider Control to configure the radius.

  • Choose a range of radius for all corners:

  • You can change a separate range of radius by clicking a special Icon and choosing a preferable option among: Top left, Top right, Bottom right, Bottom left:

Please Note: Gallery Radius is calculated as a percentage and is shown as a numeric value in the Slider Control. At 0%, the customer will get a square image at 50% - maximum roundness

Gallery Shadow

The Gallery Shadow allows adding shadows to any image in settings with a shadow toolbar.

  • Change the value in the slide control to set the shadow intensity.
  • Click the Square icon on the right of the slide control to open the color picker.
  • Select the overlay color and drag the control to set the Opacity level for the Shadow.

Please Note: If the value on the Slider Control is set to zero, the Gallery Shadow element is disabled.

Hover Effects

Hover Effects add dynamic visual effects to the website. It helps to create more engaging and modern experiences for visitors. 

  • To enable gallery hover, toggle on the Hover Effect button. Choose hover animation in the drop-down: Scale, Shine, Grayscale, Sepia, Blur.

Duplicating the Gallery

  • To duplicate the gallery, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Layering the Gallery

To layer elements within Site Editor, follow these steps:

  • Add a new element over the existing one. The newly added element will be on the top layer:

  • Click on the element and select Move Forward or Move Backward options:

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.

Deleting the Gallery

To delete a gallery:

  • Click on it and choose the Remove button [Bin] that appears in its toolbar: