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.
i recently installed, i follow all the steps, and when i put on my page, there is the background but everything else is empty, can you please help me? thank you
Hi Manuel.
First you need to import the section JSON file into the Divi Library, and then add it to your page layout as a section from Divi Library. No need to do anything else, the JS&CSS code is already included in the layout using Code modules. If you do it this way then it should work.
Hi,
Thank you for the modules! But i have a question,
I cant find the CSS files in my download?
I want to make the module responsive, and show 3 members in a row on desktop, 2 on tablet and only 1 on mobile.
Now it shows 3 in a row on desktop and only 1 on tablet and it doesnt look good.
Can you please help med?
Thank you in advance!
/Emelie
Hi Emelie.
Please find the CSS in the Code module of the layout, it’s labeled accordingly. The latest version of the layout does not have CSS in a separate file but it comes with the layout file for easier installation.
Why do you keep removing my comments without addressing the issue of the missing conformation email?
Hi Britt.
Your comments were not removed, they’re just waiting to be approved :) Regarding the confirmation email – I’ve checked the delivery status for your email address and it shows as delivered, please check again, sometimes it may take a bit longer to deliver.
I just checked again and it’s not there. It’s also been over an hour or so since I opted in. Again, can you simply send me the download link?
There might be an issue with your email address. Please try a different one. The download link is sent to the confirmed email addresses only.
Hi Ivan,
Opted in but never received the confirmation email. Checked spam and all the usual stuff etc. Still nothing.
Hi sir.
Thanks alot for your tutorial and for free layout.
but i get a problem and i do’t know how to fix that.
my problem is a divi library can’t upload Js file.
thanks
Hi Kempes.
You should upload the JSON file to Divi Library, but not the JS file. If for some reason you are not able to upload the JSON file then please contact ET support and they’ll help you with that.
Change you change the color of the squares with the social network icons in them?
Hi Jason.
You are asking about the Effect-3 I guess. Please open the CSS file and find the
.dvcs_person_module_effect_3 a.et_pb_font_iconand change thebackground-color.I would like to change the google plus icon to an email icon. How do you do that?
Beautiful module. I have searched everywhere to remove or change the purple gradient that is showing in the background but its not on the divi module where the Background/gradient option is located.
Please help. You have really mastered divi
That purple background is actually the section devider, you can remove it in Section Settings->Design->Dividers(bottom)
Please could anyone help on how to put my images inside the placeholders and how to change the descriptions? I would also love to increase the number from 3 to 4, any help please?
Thanks guys, I was able to figure this ones out.
Hi Moon,
you can add your image and text in module settings as usually and if you want to add 4 modules just change the row structure to 4 columns and add the Person module into the 4th column.
Please is there a way I can make the module slide, show a number of team members at a time? Was looking at a similar effect as the blurb and testimonial modules. Any help please?
We really appreciate the great work and thanks for giving it out for free.
But I think this would be awesome if could add a sliding effect to it so one could show more than three team members. Once again, thanks.
Thanks for the things mate but the download link is not arriving.
Hi Umesh,
sometimes it may take a bit longer to arrive. It must have arrived by now, please check again.
The module looks great but the subscription and delivery system of the files is broken. I subscribed twice but no download link came into my inbox.
Hi Jean,
the download link is sent with the Welcome email to the first-time subscribers only and the existing subscribers get the download link delivered to their email addresses everytime the Freebies Package is updated, they don’t need to subscribe again.
Since you’ve already subscribed before you don’t need to subscribe again, and the freebies package has been sent to you as well, please check your inbox for emails from Divicio.us .
i have subscribe but in my mail,no download link
Hi Georges,
I checked the delivery status for your email address and it shows delibered, please check again.
Sorry Mr Ivan Chi, I recieved, I appreciate your work. Thank you
Thank you, dayib
I subscribed, checked spam folder still not received the download link
Absolutely gorgeous team member section and hover effects. Well done!
Thank you, Rich!
no confirmation mail
Hi Sumsuzzaman,
you will not receive the confirmation email because you are already a subscriber. The emails with free downloads have been sent to all subscribers before, please check your inbox for free download emails from Divicio.us
My post vanished and I still didn’t get the confirmation email. What happens if a person opted in a long time ago and doesn’t still have the conformation email? How do they get the download link? This seems like a hard way to do this. Why not simply provide the download link when someone enters their info in the form and confirms like most others do? Seems much easier for everyone.
Hi Britt.
Your comment was not removed, it was just waiting to be approved :) Regarding the confirmation email – I’ve checked the delivery status for your email address and it shows as delivered, please check again, sometimes it may take a bit longer to deliver.
I submitted my email for the downloads but I haven’t received anything as yet.
Hi Rochelle,
I’ve just checked it for you, the email has been sent to your email address, please check again. Make sure to check your spam/junk folder as well as the email may have arrived there too.
Thank you very much for these free resources but I have several doubts in the effect number 3
-As I can expand the number of photos from 3 to 5 and make the same effect.
-I do not want to show the Google icon but maybe the e-mail icon. How could that change?
Hi Begona.
1) Currently Divi theme allows you to add up to 4 columns in a row, thus you’ll be able to add up to 4 Person modules side by side at most and the Effect 3 will work regardless of the amount of Person modules used. But the problem is that the more Person modules you have per row the less space you’ll have for the team member content since the amount of content is restricted by the size(width and height) of the module. That’s why these effects work best with up to 3 Person modules in a row. Hope this makes sense.
2) Adding a new icon to Person module would require custom coding, currently there are no any other options for that.
Hi,
I’ve already suscribe but I dont receive my link for the download
Hi Alfonso.
I’ve verified that the email with download link has been delivered to your email address. Please check your inbox and spam(junk) folder as well.
I have subscribed and even check my spam folder but I haven’t receive any download links in my email
Hi Fube.
Sorry to hear that. Please make sure you’ve confirmed your email, the welcome email containing download links is sent to confirmed email addresses only and only when you subscribe for the very first time.
If you need further help please contact me via support page, I’ll be glad to help you.
Hello :)
I have the same problem :(
Hi Dherka,
you did not confirm your email address. To receive the download link you need to confirm your email address first.
Hello Ivan,
Your Person Module sections are really awesome. But the problem is Social Icon not showing. Any idea?
Hi Md Khorshed Alam.
Thanks for stopping by. For social icons to be showing the social profile URLs need to be added, please check that in the Person Module settings.
Hello
Thanks for this great tutorial and free sections.
I have inserted my email several times but I never receive the confirmation email as well as the files.
Would you please help me?
Thanks
Hi Ahmed.
The emails may have arrived in the spam folder, please check there too.
Yes, I already did! Nothing arrived there.
Please help.
I’ve just sent you an email with download links again, please check.
Your effects are awesome. I was wondering if it was possible to make a learn more link with a modal pop up to show more info on your persons module 3?
Hi Amit.
It is possible but it would require a more complex solution. Maybe it’s time to create a Person Module Extended plugin? :)
Did you ever get a “learn more” link within the module? I’d love that too!