I created a small logo gallery just above the footer on the CloudCanvas website and a few people have asked how I achieved this and if I used a plugin to make it. So I decided to make a short how-to guide so everyone who has asked can achieve the same effect easily using just Divi and a bit of CSS, no plugins.

What it looks like

How to make a clean Client Logo Gallery with Divi

 

Making the Divi Module

I used a Standard section with 4 columns and image modules to make this work, I’ll explain how to make just 4 logos but you can expand on this and add an many as you want.

In the sample screenshots, I’m using a global element but you don’t need to save to library as a global element or save to the library at all.

How to make a clean Client Logo Gallery with Divi

You need to add the class ID: sponsor-logos to the row containing the images.

How to make a clean Client Logo Gallery with Divi

 

You don’t need to use any custom classes or IDs to the image modules but after we have entered our custom CSS you may want to tweak the image margins in the advanced section to get them aligned perfectly.

How to make a clean Client Logo Gallery with Divi

 

The CSS

To make the images align and also to have the fade effect on hover we need to add a little bit of CSS. You can add this in the theme customizer or in the Divi additional CSS section.

#sponsor-logos img { 
    width: auto;
    vertical-align: middle;
    display: inline-block;
    max-height: 70px;
    max-width: 155px;
    opacity: .34;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: 65px;
} 

#sponsor-logos a { 
	display: block; 
	height: 100%; 
	vertical-align: middle;
	width: 100%;
	position: relative;
} 

#sponsor-logos img:hover { 
	opacity: .9; 
}

 

Conclusion

Now you have added the modules and CSS you can adjust your margins and settings to make it perfect on your site, I have included the assets needed including the exported global module that was used on the actual CloudCanvas site. You can download these here.

Share what you have made in the comments below or feel free to ask any questions if you get stuck.

Pin It on Pinterest