FooGallery works with Divi Builder through its dedicated FooGallery module, and you can still use a gallery shortcode when that better suits the page you are building.
Before you start
- Create the gallery in FooGallery → Galleries and publish or update it.
- Make a note of the gallery title so it is easy to find in Divi.
- Open the WordPress page or post that should display the gallery.
Add a gallery with the FooGallery module
- Open the page with Divi Builder.
- Add a new module and search for FooGallery.
- Choose the gallery you want to display from the module settings.
- Save the module, then save or publish the page.
- View the public page and check the gallery at desktop and mobile widths.
The Divi module displays a gallery that is managed in FooGallery. To change its images, layout, captions, filtering, or other gallery settings, edit the original gallery and update it.
Use a FooGallery shortcode in Divi
You can also copy the gallery shortcode from FooGallery and place it in a Divi Code or Text module. A shortcode looks like this:
[foogallery id="123"]Code language: JSON / JSON with Comments (json)Replace 123 with the ID of your gallery. The dedicated module and shortcode both point to the same saved FooGallery gallery.
Classic Builder, Visual Builder, and the public page
FooGallery supports Divi’s classic editing flow and Visual Builder. A builder preview can occasionally hold an older cached version of a gallery, so use the public page as the final check after saving.
If the gallery is missing or the preview is stale
- Confirm that the FooGallery gallery and the Divi page have both been saved.
- Refresh or reopen the Visual Builder after changing the gallery.
- Clear Divi’s static CSS cache, the page cache, and any CSS or JavaScript minification cache.
- Temporarily exclude FooGallery scripts from delay or defer settings in an optimization plugin.
- Compare the classic builder, Visual Builder, and public page to identify whether the problem is limited to one preview.
If thumbnails remain hidden or the gallery appears only after interaction, continue with Gallery Loading and Compatibility Settings.
For integration history, see the FooGallery changelog.
