Divi Supreme Pro is a third-party plugin which adds 40+ new modules to Divi. One of these modules is the Divi Filterable Gallery Module, which lets you display a gallery (similar to Divi's built-in gallery module), but with several enhancements including category-based filter tabs. If you'd like to change the order of these filter tabs, here's how to do it.
First, here's an example of the type of tabs it adds above the gallery:
Change the Filterable Gallery Category Tabs with CSS
In the Divi Supreme filterable gallery module, there isn't currently a built-in option for setting a custom tab order. However, it's possible to do it with some CSS code.
You can put your tabs in a custom order using CSS similar to the following:
.dsm_filterable_gallery .dsm-filterable-category-container {
display: flex;
justify-content: center;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category] {
margin-right: 10px !important;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="all"] {
order: 1;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="donuts"] {
order: 2;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="cookies"] {
order: 3;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="bananas"] {
order: 4;
}
.dsm_filterable_gallery .dsm-filterable-gallery-filter-item[data-category="apples"] {
order: 5;
}Related Post: Adding CSS to the Divi Theme
As you can probably tell, after a bit of setup, there are 5 rules which each affect a single category filter tab (identified by its category slug), setting its "order" in the filter tab list.
You can add this in the "Divi > Theme Options > General > Custom CSS" box, but note that that will apply it to all filterable galleries. If you plan on using more than one gallery, then I'd recommend giving your module a CSS Class such as "filterable_gallery_custom_tab_order" at:
Supreme Filterable Gallery Settings > Advanced > CSS ID & Classes > CSS Class
Then replace the ".dsm_filterable_gallery" at the start of each block in the CSS code above with ".filterable_gallery_custom_tab_order". That way, the CSS code will only apply to that one Divi Supreme filterable gallery.
Here's the result, after sorting the tabs with the CSS above:
0 Comments