Gallery

Gallery displays multiple images as a grid or slider, with optional filtering, captions, links, and lightbox behavior. Use it for a portfolio or image collection.

Add and configure Gallery

1. Click Add, choose Gallery, and place it in the container.
2. Choose Content > Content > Type and populate Images or Galleries as appropriate.
3. Configure Filter Bar, Link, New Tab, Image Size, and Lazy Load.
4. Set Design > Layout, then style Images, Captions, Lightbox, and Filter Bar.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting	Purpose and options	Behavior
Type	Single, Multiple.	Shared
Images	Add, edit, remove, and reorder images. When: Type ≠ Multiple.	Shared
Images > Type	Image, Video. When: Type ≠ Multiple.	Shared
Images > Image	WordPress media. When: Type ≠ Multiple and Type = Image.	Shared
Images > Video	Set video. When: Type ≠ Multiple and Type = Video.	Shared
Images > Caption	Enter the caption. When: Type ≠ Multiple.	Shared
Images > Custom URL	Set custom url. When: Type ≠ Multiple and Link = Custom URL.	Shared

Shown when Type = Multiple.

Setting	Purpose and options	Behavior
Galleries	Add, edit, remove, and reorder galleries.	Shared
Galleries > Title	Item title.	Shared
Galleries > Images	Add, edit, remove, and reorder images.	Shared
Galleries > Images > Type	Image, Video.	Shared

Setting	Purpose and options	Behavior
Galleries > Images > Image	WordPress media. When: Type = Multiple and Type = Image.	Shared
Galleries > Images > Video	Set video. When: Type = Multiple and Type = Video.	Shared
Galleries > Images > Caption	Enter the caption. When: Type = Multiple.	Shared
Galleries > Images > Custom URL	Set custom url. When: Type = Multiple and Link = Custom URL.	Shared
Galleries > Icon	Icon. When: Type = Multiple.	Shared
Filter Bar > All Filter	On/off. When: Type = Multiple.	Shared
Filter Bar > All Label	Enter the all label. When: Type = Multiple and All Filter is set.	Shared
Link	None, Lightbox, Custom URL, Media File.	Shared
New Tab	On/off. When: Link = Custom URL.	Shared
Image Size	Registered WordPress or custom image size.	Shared
Lazy Load	On/off.	Shared
Advanced > Disable Srcset & Sizes	On/off.	Shared

Design > Layout

Setting	Purpose and options	Behavior
Width	Width.	Responsive
Type	Grid, Masonry, Justified, Slider.	Shared
Row Height	Row height and unit. When: Type = Justified.	Responsive
Aspect Ratio	1:1, 3:2, 4:3, 16:9, 21:9, Custom. When: Type = Grid.	Shared
Custom Height	Custom height and unit. When: Aspect Ratio = Custom.	Shared
Columns	Set columns. Range: 1–10. When: Type = Grid, Masonry.	Responsive
Gap	Space between items. When: Type ≠ Slider.	Responsive
Vertical At	Breakpoint. When: Type ≠ Slider.	Shared
Slider	slider controls. When: Type = Slider.	See linked controls
Slider Images > Aspect Ratio	1:1, 3:2, 4:3, 16:9, 21:9, Custom. When: Type = Slider.	Shared
Slider Images > Vertical Align	fTop, center, Bottom. When: Type = Slider and Aspect Ratio = Custom.	Shared
Slider Images > Width	Width. When: Type = Slider.	Responsive
Slider Images > Height	Height. When: Type = Slider and Aspect Ratio = Custom.	Responsive

Design > Images

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Hover
Opacity	Set opacity. Range: 0–1.	Hover
Filters > Filter Items	Add, edit, remove, and reorder filter items.	Hover
Filters > Filter Items > Type	blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia.	Shared
Filters > Filter Items > Blur Amount	Blur amount and unit. When: Type = blur.	Shared
Filters > Filter Items > Amount	Amount and unit. When: Type = brightness, contrast, grayscale, invert, saturate, sepia.	Shared
Filters > Filter Items > Rotate	Rotate and unit. When: Type = hue-rotate.	Shared
Borders	borders controls.	See linked controls
Shadow	Shadow offset, blur, spread, color. When: Type ≠ Slider.	Hover
Hover Animation	Zoom In, Zoom Out, Slide Up, Slide Bottom, Slide Left, Slide Right.	Shared
Duration	Duration and unit.	Shared

Design > Captions

Setting	Purpose and options	Behavior
Show Captions	Never, Always, On Hover.	Shared
Animation	Fade, Zoom In, Zoom Out, Slide Up, Slide Down, Slide Left, Slide Right. When: Show Captions = On Hover.	Shared
Duration	Duration and unit. When: Show Captions = On Hover.	Shared
Position	Top, Bottom, Stretch.	Shared
Background	Color or supported fill.	Shared
Typography	typography controls.	See linked controls
Padding	spacing controls.	See linked controls
Hide below	Breakpoint.	Shared

Design > Lightbox

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Controls	Color or supported fill.	Hover
Thumbnails	On/off.	Shared
Thumbnail	Color or supported fill. When: Thumbnails is set.	Shared
Thumbnail Active	Color or supported fill. When: Thumbnails is set.	Shared
Animated Thumbnails	On/off.	Shared
Autoplay	On/off.	Shared
Speed	Speed and unit. When: Autoplay is set.	Shared
Show Download Button	On/off.	Shared
Disable Autoplay on First Video	On/off.	Shared

View the page on the frontend to preview the lightbox.

Design > Filter Bar

Setting	Purpose and options	Behavior
Vertical	On/off. When: Type = Multiple.	Shared
Tabs Width	Tabs width and unit. When: Type = Multiple and Vertical is set.	Responsive
Horizontal At	Breakpoint. When: Type = Multiple and Vertical is set.	Shared
Style	Tabs, Pills, Bar. When: Type = Multiple.	Shared
Position	Left, Right. When: Type = Multiple and Vertical is set.	Shared
Position	Left, Center, Right, Full Width. When: Type = Multiple and Vertical is unset.	Shared
Space Between	Space between and unit. When: Type = Multiple and Position ≠ Full Width or Style ≠ Bar.	Shared
Space After	Space after and unit. When: Type = Multiple and Position ≠ Full Width.	Responsive

Shown when Type = Multiple and Style = Bar.

Setting	Purpose and options	Behavior
Bar > Separator	Color or supported fill.	Shared
Bar > Radius	Radius and unit.	Shared
Bar > Shadow	Shadow offset, blur, spread, color.	Shared

Setting	Purpose and options	Behavior
Pill Radius	Pill radius and unit. When: Type = Multiple and Style = Pills.	Shared
Separator > Color	Color or supported fill. When: Type = Multiple and Style = Tabs.	Shared
Separator > Width	Width. When: Type = Multiple and Style = Tabs.	Shared

Shown when Type = Multiple.

Setting	Purpose and options	Behavior
Text > Typography	typography controls.	See linked controls
Text > Hover	Color or supported fill.	Shared
Text > Active	Color or supported fill.	Shared
Background > Inactive	Color or supported fill.	Shared
Background > Hover	Color or supported fill.	Shared
Background > Active	Color or supported fill.	Shared

Shown when Type = Multiple and Style ≠ Pills.

Setting	Purpose and options	Behavior
Underline > Hover	Color or supported fill.	Shared
Underline > Active	Color or supported fill.	Shared
Underline > Width	Width.	Shared
Underline > Radius	Radius and unit.	Shared

Setting	Purpose and options	Behavior
Padding > Vertical	Vertical and unit. When: Type = Multiple.	Shared
Padding > Horizontal	Horizontal and unit. When: Type = Multiple.	Shared
Icon > Size	Size and unit. When: Type = Multiple and Align ≠ none.	Shared

Shown when Type = Multiple.

Setting	Purpose and options	Behavior
Icon > Nudge > Nudge X	Nudge x and unit.	Shared
Icon > Nudge > Nudge Y	Nudge y and unit.	Shared
Icon > After Icon	After icon and unit.	Shared
Responsive > Show as Dropdown	On/off.	Shared

Shown when Type = Multiple and Show as Dropdown is set.

Setting	Purpose and options	Behavior
Responsive > Visible At	Breakpoint.	Shared
Responsive > Dropdown Styles > Background	Color or supported fill.	Shared
Responsive > Dropdown Styles > Borders	borders controls.	See linked controls
Responsive > Dropdown Styles > Padding	spacing controls.	See linked controls
Responsive > Dropdown Styles > Typography	typography controls.	See linked controls

Setting	Purpose and options	Behavior
Responsive > Show Affordance	On/off. When: Type = Multiple and Show as Dropdown is unset.	Shared
Responsive > Color	Color or supported fill. When: Type = Multiple and Show Affordance is set.	Shared
Transition Effect	Transition effect and unit. When: Type = Multiple.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
Container	spacing controls. When: Container is set and Margin Top is unset or Container is set and Margin Bottom is unset.	See linked controls
Margin Top	Space outside the element above it. When: Container is unset or Margin Top is set or Margin Bottom is set.	Responsive
Margin Bottom	Space outside the element below it. When: Container is unset or Margin Bottom is set or Margin Top is set.	Responsive

Troubleshooting