Sélectionner une page

Creating a Grayscale to Color Gallery with the Divi Gallery Module

Creating a Grayscale to Color Gallery with the Divi Gallery Module

This is the final post in our mini series titled 5 Impressive Divi Gallery Layouts and How to Create Them. Be sure to come back next week for our next miniseries of Divi tutorials!

For this final example, I wanted to share with you an effect that my clients love and is one that took a little creativity and trial and error to achieve. If you’re new to web design or Divi, an effect like this can seem intimidating but I’ll provide step by step instructions below on how to achieve this trendy grayscale-to-color look.

Let’s dive in!

Today’s Before & After: The Divi Gallery Module

As usual, let’s start with a qucik before and after of our Divi Gallery Module. The two images below are what the module looks like after you’ve added your images and done nothing else.

Default Gallery Module

Default Gallery Module Hover Over

By the end of our tutorial today we’re going to achieve this stylish grayscale gallery that blossoms with color as users hover their cursor over each image.

Example 5 - Grayscale to Color

Example 5 – Grayscale to Color

Creating a Grayscale to Color Gallery with the Divi Gallery Module

Subscribe To Our Youtube Channel

Concept & Inspiration for the Grayscale to Color Gallery Module

As with most of my little CSS tricks, I first created this look after a client asked if I could make the images black and white then change to color when the user scrolled over them. I used this look initially for random images and call-to-action graphics but I recently wondered, can this effect be used on the Divi gallery? Answer, YES! With CSS and Divi, practically anything is possible 🙂

Preparing Your Design Elements

If you’ve been following along then you know that most if not all of my tutorials in this miniseries have required twelve royalty free images re-sized to 1200px wide by 1000px height. I’ve also been recommending that everyone manage their files sizes by compressing their images too. You can learn how to do both of those things 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

On this example, we’re going to replicate the custom padding/tile look we did in example 2 so 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: 1
Keep Custom Padding on Mobile: YES

Save & Exit

Example 5 Gutter Settings

Example 5 Gutter 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 5 General Settings

Example 5 General Settings

Advanced General Settings:

Hover Overlay Color: rgba(255,255,255,0)

We’re going to be turning off the hover over icon so the only setting we need to worry about here is reducing the overlay color to 0. In this example, we want the images to go from grayscale to color, so we don’t want there to be any overlay color at all. You could do this with code, but an easy way to go about it is just to set it to completely transparent 🙂

Example 5 Advanced Design Settings

Example 5 Advanced Design Settings

Custom CSS

Navigate to the custom CSS tab of your gallery module settings and add the following padding value and CSS Class.

Gallery Item:

padding: 3px

Here we’ve added the padding that’ll sit between each image.

Adding the padding.

Adding the padding.

Ok – here comes the grayscale CSS! But don’t worry, it’s not so bad.

The first step is adding a class to the Custom CSS panel as shown below. For the sake of this tutorial, I’ve labeled it “grayscale.” Once the class is added, we’ll tell the CSS we create to work under everything labeled with that class. Now every gallery with the “grayscale” class will show the grayscale to color effect.

Adding the CSS Class

Adding the CSS Class

Save & Exit

Now, head over to the Divi Theme Options by navigating to WordPress admin > Divi > Divi Theme Options and scroll down to the Custom CSS section as seen below. Here’s where we’ll add the actual CSS effect.

.grayscale .et_pb_gallery_image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); 
    opacity: .8;

This applies the grayscale effect to the image and is also reducing the opacity to 80%. I often reduce the opacity on effects like this so when you scroll over, the image pops a little more. Notice that before each gallery call out code, the “.grayscale” class we created is before it. This tells everything with the grayscale class before to apply those effects.

.grayscale .et_pb_gallery_image:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%); 
    opacity: 1;

This code controls the hover over state. You’ll see that the opacity is set to 1 (100%) and the grayscale percentage is 0% which means the image color will show when you scroll over it.

.et_overlay:before {
    display: none; 

Finally, this code is removing the icon. I felt this example didn’t need an icon when the image goes from black and white to color. We’re essentially telling the icon not to display here.

Here’s what the code will look like when added:

Example 5 Class CSS Divi Gallery

Example 5 Class CSS

Save Changes

Once you’ve added the CSS code to the Custom CSS section in the Divi theme options (or your child theme), you’re done!

Example 5 - Grayscale to Color

Your final design, a grayscale to color effect with the Divi Gallery Module

And there you have it! Not so bad, right? By adding a CSS class to the gallery module and utilizing a few nifty lines of code, we have a sleek gallery that is sure to make your website users or clients happy!

Thanks for Following Along and Check Out What We’ve Got Planned Next!

Well I hope this miniseries “5 Impressive Divi Gallery Layouts and How to Create Them” has inspired you and will give you some good ideas to help you create awesome website galleries with Divi! Remember the sky is the limit with this stuff, so feel free to take these ideas and make them your own.

Oh, and don’t forget to come back next Monday for the beginning of our next miniseries!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.