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!

The post Changing the Number of Columns in the Divi Gallery Module appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]

Canadian Web Hosting [Ad]