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.
  • Settings – Manage settings for the gallery slider type
    • Effect – Select the transition effect for the slider, such as fade or slide.
    • Coverflow – Enable a coverflow effect, adding depth and perspective to the slider display. This is available only when the effect is set to ‘coverflow’.
      • Shadow – Toggle shadow effects for a dynamic visual impact in the coverflow layout.
      • Depth – Adjust the depth perception of the coverflow effect to suit your visual style.
      • Rotate – Set the rotation angle for slides, enhancing the 3D effect of the coverflow.
      • Stretch – Control the stretch parameter of slides within the coverflow effect to customize its appearance.
    • Speed – Determine the transition speed of the slider, ensuring smooth motion that matches the pace of your site.
    • Infinite – Toggle infinite looping of slides, which is great for continuous display of content.
    • Center Slides – Ensure slides are centered within the slider view, enhancing the focus on the main content. Available when Infinite is active.
    • Autoplay – Enable slides to play automatically, which is useful for showcasing images without user interaction.
    • Autoplay Settings – Manage how Autoplay functions. Available when Autoplay is enabled
      • Speed – Set the speed for autoplay, which controls how fast the slides change.
      • Stop On Interaction – Pause autoplay when a user interacts with the slider, providing control to the viewer.
      • Pause On Hover – Automatically pause the slider when a mouse hovers over it, a user-friendly feature for examining details.
    • Advanced – More advanced settings for the slider.
      • Swipe On Scroll – Allow users to swipe through slides on touch devices, enhancing mobile responsiveness.
      • Auto Height – Adjust the slider height automatically based on the content, which helps maintain layout consistency.
      • Between Slides – Set the spacing between individual slides, which helps to define the separation and grouping within the slider.
      • Slides Per View – Determine how many slides are visible at one time within the slider viewport. This setting is adjustable except when using specific effects like flip or fade.
      • Initial Slide – Choose what slide is displayed on page load.
      • One Per View At – Decide at which breakpoint to display only one slide at a time, optimizing the slider for different screen sizes.
      • Slides Per Group – Set how many items in a slide are grouped together when a slide changes.
      • Disable Keyboard Control – Disable the ability to control the slider with a keyboard.
      • Play Animations On – Choose to have animations play when a slide first starts the transition or is ends the transition.
  • Arrows – Enable navigation arrows for the slider, allowing users to manually control slide transitions.
    • Disable – Turn off the display of navigation arrows, simplifying the slider interface.
    • Color – Customize the color of the slider arrows, ensuring they match your site’s design scheme.
    • Size – Adjust the size of the arrows to ensure they are easily visible without being obtrusive.
    • Overlay – Add an overlay effect to the arrows, which can enhance visibility against diverse backgrounds.
    • Space To Slides – Set the distance between the arrows and the slides, which helps prevent overlaying important image details.
    • Space To Edge – Control the spacing of arrows from the edge of the slider, aligning them perfectly within the design layout.
    • Custom Icons – Use custom icons for the navigation arrows, allowing for a unique presentation tailored to your branding or style preferences.
      • Next – Select a custom icon for the ‘next’ navigation arrow.
      • Previous – Choose a custom icon for the ‘previous’ navigation arrow.
  • Pagination – Configure how the slider pagination is displayed, allowing users to navigate through the slides more intuitively.
    • Type – Choose the type of pagination, such as bullets, progress bars, or fractions, to fit the style of your gallery.
    • Bullets – Use bullet points for simple and effective slide navigation. Available only when the pagination type is set accordingly.
      • Color – Customize the color of the pagination bullets, ensuring they stand out or blend in with your site’s design.
      • Size – Adjust the size of the pagination bullets, making them easier to see and use.
      • Space Between – Set the spacing between each pagination bullet, which can help prevent user errors and enhance aesthetic appeal.
      • Radius – Define the radius of the pagination bullets, adding a touch of style to the navigation elements.
    • Fraction – Enable fraction-based navigation for precise control over slide selection.
    • Progress Bar – Use a progress bar to visually indicate how far the user has navigated through the slider.
      • Background – Set the background color of the progress bar, ensuring it complements the overall design.
      • Progress – Choose a distinct color for the progress indicator within the bar, making it clear and noticeable.
      • Height – Adjust the thickness of the progress bar, matching it to the slider’s visual hierarchy.
      • Position – Decide the placement of the progress bar, whether it’s at the top, bottom, or aligned with other elements.
    • Overlay – Apply an overlay effect to the progress bar, enhancing its visibility against diverse backgrounds.
    • Margin – Set the margin around the pagination controls, providing space to prevent accidental interactions and to integrate smoothly into the layout.
• 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.