Divi Person Module Hover Effect

by Feb 8, 2016Divi, tutorial

Not updated for CUSTOM MODULES yet

Hi guys, thanks for stopping by. I haven’t updated this post yet to accommodate front-end accessibility. I’m working on it and hope to have it updated soon. 

Sincerely,
Rebekah

I really like the person module available in Divi. When it’s on its own about page, it’s great. If you try to incorporate it into another page, it can take up too much room. Tympanus has some great hover effects you can apply to the person module to make it pretty and functional.  We’re going to add a toned down version of Original Hover Effects demo 1 to our person module.

This is the original:

personhover

This is what we will end up with:

FDLctm

Adding our Files

We will need to add a folder and a few files to our child theme. The best way to do this is via SFTP. I use CyberDuck, but you can use whichever tool you prefer.

The first file I’m going to name ctm.php. In the files, the module is actually called Team Member, not Person. This file will need to be in a folder called custom-modules. Around line 318 is where the magic happens.

Next we’re going to add to our style sheet:

Lastly, we are going to add to our functions.php file:

Remember that if you already have functions.php file (and you should because you are using a child theme), leave off the opening php tag.

That’s it! You can get all the file from GitHub.

Sign up for blog releases!

We promise to not send you crap you didn't sign up for. We also won't sell/share your info with others.
Sending