This post is part 4 of 5 in our mini series titled 5 Impressive Divi Gallery Layouts and How to Create Them. Stay tuned for all five unique examples of the gallery module and tutorials on how to achieve them!
The Divi Gallery Module automatically puts the Grid style layout in 4 columns, but every once in a while it’d be nice to lay them out in 3, 4, or 6 columns, right? In this post, I’ll show you how! And the good news is…it’s pretty easy!
Today’s Before & After: The Divi Gallery Module
By default, as in the image below, the Divi Gallery Module is limited to four columns.
By the end of our tutorial today we’re going to achieve a fullwidth gallery module that has five (or more!) columns, depending on your needs.
How to Change the Number of Columns in the Divi Gallery Module
Concept & Inspiration for Adding Columns to the Gallery Module
In this third example, we’re going to change the number of columns in our gallery with just a few lines of CSS. Why would you want to change the number of columns in a gallery? Well there are many reasons, but here are a few:
1) It’s nice to have options for the number of images you have. For example: If I have 5 images for a gallery but it automatically displays 4 columns, I’ll have one image left over and on a different row. So it’d be nice to have those 5 pictures align on the same line.
2) If you have a lot of images, the page will continue to get larger and larger with 4 columns. By using 5 or 6 columns, you can dramatically lower the page height and amount of scrolling for the website user.
3) You can match your gallery layouts with your website design. If you’re using 3 columns in your Divi layout across your site for things like services, blurbs, etc – it’s nice to have your galleries match the same look.
This is one of the most useful tricks I’ve used on galleries because it’s so versatile and can really make your gallery designs match your website layout. With all that said, let’s dive into it!
Preparing Your Design Elements
In our previous tutorials in this miniseries we’ve only needed twelve images. This tutorial will require at least fifteen, but possibly more, depending on how many columns you want to add.
As with the previous tutorials in this series I recommend that you use royalty free images from a free source like unsplash.com, or images that you have created yourself. I also recommend that you resize those images to 1200px wide with a height of 1000px. It would also be a good idea to compress those images to manage your file sizes. If you’re unsure how to do either of those things, we’ve got a great tutorial on the topic here.
Implementing the Tiled Gallery with Custom Padding Module Design in Divi
For this example, we’ll use the Divi Gallery Module and make adjustments in these 3 areas:
– General Settings
– Advanced Design Settings
– Custom CSS Settings
To begin, create a single section with a single row and single gallery module.
Row Module Settings
The first thing we need to do is adjust the gutters so that the images line up tight next to each other.
Use Custom Gutter Width: YES
Gutter Width: 0
Keep Custom Padding on Mobile: YES
Save & Exit
Gallery Module Settings
Gallery Images: Added the images to the gallery
Images Number: 15
Show Title and Caption: NO
Show Pagination: NO
Since we’re using 5 columns in this example, we’re going to use 15 images. So we’ll have 3 rows of 5 images per row.
Advanced Design Settings:
Zoom Icon Color: #e09900
Hover Overlay Color: rgba(255,255,255,0.87)
Hover Icon Picker: Diagonal arrows
In this design, I went with an orange colored icon on top of a transparent white overlay and am using the diagonal arrows to make it known to the user that the image will expand. But you can match the colors to your website and use whatever icon you feel fits best!
Here’s there the important stuff. These 3 lines of CSS are what creates the columns and tell the gallery to respond to the width of each image. Best part is…it’s mobile friendly! So this will respond nicely on tablets and smart phones. Important note: anything you put into the “Gallery Item” field will effect each individual image.
margin: 0 !important; width: 20% !important; clear: none !important;
– The “margin” here will tell the image to stay centered to the width that is set to.
– The “width” is the how wide the image will be compared to 100% of the container that it’s in. So each image here will be 20% of the container, creating the 5 column look.
– The “clear” code is telling the image not to clear anything from the left and right which will allow the other images to line up right next to it.
For more column options, I’ll display the code below.
Save & Exit
And that’s it! Wow…pretty easy, right? Just 3 little lines of CSS can dramatically change your gallery and allow you to create more or less columns for your galleries.
Now as promised, here’s the code for some different column options. Just go into the Custom CSS Gallery Items section and swamp out the width percentage.
For 2 columns:
margin: 0 !important; clear: none !important; width: 50% !important;
For 3 columns:
margin: 0 !important; clear: none !important; width: 33.33% !important;
For 6 columns:
margin: 0 !important; clear: none !important; width: 16.66% !important;
Tomorrow: Creating a Grayscale to Color Gallery with the Divi Gallery Module
Come back tomorrow for our final example of this mini series. We’re going to get a little more complex and creative by making gallery images that are black and white and will turn to color when hovered over! If you’re not too familiar with CSS, don’t worry – it’s not as difficult as it looks!