How to Customize the Divi 4 Gallery Like a Boss
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 4.
In this tutorial, I show you “How to Customize the Divi 4 Gallery Like a Boss.” And by boss, I mean like a talented Divi 4 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 4 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 4 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!
[css]
/*———-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;
}
}
[/css]
[css]
.et_pb_gallery_grid .et_pb_gallery_item {
width: 50%!important;
clear: right!important;
}
[/css]
For 3 Columns:
[css]
.et_pb_gallery_grid .et_pb_gallery_item {
width: 33.33%!important;
clear: right!important;
}
[/css]
For 5 Columns:
[css]
.et_pb_gallery_grid .et_pb_gallery_item {
width: 20%!important;
clear: right!important;
}
[/css]
For 6 Columns:
[css]
.et_pb_gallery_grid .et_pb_gallery_item {
width: 16.66%!important;
clear: right!important;
}
[/css]
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Oh, if only I knew this months ago! Thanks once again for another awesome tutorial!
haha no problem, Sharon. I know, there’s nothing worse than seeing a tutorial you wish you would’ve seen weeks or months ago 🙂
That’s really Awesome Josh. But can you show me some other transition like we have now in divi?
Hey Syed, you’re welcome to mention other effects that you’d like to know how to do and I can see if there’s already a tutorial on that or if it’s one I’ll put on my to do list!
Thank you so much Josh, you just saved my day!
Awesome to hear. Thanks, Ken!
Hi Josh,
I seem to get white gaps at the bottom of some images, where the slightly taller images create a difference between themselves and the slightly shorter images. Is there not some sort of ‘bounding box’ that keeps them all confined to a neat row height?
It seemed to work at first after I hit save, but then just bounced back to looking ugly and messy like when in the visual editor.
Happens with either adding the CSS to the actual module, or adding it to the main theme CSS, Either the Josh Hall method, or the Mak method.
Anyone else had this issue?
Hey Ryan, I’d have to see the page to see the problem but I’ve found it best to use images that all have roughly the same aspect ratio. Divi can struggle cropping them off if one is wide, one is tall, etc. And yeah it’s very common that the cropping doesn’t show up in the visual builder but then looks fine when you save the page. Hope that helps!
Hi Josh, not really any info to help there, what’s the best way to show you the issue? Screenshots? URL of client website? etc, etc.
I don’t care at all that the cropping doesn’t show up in the visual builder, what I care about is that is still doesn’t crop correctly after saving and exiting visual builder.
Please Help!
URL is best. Generally, it’s best to keep all images at the same aspect ratio. Same height and width, etc. Divi doesn’t allow for a masonry style grid. But there are many gallery plugins out now that have that ability. If you’re not already a member, you can also post this in my Divi Web Designers FB group to see if anyone’s achieved that look! https://www.facebook.com/groups/diviwebdesigners/
Hi again Josh, no one mentioned masonry style gallery, no one here wants that, why would I go to ask others if they’ve “achieved that look” if that’s not what I want?
I’m asking about the automatic cropping of images. After the first save, Divi automatically cropped all of the images to the same height/width. Since then, it doesn’t crop them after saving and exiting Divi builder, and I’m left with white gaps. Please answer this specific question only.
Here’s the client’s website page I’m having the ‘Gallery’ issue with:
http://www.buildingwise.com.au/construction/
Please help, I’m having so much trouble making small changes to Divi, and every Divi person out there loves making tutorials and showing all the great things it does, but no one is answering properly when all the little work around tricks don’t work..
Hey Ryan, I suppose I misunderstood but that’s a bit of a heated response. You realize my tutorials are free and I’m trying to help you out for free, right? Regardless, I’ll spend some more time trying to help.
If you’re just trying to eliminate the white gap (I did check out your link), then the best option is to make sure all the images are the same size/ration BEFORE adding them to the gallery. To my knowledge, Divi tries to crop them at the same aspect ratio so that the images line up evenly. If the images aren’t the same size, some cropping/white space will most definitely occur. Just resize those to make sure they’re the same size then you’ll be all set.
Yuor video is great! I have been looking for this gallery all week! But I do not know css and I was wondering if you can tell me where in the template/website to add the css for 5 columns. I put your code in everywhere I could think of in my Divi theme but it just wont work.
I go to the page, gallery settings, advanced, custom css, but it gives me things like before, main event, after…. and I have no clue. Can you help?
my demo site is at: http://d3b.ec1.myftpupload.com/
I even have a single row on the front page id like to go 5 columns too.
Thanks, Deb! You’ll want to put that CSS in your stylesheet or custom CSS section in Divi. Here’s a video on that! https://joshhall.co/where-to-put-your-custom-css-in-divi/
Hope that helps!
Thanks! I did the css tutorial and put your css in the gallery page css, but it still does not show 5 wide. I am trying to get to 5 wide by 5 high and rotate thru 120 photos with additional pages to view link on the bottom. Is this possible?
Here is my/your code I used and I figure I need to edit it somehow but, I just don’t know css yet:
/*———-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;
}
}
.et_pb_gallery_grid .et_pb_gallery_item {
    width: 20%!important;
    clear: right!important;
}
Hey Deb, try putting the code in the Custom CSS section at the bottom of Divi > Theme Options!
Yes that worked! You are Brilliant! Thank You!
I am so grateful to people like you for saving my sanity and… money!
Haha, no problem. Glad it worked!
Hi Josh, Im still lost where to edit the css for this tutorial
Here you go! https://joshhall.co/where-to-put-your-custom-css-in-divi/
If you want to have the zoom effect while keeping the overlay, you can do that like this:
.et_pb_gallery_image img {
transform: scale(1.03);
transition: transform 0.5s, opacity 0.5s;
}
.et_pb_gallery_image:hover img {
transform: scale(1.15);
opacity: 1;
}
Great trick! Thanks Grant.
GREAT tutorial but i must to ask. how can i put text in hover also.
Text I’m not sure…good question for my Divi FB group if you’d like to post it there!
Hi Josh,
Thanks for the great tut 🙂
Is there a simple way to alter this code to work for the filterable portfolio?
Thanks in advance
Unfortunately no – there’s a lot more to the filterable portfolio 🙂 Might look into that though!
Hi Josh,
great job you did, thanks,
other question divi galleries look great on a PC or Mac but the pictures are not swipeable on a iPhone nor on a iPad, is there a way to achieve that?
mmm not sure on that, Tom. I think that’s related to the Divi gallery itself and not this effect per say.
Works great thanks 🙂
i have one other question regarding the image gallery hope that is okay 🙂
how do I change color of the small line between image and the pagination
http://raschphotography.dk/afrika-sept-2016/
Kind regards
Nicolaj
Thank you very very much !!!
Hi josh, thank you so much for your amazing tutorials!!!!
i have just one question about the image gallery, i would like to know how to put a different link on each image when i click on it.
i have 8 images with a random load and a would like to put a different link on each image.
Some links on my website and other outside of my website.
the ALT caption doesn’t work and i don’t know if it’s possible to create on CSS.
if you have any advice it will be wonderfull!
Thank so much for your time really!!!
Kind regards,
Norman.
Hey Norman, for something like that, I use and would recommend Image Intense as you can create links with buttons over the images and you’ll have a lot of display options. Hope that helps!
I “discovered” you about two weeks ago and my mind (with regard to Divi) is expanding like mad! =D I wish I’d learned of you long ago.
This is an old thread so I’ll be surprised if you reply, but my questions regard the Divi Gallery so I’ll take a shot:
It appears the Divi Gallery displays only images stored in the WP Media Library. I want to display images stored in an EXTERNAL directory.
QUESTION 1: Are you aware of any method for calling EXTERNAL images within the Divi Gallery module?
QUESTION 2: I’ll be adding images over time. I’d like for the newest images to appear at the TOP of the gallery, and oldest at the bottom. Any way to do that?
Each of your tutorials (that I’ve seen) has been extremely helpful. You understand what people need to know (and what they don’t) in order to complete a task. That’s rare among online tutorial presenters. Thanks, and keep up the good work!
Hey Tom,
Thanks for the note!
So I’m not sure you can house images externally with the Divi gallery module but there may be some other options out there for that. Not sure if it’s an option for this plugin but I use Final Tiles Gallery for more complex and advanced galleries. Otherwise I’m sure there are some plugin or external gallery site to house galleries and embed them in your Divi site. I’d also recommend posting the question in my Divi Facebook Group. You’ll likely get some solutions there too.
Josh – Love your tutorials!
This worked out well for me except that my thumbnails ZOOM up out of the page and become larger, rather than staying the same size and zooming within the picture. Did I miss a setting? Thanks!
Did you get this worked out, Preston? I believe I saw you post this in my Divi Support group?
Hi Josh, Thanks for the great, free tutorials! I do not want to display titles while images are thumbnails but would like them displayed when clicked to full size. Do you have a solution to do this?
I figured it out: select “Show Title and Caption” under elements in Gallery Settings then add the following css:
.mfp-content .mfp-figure .visible map-title {
display:block;
}
Thanks for posting the solution, Kelly!
To hide titles in thumbnail images and display them when opened select show titles in gallery settings > elements then add css:
.mfp-content .mfp-figure .visible map-title {
display:block;
}
.et_pb_gallery_0.et_pb_gallery .et_pb_gallery_title {
display:none;
}