How to Create Dynamic Gallery in Divi?

Team DiviFlash

Updated: June 12, 2024
Table of Contents

Creating a gallery in Divi is super easy, but how do you create a dynamic gallery instead of a static one?

In that case, you will need a third-party plugin to create and manage your gallery content.

In this post, we will show you a complete guide on how to create dynamic gallery in Divi step-by-step. 

Step One: Install and Activate the Plugin of Your Choice 

Choosing the right plugin to create the dynamic Divi gallery is tough. That’s because very few Divi plugins allow the creation of a dynamic gallery. 

DiviFlash is one of the few plugins that offers a specific module for creating a dynamic gallery in Divi. It also has superior customization features to make your dynamic gallery stand out.

That’s why we chose DiviFlash as the third-party Divi plugin for this guide. 

To use DiviFlash to create a dynamic gallery, you have to download, install, and activate it from its official website or the Elegant Themes marketplace. 

Step Two: Create Categories within the Media

After installing and activating DiviFlash, go to “Media” from your WordPress dashboard where you will find a new menu item named “DF Media Categories.” 

Here you can create categories and use them to upload and organize images into the dynamic gallery. 

To create categories, simply give a name to the category you want to create. You can also use a slug and a description to better define the category, but these are optional.

By following the same process you can create as many categories as you want.

Step Three: Add Photos to Each Category

Once you are done creating a category, you need to add images to them. To add images into categories, you need to have all the desired images in your media library. After that, you can add images to all your categories using either the list or grid view option.

Use the list view options to add images in bulk or the grid view option to add images one by one.

List Viewing Option: 

  • Select all the images you want to add to the category of your choice.
  • In the Bulk Actions dropdown menu, choose “Add to category: [your category name]” and click “Apply.”
  • Repeat the process for each category by individually selecting images and adding them to the appropriate category.

Grid Viewing Option: 

  • Click on an image.
  • In the image details panel, select the appropriate category.
  • Repeat this process to add each image to its respective category.

No matter which image categorization method you follow, make sure to add all the images you want to include in your gallery. 

Step Four: Create a Dynamic Gallery

Now that you have added images to the categories, it’s time to create a dynamic gallery. 

To create a dynamic gallery in Divi, follow these steps:

  • Navigate to the page or post where you want to showcase the gallery. 
  • Select a regular section and a single row. 
  • After that, search for “Advanced Gallery” and insert it.
  • Inside the module,  toggle on “Use Category” under Gallery Settings. This will bring up a new function named “Category.”
  • Now click on the Category drop-down menu, which will display all the categories you created just now. Select your pre-defined categories one by one, and you can add as many categories as you want.

If you’ve completed steps one through four, then congratulations! You’ve successfully created a dynamic Divi gallery. 

Also, you must have noticed that we only used categories for adding the gallery images and didn’t use the module’s manual image-adding option. 

Now, if you want to add or remove images from your dynamic gallery, you can do so from the categories in the WordPress dashboard. This is how a dynamic gallery works because it doesn’t require any manual image addition or management.

Step Five: Customize the Gallery

So far, you have the basic structure of a dynamic gallery, and with the Advanced Gallery module, you can do much more than that. It will give you access to tons of customization options to give your gallery a personalized look. 

Most of these options are within the “Gallery Settings” and “Hover Settings” sections.

Change Gallery Settings

Within the gallery settings, you’ll find various functions to alter the appearance and functionality. For example, you can:

  • Choose the number of images to display in a row: From the “Images in a Row” function, you can define the number of images to display in each row of your Divi dynamic gallery. You can also control how many images to show in a row on different devices.
  • Change the gallery layout: Depending on your design needs, you can select between a grid or masonry layout for your gallery. The grid layout is the traditional option, whereas the masonry layout is for a more polished look. 
  • Choose between landscape or portrait mode: By turning the “Image Orientation” option on, you can display your images in landscape or portrait format. You can easily switch between orientations to best suit your gallery’s theme and layout.
  • Change the Order of the Images: One of the unique features of the DiviFlash Advanced Gallery module is that it lets you change the order of the images. You can either display your images randomly, in ascending or descending order.
  • Add Filters to Make Navigation Easy: By enabling the “Filter Nav,” you can add filters based on your image category names. You have the option to disable the default “All” filter to display images by specific categories at a time.
  • Add Interactive Lightbox Effect to Images: You can add a lightbox effect to all the images within your gallery. This means your audience will be able to see the image in a large viewing option whenever they click on any image.

Apply Hover Effects

DiviFlash’s Advanced Gallery module lets you add interactive hover effects to your images, which will enhance the user experience. Here are some of the exciting hover functions you can include in your gallery:

  • Add Stunning Overlays: Create visually appealing overlays with customizable primary and secondary colors. 
  • Add Customizable Icons: Showcase icons on hover with the flexibility to choose the icon itself, its color, size, alignment, and more. You can even choose from the 12 icon reveal options.
  • Add Dynamic Border Animations: Add a touch of dynamism with border animations. You can control the border color, width, spacing, animation style, and more.
  • Ability to Display Captions and Descriptions: Display captions and detailed descriptions that reveal additional information upon hover that will enhance the user experience.
  • Freedom to Apply Diverse Image Scaling: Select from 10 image scale types to create the perfect visual transition when hovering over an image. This interactive experience will keep your visitors engaged.

Step Six: Style the Gallery With the Design Tab

One of the things that makes DiviFlash unique from others is its design flexibility. Within the Advanced Gallery module’s design tab, you will find hundreds of design options to give your gallery a unique look.

You will find designs for every gallery element, including font, image, filter button, and more. By utilizing these functions, you can easily style your gallery the way you want to.

Step Seven: Save and Publish

So far, we have achieved the design we wanted to achieve, and the final outcome is this- 

Following our guide, you can easily achieve a similar look for your gallery. The best part is that you can design even better dynamic galleries using the Advanced Gallery module’s available functionalities.

Once the design and customization are done, save and exit the visual builder to make the gallery visible to the audience. 

Wrapping Up

With our detailed guide on “how to create dynamic gallery in Divi,” you should be able to create one on your Divi website. 

However, if you can’t, let us know, and we will help you as soon as we can.

Team DiviFlash

At DiviFlash, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *