Changing the Number of Columns in the Divi Gallery Module

Posted on December 15, 2016 by in Divi Resources | 21 comments

Changing the Number of Columns in the Divi Gallery Module

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.

Default Gallery Module

Default Gallery Module Hover Over

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.

Example 4 - Hover Over

Example 4 – Hover Over

How to Change the Number of Columns in the Divi Gallery Module

Subscribe To Our Youtube Channel

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

Setting's we'll change.

Setting’s we’ll change.

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.

General Settings:

Use Custom Gutter Width: YES
Gutter Width: 0
Keep Custom Padding on Mobile: YES

Save & Exit

Example 2 - Row Settings

Row Settings

Gallery Module Settings

General Settings:

Gallery Images: Added the images to the gallery
Layout: Grid
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.

Example 4 - General Settings

Example 4 – General Settings

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!

Example 4 - Advanced Design Settings

Example 4 – Advanced Design Settings

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.

Custom CSS:

Gallery Item:

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.

Example 4 - Custom CSS

Example 4 – Custom CSS

Save & Exit

Example 4 - Hover Over

Your final design, a Divi Gallery with Added Columns!

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;
2 Columns

2 Columns

For 3 columns:

margin: 0 !important;
clear:  none !important;
width:  33.33% !important;
3 Columns

3 Columns

For 6 columns:

margin: 0 !important;
clear:  none !important;
width:  16.66% !important;
6 Columns

6 Columns

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!

Example 5 - Grayscale to Color

Example 5 – Grayscale to Color

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Premade Layouts

Check Out These Related Posts

Get a FREE Library Layout Pack for Divi

Get a FREE Library Layout Pack for Divi

Posted on September 16, 2019 by in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new, free Divi Layout Packs from our design team to you. This time around, Kenny and his team have created a professional Library Layout Pack that will help you...

View Full Post

21 Comments

  1. Thank you for the tutorial Josh.
    This is very helpful!

    • Thanks, Razvan. Great to hear!

  2. Excellent, thank you!

  3. Really great tutorial! This will will help newbies like me working in a professional development company.

  4. Thank you for this great tutorial!

  5. Thanks Josh, Yesterday when I left a comment saying that I was so looking forward to this, I imagined it was going to be complicated!
    Its so simple I feel a bit embarrassed that I didn’t work it out on my own!
    Never-the-less, awesome stuff, thank you.

    • Hurri, don’t worry – I had the same reaction when I first tried it too 🙂

  6. Great tutorial! Thank you!

    • Thanks Jordan – no problem!

  7. Outstanding Josh! it is posts such as these that truly continue to elevate the DIVI product. Given the clarity of your post perhaps you should write the once and for all definitive post on using the full-width slider. These days I opt for using the Smart Slider plugin whenever a project needs s slider. In minutes I achieve exactly what I expect, with the DIVI Full-width slider the experience is somewhat “hair pulling”.

    Great work!

    • Thanks, Greg! I’ll look into that…

      • Hi.. thank you for this amazing tutorial… I would like to use this kind of gallery to show the logos of my client and I would like to know if is possible don’t show at all the overlay. Thank you very much for answer…

  8. Is it possible to create a 5-column row “Blurb” or “Text” or “Image” modules in a similar way? If so, would you provide the instructions for doing that (or point us how to find them)? Thanks

  9. Thanks but i miss the option to show the pictures in a “full height look”. I mean vertical pictures like portraits etc. A masonry or metro style for both styles (vertical and horizontal) is either nice. Does we have any option to style a gallery like this? Or do we need external plugins?

  10. A great tutorial.

    BUT, I’m sure I’m not the only one who has said this before in that, Divi should automatically have the ability to display up to six columns in a row by default. Having to use CSS to add an additional 2 columns when other premium themes have it inherently built into their framework is a noticeable deficiency.

  11. Nice:) I want to use an example with 4 columns. So 4 photos only followed the guide and took the result like above.

    But how i can accomplish for mobile and tablet that each row dont show in each cell? In mobile i have now 4 photos down each other. Is it possible to show like in desktop in one row even that they are going to be much smaller?

  12. Nice stuff, very easy to put in practice, thanks.

    But about the website and headings.. Imo ‘Goudy Bookletter 1911’ looks a little weird 😀

    Good luck!

  13. How do you change the height of the images – I need to use portrait images and currently it’s decapitated more people that the French Revolution! 😉

  14. Thanks Josh!

    I tried to apply this to the full width portfolio grid to get 3 columns instead of 4. It worked, but stretches my images on desktop. The images look correct on smaller screen sizes.

    Any ideas?

    Thanks!
    Lori

  15. How would you do this once and apply it to 50 or so pages on the site?

  16. thank you this is great – however, I really wish you would link your blog posts it is then really hard to find the next blog post or one you mention!!

Join To Download Today

Pin It on Pinterest