Skip to main content

Gallery

The Gallery element displays multiple Overlay elements within a grid. It has Image, Video, Title, Meta, Content, Link, Hover Image and Tags fields.

Columns and Gaps

The Gallery element has options to set the number of columns for each breakpoint. Alternatively, expand the columns to the width of their items filling the rows accordingly. Set the size of the column and row gaps between gallery items. Optionally, show a divider between them.

Center Columns

If the last row does not have enough columns, there is an option to center columns horizontally. If gallery items have different heights, they can be centered vertically.


Parallax

Enable the parallax effect to move single gallery columns at different speeds while scrolling.

Filter

To filter the gallery items by tags, enable the filter navigation. Define the animation that will be applied to the content items when filtering between them, set the style for the filter navigation and position it in regards to content.

Lightbox

There is an option to open the gallery item links in a lightbox gallery. This could be an image, video, or YouTube or Vimeo link. Any other link will be opened in an iframe. Additionally, the title and content can be shown in the lightbox caption.

Mixed Image Orientation

By default, all images are resized and cropped using the same width and height value no matter if they are in portrait or landscape mode. To mix both portrait and landscape images, enable mixed image orientation. Width and height will be flipped accordingly.

More Settings

Since the Gallery element displays multiple overlays, their settings are explained in the Overlay element documentation. Options for the different content fields are very similar across all elements. They are described in the corresponding Image, Headline, Text and Button elements.