--- title: "Using FooGallery with Divi Builder" id: "197351" type: "knowledgebase" slug: "foogallery-divi-builder" published_at: "2026-09-11T08:52:15+00:00" modified_at: "2026-09-11T08:52:15+00:00" url: "https://fooplugins.com/documentation/foogallery/getting-started-foogallery/foogallery-divi-builder/" markdown_url: "https://fooplugins.com/documentation/foogallery/getting-started-foogallery/foogallery-divi-builder.md" excerpt: "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 Add a gallery with the FooGallery module The Divi module..." taxonomy_knowledgebase_cat: - "FooGallery Basics" --- [FooGallery Basics](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/) # Using FooGallery with Divi Builder ## Related Articles - [Installing FooGallery](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/installing-foogallery/) - [FooGallery 101](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/foogallery-101/) - [Creating Galleries (Video)](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/creating-galleries-video/) - [Retina Ready Images](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/retina-ready-images/) - [Adding Albums to FooGallery](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/adding-albums/) - [NextGen Importer Tool](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/nextgen-importer-tool/) - [Setting a Default Gallery](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/setting-default-gallery/) - [Global Settings](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/global-settings/) - [FooGallery PRO Starter vs. PRO Expert](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/pro-starter-vs-pro-expert/) - [Using Import / Export](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/import-export/) - [Using The Advanced Attachment Modal](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/advanced-attachment-modal/) - [FooGallery Features List](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/foogallery-features-list/) - [Migrate to FooGallery](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/migrate-to-foogallery/) - [Using FooGallery Media Audit](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/foogallery-media-audit/) - [FooGallery Media Audit Findings Reference](https://fooplugins.com/documentation/foogallery/getting-started-foogallery/foogallery-media-audit-findings-reference/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) 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 1. Open the page with Divi Builder. 2. Add a new module and search for **FooGallery**. 3. Choose the gallery you want to display from the module settings. 4. Save the module, then save or publish the page. 5. 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](/documentation/foogallery/troubleshooting-foogallery/gallery-loading-compatibility-settings/) . For integration history, see the [FooGallery changelog](/changelog/foogallery/) . Resources ## Find the right next step Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)