This post is part 2 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!
In this second example, we’re going to create a tight-tiled gallery look with custom padding to add a clean and uniform white space between each image. Several of my clients spanning across multiple industries seem to LOVE this layout so I’m excited to share it with you!
The majority of the settings we’ll change are in the standard module options, then we’ll just add a little CSS for the custom padding.
Today’s Before & After: The Divi Gallery Module
Before we begin, let’s take a look at the default Divi Gallery Module. When you add images to the Divi Gallery Module and do nothing else, the image below is basically what you get.
Default Gallery Module Hover Over
By the end of our tutorial today we’re going to achieve a tiled gallery with custom padding like the one you see below.
Tiled Gallery Hover Over
How to Create a Tiled Gallery with Custom Padding with the Divi Gallery Module
Subscribe To Our Youtube Channel
Concept & Inspiration for the Tiled Look with Custom Padding Gallery Module
The first time I used this effect was when I was asked by a client to put “just a little bit of space” between each image. It occurred to me that with the Divi gutter options, the images were often lined up together or spaced far apart. I realized that just with a little addition of CSS padding, I could achieve the look my client wanted. I now use this look for the majority of my sites and it’s really helped set my galleries apart from other Divi sites. My hope is that you can use this idea, adjust the settings to your liking and create some unique looking galleries of your own!
Preparing Your Design Elements
Today’s tutorial, like yesterday’s, will require twelve images. I used unsplash.com to get my own completely free images to use. If you’re creating demo content or simply following along with this tutorial for fun then I would recommend you do the same. On the other hand, if you have your own original images then by all means use those.
The size I found that worked best for me for these images is 1200px wide by 1000px height. You’ll also want to save these as compressed jpegs to save space. If you are unsure how to do that, you can view this tutorial for step by step instructions.
As with yesterday’s post I would also recommend that you label your files in a readable way (instead of the default jumble of letters and numbers cameras produce). This is helpful with SEO and your own personal organization/file hunting.
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.
To begin, create a single section with a single row and single gallery module.
In the 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
Gallery Module Settings
General Settings:
Gallery Images: Added the images to the gallery
Layout: Grid
Images Number: 12
Show Title and Caption: NO
Show Pagination: NO
Example 2 General Settings
Advanced General Settings:
Zoom Icon Color: #606060
Hover Overlay Color: rgba(255,255,255,0.75)
Hover Icon Picker: Magnifying glass icon
This is what the user will see when they scroll over the image. I’m using the magnifying glass in this example but you can try any icon you’d like on your design.
Example 2 Advanced Design Settings
Custom CSS:
Gallery Item:
padding: 3px;
The gallery item section here singles out each image in the galler so whatever adjustments you make here will effect every image.
Example 2 – Custom CSS Settings
Save & Exit
Your final design, the Tiled Look with Custom Padding w/ the Divi Gallery Module!
And there you have it! With some adjustments to the module options that Divi gives us and just one line of custom CSS, we have a slick tiled gallery that’ll really give our galleries a nice look. You can play around with the padding number to create more or less space between your images.
Tomorrow: Creating a Unique Border for your Divi Gallery Module Images
Check back tomorrow for example 3 – where we’ll use a clipping mask to create unique borders on our Divi Gallery Module images!
Example 3 – Unique Image Border
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!