Gallery

The gallery element allows you to display multiple images, videos, and galleries in different layouts and features, such as a grid layout, a slider, and a lightbox.

You can manually add items to a gallery or dynamically using the Gallery Data Point.

Content Controls

Content

This section allows you to set up and customize the gallery’s layout and content types, whether displaying single images, videos, or multiple galleries. Customize each image or video with captions, links, and decide if it should open in a new tab, plus manage how images are loaded to optimize site speed.

• Type – Choose between displaying a single item or multiple items within the gallery.
• Images – Manage individual images or videos. This option is available when the gallery type is set to ‘single’.
  • Type – For each image, choose whether it’s a still image or a video.
  • Image – Upload or select an image from the media library. Available when the content type is set to ‘image’.
  • Video – Provide a video file or URL. Available when the content type is set to ‘video’.
  • Caption – Add a descriptive caption for each image or video.
• Galleries – Manage multiple galleries. This is available only when the gallery type is set to ‘multiple’.
  • Title – Set a title for each gallery within the collection.
  • Images – Manage images within each gallery.
  • Icon – Choose an icon to represent the gallery.
• Filter Bar – Add a filter bar to allow visitors to filter through the gallery content. This is only enabled for multiple item types.
  • All Filter – Enable a filter for all items within the galleries. Available when the filter bar is active.
  • All Label – Customize the label for the ‘All’ filter. This is dependent on All Filter being enabled.
• Link – Define how images link.
• New Tab – Choose to open links in a new tab. Available only if Link is set to ‘Custom URL’.
• Image Size – Select the size of the images to be displayed in the gallery.
• Lazy Load – Enable lazy loading for images to improve page load times.
• Advanced – Advanced options for the gallery.
  • Disable Srcset & Sizes – Disable srcset and sizes for responsive image handling if needed.

Design Controls

Layout

Manage the overall structure and appearance of your gallery. Adjust the layout to suit different content types like images or sliders, and fine-tune details such as width, spacing, and orientation to create the perfect display for your visual content.

• Width – Set the overall width of the gallery to ensure it fits well within your page layout.
• Type – Choose the layout type, whether it’s a grid, masonry, slider, or another format, to best display your collection.
• Row Height – Specify the row height, applicable when the gallery type is set to ‘justified’.
• Aspect Ratio – Define the aspect ratio of the images, available for grid layouts to maintain consistency in image presentation. Requires the gallery type to be set to ‘grid’.
• Custom Height – Set a specific height for the images when a custom aspect ratio is selected.
• Columns – Determine the number of columns in a ‘grid’ or ‘masonry’ gallery type, allowing for a flexible arrangement of images.
• Gap – Adjust the space between images; this setting is not applicable to the ‘slider’ gallery type.
• Vertical At – Control when the layout switches to a vertical format. Not applicable for the ‘slider’ gallery type.
• Slider – Configure slider-specific settings if this layout is chosen, enhancing the interactive element of the gallery. Learn more about Slider controls.
• Slider Images – Control the appearance and arrangement of images within the slider.
  • Aspect Ratio – Choose the aspect ratio for images to maintain consistency in size and shape across the slider.
  • Vertical Align – Align images vertically within the slider, which can be crucial for maintaining a balanced look when aspect ratios vary.
  • Width – Set the width of the images within the slider, ensuring they fit perfectly within the allotted space.
  • Height – Determine the height of images, which is essential for aligning content and ensuring it displays correctly within the slider.

Images

Enhance and customize the visual presentation of your gallery images with a variety of settings. Adjust the background, manage opacity, apply filters, and define borders to create a distinctive look. Whether you’re aiming for a subtle enhancement or a bold transformation, these controls offer the flexibility needed for any design.

• Background – Set a background color for your images to enhance visibility or to align with your design aesthetic.
• Opacity – Adjust the opacity of your images to create effects like blending with the background or softening the overall impact.
• Filters – Access a suite of filters to apply various visual effects directly to your images within the gallery.
  • Filter Items – Add and configure multiple filters for your images, each with customizable settings.
    • Type – Choose the type of filter to apply, such as blur, brightness, contrast, and more from a dropdown menu.
    • Blur Amount – Specifically adjust the blur intensity on your images; this option is available only when the ‘Blur’ filter type is selected.
    • Amount – Set the degree of the selected filter effect like brightness or contrast, available for filters that support variable intensities.
    • Rotate – Apply a hue rotation filter to your images for color adjustment; this is selectable when ‘Hue-Rotate’ is chosen as the filter type.
• Borders – Define the borders around your images, customizing radius and style for a distinct boundary.
  • Radius – Set the radius of your image borders to control the curvature at the edges, perfect for softening the overall appearance or creating rounded images.
  • Styling – Fine-tune the appearance of the borders with complex styles, including color, width, and pattern adjustments.
  • Shadow – Apply a shadow effect to the borders for added depth and prominence on the page.
• Shadow – Enable a shadow effect directly to the images to enhance their visual hierarchy; available unless the gallery is set in a slider layout.
• Hover Animation – Choose an animation effect that triggers when a user hovers over an image, adding an interactive element.
• Duration – Set the duration for the hover animation, controlling how quickly the animation plays on user interaction.

Captions

Enhance your images with captions to provide context or additional information. Control when and how these captions appear with options for animations, positioning, and styling. Customize the appearance to match your site’s design, ensuring readability and aesthetic coherence.

• Show Captions – Choose whether to display captions always, on hover, or not at all.
• Animation – Select the animation style for captions, such as fade or slide; this option is enabled only when captions are set to show ‘on hover’.
• Duration – Set how long the animation takes to complete, available only when captions show on hover.
• Position – Determine the position of the caption in relation to the image, such as top, bottom, or overlaid across the center.
• Background – Customize the background color of the caption area to enhance readability or match your design.
• Typography – Fine-tune the font, size, color, and other typography settings for the caption text.
• Padding – Adjust the spacing inside the caption area to ensure the text is positioned correctly.
• Hide below – Set a breakpoint below which captions are hidden, useful for responsive designs.

Lightbox

Create a dynamic viewing experience with a customizable lightbox that showcases your images in full-screen mode. Adjust background settings, control navigation, and enable thumbnails for a rich interactive experience. Set autoplay features and adjust the lightbox to trigger only under specific conditions.

• Background – Choose a color for the lightbox background to complement or contrast with your images for greater impact.
• Controls – Customize the color of the lightbox controls to ensure they are visible against the background.
• Thumbnails – Toggle the display of image thumbnails within the lightbox for easier navigation.
• Thumbnail – Set the color for the thumbnails; available only when thumbnails are enabled.
• Thumbnail Active – Highlight the currently viewed image with a distinct color for its thumbnail; only active when thumbnails are used.
• Animated Thumbnails – Enable animations for thumbnail appearances, adding a dynamic flair to navigation.
• Autoplay – Allow images to cycle automatically within the lightbox.
• Speed – Control the speed of the autoplay feature; this setting is accessible only if autoplay is activated.
• Show Download Button – Provides a button users can click to download a gallery item.
• Disable Autoplay on First Video – Prevent the first video in the gallery from playing automatically.

Filter Bar

Customize the filter bar to facilitate content discovery on your gallery. This section allows you to adjust the filter’s orientation, style, and responsiveness to enhance user interaction and match the design aesthetics of your website.

• Vertical – Toggle between a vertical or horizontal layout for the filter bar.
• Tabs Width – Set the width for the Tabs.
• Horizontal At – Specify the breakpoint for the horizontal layout, active only when the filter bar is set to vertical.
• Style – Choose a style for the filter bar from a selection of predefined styles.
• Position – Set the position of the filter bar; options are dependent on the filter bar’s orientation.
• Space Between – Adjust the space between filter items, available when the position and style settings are appropriately configured.
• Space After – Define the space after the filter bar, applicable when the bar is not set to inherit its position.
• Separator – Set the separator color and width for Tabs. Available when the the style is set to ‘Tabs’.
• Bar – Access more detailed settings for the bar’s appearance, such as separators, radius, and shadow, when the style is set to ‘bar’.
• Pill Radius – Adjust the radius for pill-shaped filters, available when the style is set to ‘pills’.
• Text – Customize the typography of the filter items, including font, size, and color settings.
• Background – Set the background color for the filter bar, with options for different states like inactive, hover, and active.
• Underline – Configure the underline style for active filter items, not available for pill-shaped filters.
• Icon – Customize the size and placement of icons within the filter bar, if applicable.
• Responsive – Adjust settings for responsive display, including dropdown visibility and styling for mobile views.
• Transition Effect – Set the transition effect speed, enhancing the interactive feel of the filter bar.

Spacing

Manage the spacing around and within the gallery to ensure that it harmoniously fits within the layout of your page. This section allows for precise control over margins and the overall container spacing to optimize visual flow and alignment.

• Container – Define the spacing inside the gallery container, with settings for top and bottom margins.
• Margin Top – Adjust the top margin of the gallery, which helps in aligning the gallery with other page elements.
• Margin Bottom – Set the bottom margin to manage spacing below the gallery for consistent separation from subsequent content.