Using the Divi Gallery Module to Create a Tiled Gallery with Custom Padding

Last Updated on September 22, 2022 by 20 Comments

Using the Divi Gallery Module to Create a Tiled Gallery with Custom Padding
Blog / Divi Resources / Using the Divi Gallery Module to Create a Tiled Gallery with Custom Padding
Play Button

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 and its 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

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

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.

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

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

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

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

Example 2 – Custom CSS Settings

Save & Exit

Tiled Gallery Hover Over

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

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!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 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 a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 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 a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

20 Comments

  1. Hey Ho 😉

    How can I make the thumbnails all the same even if the images are of a different size (portrait and landscape)?

    Karsten asked that too.

    Could you explain that please?

  2. Being a retailer of bridal dresses, most of our images are portrait – please advise how to display in Divi gallery

  3. Hi,

    Thank for the awesome post!

    I would like to know if there is a way to remove the links from the images?

    I would like to use the gallery with the hover effect, but make the images non-clickable.

    Could you show me how this is done?

    Thx

  4. Love the tutorial, thank you!
    But I am wondering if it is possible to create a tiled gallery with portrait AND landscape oriented images?
    Thanks!

  5. Love this tutorial, thank you! However, I wonder if it is possible to use a tiled gallery for landscape AND portrait oriented images in the same gallery?

  6. Thank you! Just used it an it looks very nice.

    • Great to hear, Sueli! Nothing better than knowing a tutorial was put to good use right away!

  7. Amazing! Great tutorial! Thank you!

    • Thanks Jordan!

  8. hank you for this information, I will use these tips when I’ll be creating my next Divi gallery.

  9. Another great article!
    In these articles what do you use to show the live animated examples?

    Thank you again,

    • Thanks Larry – I use ScreenFlow for Mac to record the examples then save them as animated GIF’s.

      Cheers!

  10. Thank you for the great tutorials! Divi is great!

    • Thanks, Stig!

  11. I task it back. with a bit of fiddling I have got there. Please do not release my previous comment

  12. I am currently putting a gallery into a new site. The customers want to keep the titles. I would like to implement one of the approaches seen here but with the titles showing. Presumably there will be other customers who could also want this in future.

    I would like an increase in the width and a commensurate increase in the height height of the gallery “thumbnails”

    How can you do this?

  13. Thank you for these tutorials. I will use these tips when I’ll be creating my next Divi gallery. 🙂

    • Great to hear, Andrej!

  14. And how can I make the thumbnails all the same even if the images are of a different size (portrait and landscape)?

  15. Hi, good Tips & Tricks, but I need to create a gallery module with carousel style same as Portfolio module. What should I do to have the same carousel style?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today