The Gallery element displays a customizable image gallery with options for captions, hover effects, and a lightbox.
Add a Gallery element to your page from Add+ > Helpers > Gallery.
Adding Images to the Gallery
Gallery Source
The Gallery Source is where you populate your Gallery with images. You have three options:
Media Library - specify Image IDs that exist in your WordPress media library. Click Browse to select images from your WordPress media library.
ACF - use a Gallery field from the Advanced Custom Fields plugin
WooCommerce - display the images product gallery for the specified WooCommerce product
Link Images
Choose yes to link the image to its full size image file, or no to disable the link.
Add Lightbox
This option appears when Link Images is set to yes. Instead of linking to the image file itself, the image will be displayed in a lightbox.
Gallery Styling
Layout
This controls the layout of the gallery, including the image aspect ratio, number of images per row, and spacing between images.
Layout - choose either flex or masonry. Flex keeps all images in orderly rows, while masonry arranges images based on their own sizes and the number of images per row.
Image Aspect Ratio - if flex is chosen for the Layout, specify an image aspect ratio like 16:9 (widescreen), 21:9 (cinematic), 1:1 (square), etc.
Images Per Row - set the maximum number of images displayed in each row.
Space Around Image - control the spacing between each image.
Image Min Width - Use this property to make the gallery responsive. Images will not be displayed narrower than this width.
Captions
Show Captions - choose yes or no.
Caption Color - set the text color of the captions.
Caption Background Color - set the background color where captions are displayed.
Show Captions Only On Hover - choose yes or no.
Hide Captions Below - set a screen size below which captions will not be displayed.
Hover
Image Opacity - the image opacity when not hovered.
Hover Image Opacity - the image opacity when hovering over it with the mouse.
Transition Duration - set the duration of the transition for the image hover opacity, and the display of the caption if it is present.