With DonDivi Gallery, you can organize images in masonry or grid layouts, enable filtering, add pop-ups or URLs on click, highlight featured images, and apply load-more or pagination features.
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the dondivi-builder.zip file.
Click on the Install Now button.
When the DonDivi Builder is installed, a new module named DonDivi Gallery appears in the Divi Builder.
Additionally, three new fields will appear in the Media Library attachment details for images:
DonDivi Media Categories
DonDivi Destination URL
DonDivi Featured Image
We'll reference these later in the documentation.
Overview
Use DonDivi Gallery to display a gallery of images anywhere on your site. It includes multiple grid layouts (Masonry or standard Grid), overlay effects, clickable images, popups, image URLs, featured images, pagination, load-more buttons, category filters, transition animations, and more.
Most fields are responsive, ensuring your gallery looks great on all devices.
Add DonDivi Gallery
Click on the Add Module button.
Search for DonDivi Gallery.
Click on it to add it to your page.
DonDivi Gallery Settings
Content tab
Gallery:
Image: Choose the Images to be added to the DonDivi Gallery module from your WordPress Media Library.
Image Count: Maximum number of images shown per page. Leave empty to display all selected images. Often used alongside pagination or "load more" to limit the initial set of images.
Image Order: Choose the sorting method:
Default: Same order as you selected the images.
Date: new to old or Date: old to new.
Title: a-z or Title: z-a.
Random: Display images in random order.
Filterable Gallery: If you categorize images (using DonDivi Media Categories in the Media Library), enabling this shows filter buttons. Users can then filter images by category. The Design Tab includes style options for these filter buttons.
Load More: If you aren't displaying all the images at once, let visitors click a button to load additional ones.
Enable this, then set your button text (which is responsive).
Each click loads the next batch of images, according to the Image Count value.
A new Load More design options group will appear in the Design Tab if this option is enabled.
Show Pagination: Enable numeric pagination for the gallery.
Image Count determines the number of images per page.
You can choose which devices show pagination via responsive settings.
Images:
Image Size: You can choose which WordPress image size to load (thumbnail, medium, large, full, etc.). The default is full. Using smaller sizes can improve performance.
Enable Zoom Effect: Applies a zoom animation on hover. Disabled by default.
Enable Overlay: Displays an overlay when hovered over. If enabled, the following options can be used:
Show Title: Overlays the image title (from Media Library).
Show Caption: Overlays the image caption (from Media Library).
On click: Choose the behaviour when images are clicked:
None: Nothing happens on click.
Open in Lightbox: This opens a pop-up (lightbox) with the image. You can also choose whether the title and caption show up. Additional lightbox styling options will appear in the Design Tab → Lightbox.
URL: Uses the URL from the DonDivi Destination URL field in the Media Library of each image. The image becomes a link.
Design tab
Gallery:
Layout: Choose the layout used to display the selected images:
Masonry: Places images in an optimal, vertical masonry layout.
Horizontal Order: If enabled, tries to keep images in left-to-right order when stacking. If in doubt, use standard masonry.
Grid: Place Images in a Grid layout:
Columns: Specify the number of columns to display for each device size. We recommend a mobile-first approach, defining columns for phones, tablets, and desktops.
Gap: Controls spacing (gutter) between images, default is 10px.
Gallery Margin and Padding: Adjust spacing around the entire gallery.
Images:
Image Alignment: Horizontally align images within their cells (if not filling the entire cell).
Fit to Container: Forces each image to occupy its grid cell. Enabled by default.
Border fields: Add borders and rounded corners to gallery images.
Overlay: This option group is available if the Enable Overlay option in the Content tab → Images is set to yes:
Overlay Background Color: Choose the overlay's background color.
Overlay Icon: Choose which icon to display in the overlay.
Overlay Icon Color: Select the color for the overlay icon.
Overlay Icon Width: Choose the size of the overlay icon.
Overlay Padding: Choose the amount of inner padding the overlay has.
Overlay Text: This option group is available if the Show Title or Show Caption options in the Content tab → Images is set to yes:
Title: Choose the text styles for the title text that appears when images are hovered over.
Caption: Choose the text styles for the caption text that appears when images are hovered over.
Featured Image: You can mark images as Featured in the Media Library (DonDivi Featured Image) and then style them differently.
Column Span: If you want featured images to span more than one column, enable this and specify the number of columns (for example, two out of four columns will take half the grid width).
Width: For standard grids only, this setting allows you to specify a custom width for featured images.
Navigation: Choose the design option for the Filter and Pagination:
Filters: Style the Filters buttons, if in the Content Tab → Gallery, the Filterable Gallery option is enabled
Pagination: Style the pagination, if in the Content Tab → Gallery, the Show Pagination option is enabled.
Load More: Style the Load More button.
Image Animation: DonDivi Gallery can animate images that appear after a filter or pagination action:
Enter Effect: Select how new images animate in:
Fade, Slide, Zoom, etc. (Default is Zoom).
Enter Effect Animation Intensity: How strong/subtle (default 100%).
Opacity: An extra fade factor (not for fade effects).
Duration: Animation length in ms (default 400ms).
Sizing: Choose the DonDivi Gallery module's size, including width, max width, module alignment, and more.
Spacing: You can select the spacing of the DonDivi Gallery module, including margin (outer spacing) and padding (inner spacing).
Border: Add custom borders or rounded corners to the DonDivi Gallery module.
Box Shadow: Apply shadow effects to highlight the DonDivi Gallery module.
Filters: Select the filters for the DonDivi Gallery module.
Transform: Select the transform styles for the DonDivi Gallery module.
Animation: Select the animation for the DonDivi Gallery module.