Tired of manually uploading and updating images in your gallery? A dynamic gallery is the perfect solution!

Though Divi doesn’t have a built-in option, plugins like DiviFlash can help. Its Advanced Gallery module lets you create a dynamic gallery with ease.

In this step-by-step guide, we will show you how to create dynamic gallery in Divi using the plugin.

What is Dynamic Gallery?

A dynamic gallery is a collection of images that automatically updates based on changes to its data source. The data source can be anything, such as media library category, custom post type, etc.

DiviFlash allows you to create Divi dynamic gallery using categories. After installing the plugin, a new menu called “DF Media Categories” will appear in the media section. From there, you can create categories and add images to them.

We will show you how to create categories, upload images to them, and then use those categories to create a dynamic gallery like the one below:

Step 01: Install and Activate the DiviFlash Plugin

To get started with DiviFlash, you need to install and activate the plugin on your WordPress site. Here’s how:

• Navigate to Plugins > Add New > Upload Plugin in your WordPress dashboard.
• Click on Choose File, select the “DiviFlash.ZIP” file from your computer, and click Install Now.
• Once the installation is complete, click Activate to enable the plugin.

If you haven’t purchased DiviFlash yet, you can get it directly from our official website or the Divi Marketplace.

With DiviFlash activated, you’re all set to start enhancing your Divi designs effortlessly!

Step 02: Upload Photos in the Media Library

Next, upload all the images you want to use in the gallery by going to Media > Add New Media File.

Also, write down each image caption/description if you want them to be displayed in the gallery. Simply click on each image and write the caption or description in the designated field.

To create a music brand gallery, we have uploaded all our images and added captions as well as descriptions to all of them.

Step 03: Upload Photos in the Media Library

Head over to Media > DF Media Categories to create a new category. Give your category a name, add a slug and description, then click “Add New Category.”

By following the same process, you can create as many categories as you want. For our gallery, we added four categories.

Step 04: Upload Photos in the Media Library

Go to the media library and choose either the list or grid view to categorize your uploaded images. The list view option allows you to add images to a category in bulk, while the grid view requires adding them one by one.

We will show you how to do both:

List Viewing Option (Recommended)

• First, select images you want to add to a category.
• Then choose “Add: (your category name)” from the “Bulk Actions” dropdown menu.
• Follow the same process to add images to the other categories.

Grid Viewing Option

• Click on an image.
• In the image details panel, select the appropriate category.
• Repeat the same process to add images to your respective category.

Note: We recommend using the list view option, as it allows for easy bulk management of images. Both options let you add as many images as you want.

We have added all our necessary images to the categories we created.

Step 05: Create a Dynamic Gallery Using the Module

After categorizing the images into specific categories, proceed to dynamic gallery creation. You can create a dynamic gallery on a new page or any of your existing pages. 

We are going for a new page:

• Go to your WordPress dashboard > Pages > Add New Page.
• Name your page and click “Use Divi Builder.”
• Select “Build From Scratch” and choose the number of columns you want from the row inserter. We will choose one column.
• Search for “Advanced Gallery” and click to insert it.
• Toggle on “Use Category,” which will bring up a new field named “Category.”

Note: In typical gallery creation, “Add New Item” is used for adding images. However, since we are creating a dynamic gallery, this step isn’t necessary. Instead, we will utilize the categories we previously created.

• Next, click on the “Category” drop-down menu and select the category names that you have created in step three. We have selected all our created categories.

At this point, you should see all the images in the gallery that have been added to respective categories in step four. Here is how our gallery looks:

• Use the “Image Order” option to set how images display: choose Random to shuffle, ASC for ascending order, or DESC for descending. We will select ASC for our gallery.

Although the dynamic gallery is nearly complete, it still requires styling to look its best. In the next step, we will use DiviFlash’s customization options to design the gallery.

Step 06: Create a Dynamic Gallery Using the Module

To help you with dynamic gallery styling, DiviFlash’s Advanced Gallery module has hundreds of customization options. Let’s apply some of them,

Customize the Gallery’s Appearance

Inside the “Gallery Settings,” you will find options to change image size, select how many images to display in a row, and choose a layout mode for your gallery. We are going to use all these for our gallery:

• Image Size: Medium
• Image In Row: 4 Items
• Layout Mode: Masonry

Add Navigation to Your Gallery

The advanced gallery module offers navigation options like filter buttons, load more buttons, or pagination. 

We are going with the filter buttons as it will let the users switch between image categories with a click.

Add Lightbox Effect

Simply toggle on the “Lightbox”, which will let your audience view any gallery images on a larger scale.

Add Hover Effect

The Advanced Gallery module has a separate settings option named “Hover Settings” to add hover effects like overlay, border animation, show caption and description, etc. 

We are going to apply some hover effects to our gallery.

Overlay Effect

Toggle on “Overlay,” which will bring new fields to add primary and secondary colors as well as an icon. We are only adding primary and secondary color for our gallery images:

• Primary Color: rgba(255,104,192,0.59)
• Secondary Color: rgba(104,84,249,0.6)

Border Animation

First, enable and customize the border animation by adjusting the border color, width, space, and animation. We will only change the animation style to “Border CCC 2”.

• Border Animation Style: Border CCC 2

Show Caption and Description

To display caption and description on your gallery images, simply toggle on both. After that, you can adjust their position, caption/description reveal type, and more.

We are going to show both of them for our gallery:

Next, we will customize the caption and description by navigating to the  Design tab > Font Styles. There, you will find two different tabs for making font-related adjustments.

For our gallery image’s caption, we will change the font to “Roboto” while keeping the description settings at their default.

Customize Filter Button Style

To design filter buttons, click on “Filter Buttons” from the “Design” tab, then change alignment, background color, make the button corners round, apply border style, and more.

We will customize the filter buttons by adjusting their alignment, background color, and text color. Additionally, we will add a border around the buttons, modifying the width and color.

• Alignment: Middle
• Background Color: #ffffff
• Filter Buttons Font: Raleway
• Filter Buttons Font Weight: Bold
• Filter Buttons Text Color: #000000
• Button Border Styles: (1px border width, #b3b3b3 border color), Button Border Width: (3px border width, #8300e9 border color)

The final outcome of the button design is as follows:

Note: In the “Design” tab, you will find additional customization options for the gallery images, load more buttons, pagination, sizing, spacing, and more.

Preview of Dynamic Gallery Created with DiviFlash

By now, your dynamic gallery should be fully ready. Now whenever you update any category image, you should see the changes reflected in the gallery automatically.

Here is the preview of our created and designed gallery.

Wrapping Up  

Creating a dynamic gallery will save you time and effort by automatically displaying updated images on your Divi website. 

Now, you no longer have to deal with the hassle of image management that comes with a static gallery.

Simply get DiviFlash today and experience the ease of managing your gallery with automatic updates.