Free Download: Divi Team Sections with Custom Hover Effects

by | Mar 6, 2018 | 25 comments

Today I would like to share with you four Team section layouts for Divi with custom hover effects applied to Person module on hovering over.

All these effects use CSS only except for the effect-3 which uses a bit of jQuery for adjusting the Person module image container height. This code is added using the Code module which is included into the Effect-3 section layout, so do not remove it.

For live demo I have used images with equal height and width (426x426), but you can experiment with images having other dimension ratios as well. The download package does not include these images but a 426x426 placeholder to keep it lightweight.

Check out the demo video below or click the button to navigate to the live demo.

Demo

How To Download

This download is available to our subscribers only, to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.

Requirements

These team section layouts make use of the section dividers feature of Divi, so, at least Divi v3.0.101 is required in order for the divider shapes to show up in the section background.

But the rest of the styling and custom hover effects will work with earlier versions of Divi too.

Installation

The download .zip file includes separate folders for each section layout and a README.txt file which you need to read since it contains the installation guide for these layouts.

Each of the section layout folders contains two files – the section layout JSON file and a CSS file with the section custom styling and hover effect.

The installation is pretty standard. First import the JSON file of the section layout into the Divi Library.

Then add the CSS from the CSS file from that section layout folder either into the Custom CSS field on Divi -> Theme Options page or to you child theme style.css file.

Next, open the page where you would like to have the Team section and add the imported section from the Divi Library.

Save everything and you are done, enjoy!

Subscribe now and grab your copy for FREE.

Pin It on Pinterest

Shares
Share This