Divi Supreme Filterable Gallery Module
With Divi Supreme Filterable Gallery Module, you can easily create Beautiful Filterable Galleries in Divi. This module is packed with features and options that allow you to create amazing galleries without having to code. You can also quickly and easily filter your Images by Categories assigned to the image.
Important: To assign a Category to the image, you can open up the image in Media Library and then enter the category that you want to assign to the image. Here's a video guide for help:
Content Options
General
Use Dynamic Images Enabling this option will give you the list of categories that you can select to show the images of only the selected categories.
Images
You can also manually upload your images here as many as you want. The main advantage of this is that you can rearrange the images however you like simply with drag & drop.
Number of Columns
Here you can choose the Number of Columns for Images.
Image Size
You can change the Image Size from here from different presets.
Column Gap
Here you can increase/decrease the Column gap between images.
Row Gap
Here you can increase/decrease the Row gap between images.
Speed
Here you can control the Speed when Filtering Images.
Layout
Here you can select the Layout, either "Card" or "Overlay".
*When using "Overlay", you'll see below options:
Image Height
Here you can change the Height of the Image manually.
Hover
Change the Hover style here, you can select "Fade In" or "Zoom" or "None".
Hover Transition
Change the Transition period of the Hover Effect here.
Elements
Enable Filterable Gallery
Enable/Disable If you want to have Filters at the top.
Show All Images Text
If you want to show the "All" tab, where all the images will be displayed, you can enable this option.
--All Images Text
You can also set a custom Text for "All" tab.
Show Title
Enable this option If you'd like to show Image Title in the Gallery, you can assign this Title in the Media Library for each image.
Show Caption
Enable this option If you'd like to show Image Caption in the Gallery, you can assign this Caption in the Media Library for each image.
Show Description
Enable this option If you'd like to show Image Description in the Gallery, you can assign this Description in the Media Library for each image.
Use Lightbox
You can enable this option If you'd like to show Gallery images in the Lightbox.
Show Pagination
If you got many images and want to pagination so the user won't have to scroll much, you can enable this option. You can change the Type of Pagination in the "Pagination" panel.
Configuration
Items Per Page
Here you can set how many images you'd like to show per page.
Pagination
Pagination Type
Here you can change the Pagination type to either "Load More" button or "Numbered Pagination".
Design Options
Title
Here you can customize the Title font, size, color and weight etc.
Caption
This is where you can customize the Content Caption by changing its font, size, color and weight etc.
Description
This is where you can customize the Content Description by changing its font, size, color and weight etc.
Card
There is where you can customize the Layout when using "Card" type.
Background Color
Here you can change the Background color of the Card.
Padding
Here you can add padding to the Card.
Else you can customize the Card by adding Border, Border Radius & Box Shadow etc.
Image
Margin
Here you can add Margin to the Image
Padding
Here you can add Padding to the Image.
Else you can customize the Image by adding Border, Border Radius & Box Shadow etc.
Content Wrapper
Margin
Here you can add Margin to the Content Wrapper.
Padding
Here you can add Padding to the Content Wrapper.
Else you can customize the Content Wrapper by adding Border, Border Radius & Box Shadow etc.
Overlay
Background Color
Here you can change the Background Color of the Overlay that shows on hover when using "Overlay" type.
Padding
Here you can add Padding to the Overlay.
Category Tab
Alignment
Here you can change the Alignment of the Category Tabs.
Inactive BG Color
Here you can change the Background color for Tabs for "normal" state.
Active BG Color
Here you can change the Background color for Tabs for "Active" state.
Inactive Color
Here you can change the Text color for Tabs for normal state.
Active Color
Here you can change the Text color for Tabs for normal state.
Margin
Here you can add Margin to the Category Tabs.
Padding
Here you can add Padding to the Category Tabs.
Else you can customize the Tabs by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc for "Normal" & "Active" state.
Pagination
Here you can customize the Numbered Pagination.
Inactive BG Color
Here you can change the Background color for Pagination for "normal" state.
Active BG Color
Here you can change the Background color for Pagination for "Active" state.
Inactive Color
Here you can change the Text color for Pagination for normal state.
Active Color
Here you can change the Text color for Pagination for normal state.
Margin
Here you can add Margin to the Pagination.
Padding
Here you can add Padding to the Pagination.
Alignment
Here you can change the Alignment of the Pagination.
Else you can customize the Pagination by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc for "Normal" & "Active" state.
Load More
Here you can customize the Load more button.
Background Color
Change the Background color of the Load more button here.
Margin
Here you can add Margin to the Load More button.
Padding
Here you can add Padding to the Load More button.
Else you can customize the Load More by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc.
Advanced Options
Use the advanced options to give your Step Flow module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.