How to Customize the Divi Gallery Like a Boss

by | Oct 17, 2017 | Divi Tutorial | 40 comments

Welcome to part 9 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.

In this tutorial, I show you “How to Customize the Divi Gallery Like a Boss.” And by boss, I mean like a talented Divi Web Designer 🙂 This tutorial is based off of some recent gallery designs I created and wanted to share with you! In a previous series I wrote for the Elegant Themes blog, I did cover some of these concepts but some recent Divi updates have caused some issues with those previous customization methods. Particularly for the different column options.

In this tutorial, I walk you through how to change the columns for the Divi gallery, how to create a tight padding layout, how to create the zoom effect and how to customize things on mobile! Enjoy and let me know if you have any questions!

Here’s the CSS I used:


/*----------Custom Divi Gallery----------*/

.et_overlay {
    display: none;
}

.mfp-title {
    display: none;
}

.et_pb_gallery_grid .et_pb_gallery_item img {
    transform: scale(1.03);
    transition: transform 0.5s, opacity 0.5s;
}

.et_pb_gallery_grid .et_pb_gallery_item img:hover {
	transform: scale(1.15);
    opacity: 1;
}

.et_pb_gallery_grid .et_pb_gallery_item {
    padding: 2px;
    width: 20%!important;
    clear: right!important;
}

@media only screen and (max-width: 479px) {
	
.et_pb_column .et_pb_grid_item:nth-child(n) {
	width: 33%!important;
}
}

For 2 Columns:


.et_pb_gallery_grid .et_pb_gallery_item {
    width: 50%!important;
    clear: right!important;
}

For 3 Columns:


.et_pb_gallery_grid .et_pb_gallery_item {
    width: 33.33%!important;
    clear: right!important;
}

For 5 Columns:


.et_pb_gallery_grid .et_pb_gallery_item {
    width: 20%!important;
    clear: right!important;
}

For 6 Columns:


.et_pb_gallery_grid .et_pb_gallery_item {
    width: 16.66%!important;
    clear: right!important;
}