This post is part 3 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 third example, we’re going to be using a CSS “clipping mask” to create a nifty little border around our gallery images. If you’re not too familiar with CSS, don’t worry, I’ll provide the code and explain what it’s for and how to use it. If you’re new to CSS, my goal is to make it a little less daunting and for you to see how just a few lines of code can take your designs to the next level.
- 1 Today’s Before & After: The Divi Gallery Module
- 2 How to Create Unique Image Borders with the Divi Gallery Module
- 3 Concept & Inspiration for the Unique Border Images Gallery Module
- 4 Preparing Your Design Elements
- 5 Implementing the Tiled Gallery with Custom Padding Module Design in Divi
- 6 Gallery Module Settings
- 7 Tomorrow: Changing the Number of Columns in the Divi Gallery Module
Today’s Before & After: The Divi Gallery Module
The image below represents our starting point. All I’ve done is added twelve images to the Divi Gallery Module without making any other changes.
By the end of our tutorial today we’re going to get a cleaner gallery (with less text) and images that have a CSS clipping mask that provides bespoke detail.
How to Create Unique Image Borders with the Divi Gallery Module
Concept & Inspiration for the Unique Border Images Gallery Module
There are many circumstances where you’ll be able to utilize unique borders for your gallery images. I often use custom borders on gallery images in order to tie in the look with other graphic elements around the site. Say you have several images and graphics with rounded edges, wouldn’t it be nice to have your galleries mirror that look and have a streamlined feel across the site? With some simple CSS adjustments, we can do just that!
Preparing Your Design Elements
To follow along with today’s tutorial you’ll need twelve royalty free images sized 1200px wide with a height of 1000px. As the other two posts in this miniseries have mentioned it would be a good ideas to compress these images for smaller file sizes too. To learn how to both resize your images and compress them, check out this tutorial we’ve created to help you get the most out of your image assets.
To achieve our clipping mask I used http://bennettfeely.com/clippy/ to create the border in this example. This is a very handy (and free) tool you can use to create whatever border shape you’d like for your image. It can be used to create a circle, rounded edges, a variety of shapes and more.
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.
Gallery Module Settings
Gallery Images: Added the images to the gallery
Images Number: 12
Show Title and Caption: NO
Show Pagination: NO
Advanced General Settings:
Zoom Icon Color: #1f7cba
Hover Overlay Color: rgba(255,255,255,0.82)
Hover Icon Picker: Computer mouse pointer
One of my favorite parts about the Divi Gallery Module is that it gives us the ability to change the hover over icon. For this example, I’m using the mouse pointer to give the user a Call-To-Action. A little web psychology here – when someone see’s a mouse clicker, the nature instinct is to “click.” So this can be very useful for galleries when you want the website user to click open an image.
I’m going with a blue icon over a transparent white overlay but you can use whatever color will match the site you’re working on.
-webkit-clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0); clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);
The gallery item section here singles out each image in the gallery so whatever adjustments you make here will effect every image. This CSS code tells the image where the clipping should occur and you can see that by the percentages on the clip path. Good news is, if you use the tool I mentioned above, you don’t have to code any of that by hand 😉 Just create your shape and copy the code.
Save & Exit
And that’s it! With some adjustments to the basic Divi Gallery Module settings and just a couple lines of CSS, we’ve created a very unique looking border to our gallery images. Again, you can play around with the clipping mask and create whatever shape or border style you’d like for your images!
Tomorrow: Changing the Number of Columns in the Divi Gallery Module
Have you ever wanted more or less columns in your Divi gallery? Check back tomorrow for example 4 – where I’ll show you how to increase the number of columns and will give you the code to create a 2, 3, 5 or 6 column gallery!