Gallery

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

Table of Contents

• Adding Gallery
• Option 1
• Option 2
• Moving and Resizing Gallery
• Customizing Gallery
• Editing Gallery
• Layout Settings
• Style Settings
• Deleting Gallery
• More Menu

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:

• 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:

• 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).

Adding a Link 

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.

Removing the Image

• To remove a photo from the Gallery, click the Remove button [Bin]:

Editing Gallery 

• To customize a Gallery, click on the element to open the editing menu:

Add Photo 

You can add images to the Gallery via the editing 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:

Layout Settings

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

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

• Change the Photo Size 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.

Style Settings

• Select the Aspect Ratio for the image placeholders in the Gallery among Square, Standard, Standard (vertical), Four-three, Three-four (vertical), Widescreen, Anamorphic Widescreen:

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

• You can add a Caption for all images in the Gallery. To set the Caption, enable the Show Caption toggle:

• 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.

• 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:

• You can change a separate Border Location by clicking a special Icon and choosing a preferable option among: Top, Right, Bottom, Left:
• The Gallery Corner 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.

The Drop 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 Blur, and the positioning of the Shadow.

• 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:

Deleting Gallery

• Click the Remove button [Bin]:

• The element will be removed immediately.

More Menu

• Click the More icon in the editing menu to access the available options:

• Cut. Click Cut or Ctrl+X to cut your element.
• Copy. Click Copy or Ctrl+C to copy your element.
• Duplicate. Click Duplicate or Ctrl+D to duplicate your element. The duplicate will appear immediately.
• Delete. Click Delete to remove the element. The element will be deleted immediately.
• Move Forward. Click Move Forward or Ctrl+⇓ to move your element.
• Move Forward. Click Move Forward or Ctrl+⇑ to move your element.