This post is part 1 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!
Galleries are one of the most important tools in web design today. Whether you’re a designer wanting to showcase your work, a photographer wanting to display your photos, or a business wanting a prominent portfolio–-the need for online galleries goes on and on. With the Divi Gallery Module we can create awesome, eye catching galleries that’ll draw in our website visitors.
In this Divi mini series, we’re going to go over 5 Impressive Divi Gallery Layouts and how to create them. Some of these examples will be fairly simple and will just require some adjustments to the Divi module settings. Other’s will be a little more advanced and will require a little CSS and other customizations.
My hope is that whether you’re a newbie at Divi and web design or if you’re an experienced Divi expert, you’ll be able to apply these ideas and will be inspired to take your Divi galleries to the next level!
Today’s Before & After: The Divi Gallery Module
Before we begin, let’s take a look at the default Divi Gallery Module and what we’re going to turn it into by the end of this tutorial.
When you add images to the Divi Gallery Module and do nothing else, here is what you get.
Default Gallery Module Hover Over
By default, the module has some padding between the photos, displays the image label and will be aligned in 4 columns. The hover over icon will pull the main theme color in and will have a transparent white overlay. Not bad for something out of the box, but let’s explore some ways to make our galleries “Pop.”
By the end of our tutorial today we’re going to get a lovely fullwidth gallery like the one you see below.
Example 1 – Fullwidth Gallery Hover Over
How to Create a Fullwidth Gallery with the Divi Gallery Module
Subscribe To Our Youtube Channel
Concept & Inspiration for the Fullwidth Gallery Module
The fullwidth gallery is pretty ubiquitous online but it occurred to me that some people using Divi may not know that they can make a few simple changes to the gallery module and achieve the same effect.
Preparing Your Design Elements
Before Diving into the tutorial below, you’ll want to do the following to prepare yourself and your design elements for a successful design implementation.
1) Optimize your images for web
When you create an online gallery, the most important thing to do first is to make sure your images (whether designs or photos) are the smallest possible file size before uploading. This will help your page load time and will help your website from getting bogged down by huge files. When you download images from a camera to your computer, they’re often VERY big file sizes and the same is true for a lot of design files. Optimizing your images for web is very important, particularly if your gallery contains 20 or more images.
I typically use Adobe Bridge or Adobe Photoshop but there are numerous programs out there to help optimize your images before you upload them to a website. There are also some free online tools like https://www.jpeg.io/ and https://compressor.io/ that’ll help resize and optimize your images.
Image size: I’ve found that images around 1200px wide are a good display size and for vertical images, I recommend not exceeding around 1000px height.
2) Label your files
A good practice when creating galleries is to label your image files so they’re not long camera file extensions. Not only will this help your file management (and sanity while sifting through photos) but it’s also good for SEO. When people search for businesses and services, well-labeled images will often be the first to pop up. Which can help drive traffic to you or your clients’ site.
3) Be sure your images are royalty free
Make sure the images in your galleries and design elements are copyright free. Online image lawsuits are no joke so be sure the work or images you display ARE YOUR OWN unless you have consent to use them. For the sake of these tutorials, I’m using royalty-free images from https://unsplash.com.
Implementing the Fullwidth Gallery Module Design in Divi
We’ll adjust settings in these areas.
For this design 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.
Row Settings
The first thing we need to do is set the row module to “fullwidth” and adjust the gutters so that the images line up right next to each other with no padding.
General Settings:
Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 0
Keep Custom Padding on Mobile: YES
Save & Exit
Open row settings
Adjust gutter settings.
Gallery Module Settings
Now we can move into the Gallery module itself and make the necessary changes to achieve our fullwidth design.
General Settings:
Gallery Images: Added the images to the gallery
Layout: Grid
Images Number: 12
Show Title and Caption: NO
Show Pagination: NO
General Settings
Advanced Design Settings:
Zoom Icon Color: #ffffff
Hover Overlay Color: rgba(28,28,28,0.81)
Hover Icon Picker: Magnifying glass icon with plus sign
This is what you’ll see when you scroll over the image. I’ve chosen to use the magnifying glass icon to give the user the thought of “getting a closer look” at this image. You can try any icon you’d like on your design. I’m also inverting the default design and going with a white icon over a darker background overlay.
Save & Exit
Advanced Design Settings
Custom CSS in Divi Theme Options
You’ll notice that when you open up an image, the image title displays at the lower left hand corner of the picture. 9 times out of 10, clients ask me to remove that. So I just make that standard practice now. I’ll be adding this affect to all the galleries in this mini series.
Remove Image Title
To remove the label, head to the Divi Theme Options panel by navigating to Divi > Theme Options and scroll down to Custom CSS and enter this code:
.mfp-title {
display: none;
}
That will remove the file name when the user opens up an image.
Your final design, the Fullwidth Gallery w/ the Divi Gallery Module!
And there you have it! A quick, yet efficient way to set your gallery apart from the standard look by creating a fullwidth gallery. Best part – we were able to achieve this look by just changing some standard Divi module settings with no extra code or CSS!
Tomorrow: Using the Divi Gallery Module to Create a Tiled Gallery with Custom Padding!
Check back tomorrow for example 2 – where we’ll explore how to create a tight-tile style gallery by simply adjusting the padding! The majority of my clients love this look and I’m excited to show you how to make it happen!
Example 2 – Tight tiled gallery with padding
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!