Create Better Divi Headers

Free Download: Divi Team Sections with Custom Hover Effects

by | Mar 6, 2018 | 55 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 (426×426), but you can experiment with images having other dimension ratios as well. The download package does not include these images but a 426×426 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.

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!