This guide shows you how to display images in a responsive multi-column grid with filter tabs and lightbox, using Divi Gallery Extended. To see the feature and all of its options, visit the Grid Gallery page.

Adding module to a page

Follow these steps to add the module:

1. Open Divi Builder.
2. Create or select an existing row.
3. Click Add New Module.
4. Search for Grid Gallery and click to insert it.

Content settings

Image selection and layout

Configure your image selections, layout grid structure, and display options in the Content tab of the module:

• Images: Click the + icon to select or upload multiple images from the WordPress Media Library to include in your gallery layout. You can also reorder or remove existing image thumbnails directly from the picker grid.
• Image Size: Select the image resolution size (e.g., Medium, Thumbnail, Large, or Full Size) to load from WordPress for optimal layout rendering and page performance.
• Number Of Columns: Set the number of columns (e.g., 1, 2, 3, 4, 5, or 6) to define how many images appear side-by-side in each row of the grid.
• Column Spacing: Use the slider or type a pixel value (e.g., 20px) to set the horizontal and vertical gap spacing between grid image cards.
• Disable Lazy Loading: Toggle this switch ON if you want all gallery images to load immediately on initial page load without waiting for browser viewport scrolling.
• Empty Gallery Text: Enter a custom fallback text message (e.g., “No Gallery Images Found!!”) to display if the gallery contains no images or if filtering returns zero results.
• OnClick Trigger: Choose the action that occurs when a visitor clicks on an image card (e.g., None, Open in Lightbox, or Redirect to URL).

Elements settings

Control category filter buttons, titles, captions, and hover overlay behaviors under the Elements settings group:

• Enable Filterable Gallery: Toggle this switch ON to display category filter buttons at the top of your gallery grid, allowing visitors to filter images by media categories.
• Show All Images Filter: Toggle this switch ON to include a default reset button in the filter menu that displays all gallery images when clicked.
• All Images Text: Enter a custom label text (e.g., “Collection” or “All Items”) for the main filter button that resets and shows all gallery images.
• Show Title: Toggle this switch ON to display the image title text on your gallery cards.
• Show Title In: Choose where the image title appears (e.g., set to Overlay to display the title over the image during hover, or select position options like below/above the image).
• Show Caption: Toggle this switch ON to display the WordPress media caption text for each gallery item.
• Enable Overlay On Hover: Toggle this switch ON to display a semi-transparent background color layer and icon when hovering over a gallery image card.
• Overlay Style: Select the hover animation transition style for the overlay layer (e.g., Slide Bottom, Fade, or Zoom).
• Overlay Icon: Use the icon picker to select a custom icon (such as a search zoom icon or link chain icon) to display inside the hover overlay.

Pagination settings

• Images Per Page: Set the maximum number of images displayed per page view.
• Pagination Type: Choose between Numbered Pagination and Load More Button.

Design settings

Overlay and hover effects

• Overlay Background Color: Set the background color and opacity displayed when a visitor hovers over an image card.
• Overlay Icon Style: Select custom icon shapes, size, and color for the hover overlay.
• Image Hover Animation: Choose hover scaling or zoom effects for image cards.

Card and grid spacing

• Column Gap: Adjust the horizontal spacing between grid columns.
• Row Gap: Adjust the vertical spacing between grid rows.
• Card Border & Corner Radius: Set border styles, border colors, and rounded corners (border-radius) for individual image cards.
• Box Shadow: Apply custom drop shadows to gallery image cards.

Filter tabs styling

• Tab Background Color: Set custom background colors for normal and active filter tabs.
• Active Tab Style: Define distinct background and text colors to highlight the currently selected category tab.
• Tab Typography & Border: Customize font size, letter spacing, font weight, border radius, and padding for category buttons.

Typography controls

• Title Text: Customize font family, weight, size, color, and line height for image titles.
• Caption Text: Customize font styles for image captions.

Frequently asked questions

How do category filter tabs work?

Category filter buttons use client-side filtering to immediately organize and display matching images when clicked, without requiring a full page refresh.

Can I set different column counts for mobile devices?

Yes. You can configure separate column counts for Desktop (e.g., 4 columns), Tablet (e.g., 2 columns), and Mobile (e.g., 1 column).