How to Customize Divi Person Module and Add Hover Effects

Today I would like to show you how Divi Person Module can be easily customized. We will add several lines of CSS that will make our team page stand out.

Live Preview

Divi Person Module allows you to add team members, persons to your website with ease. It has several useful features built in. We can add name, title, image, short description and social media links.

In this tutorial I will show you how to add a hover effects to the profile image and social media links and also how to add a little divider below the title. To follow this tutorial you will need Divi Theme by Elegant Themes installed.

We will add zoom in/out effect to the profile image and we will hide social media icons by default and will make them slide up on mouseover only.

Let’s get started.

1

Adding row, columns and Divi Person Modules

First thing we need to do is to add row and columns to the page we want team members to be displayed. After that we add Person Module to each column and fill up the fields in the module customizer.

We add name, title, image, social media links and short description to each module. It is recommended to use the same size images for each person module. For this tutorial I will use square images 400px width and height.

2

Adding custom class to each Person Module

We will be applying custom css to our modules. To make it working we need to add custom class to each Person Module we have created in previous step, so our changes will be applied correctly. To do that open Person Module Settings and go to Custom CSS tab. Use b3_team class in CSS Class filed. Save & Exit. Repeat the same steps for all other Person Modules you have on your page.

3

Adding custom CSS to Divi Theme Options or Child Theme stylesheet

In previous step we have applied custom css class to each Person Module. Now we will be applying CSS rules to person image, title and social media icons. This code can be added to Divi/Theme Options/Custom CSS but it is recommended to use child theme for this purpose. You can find more information about creating child themes on Geno Quiroz’s blog.

Copy the following code and paste it to your child theme style.css file or to Theme Options Custom CSS section.

And that’s it!

Hopefully you enjoyed this tutorial and it was a fun to make this module working differently than default Divi Person Module. If you have used this on your website or on your client’s website please share url in comments below. I would love to see how you use it in your project.

Maciej Ekstedt

Maciej Ekstedt

Creative Director

Live Preview

John Doe

John Doe

Director

Duis sed tellus eget ipsum posuere viverra in nec dui. Integer et libero turpis. Donec eget neque sit amet tellus porta vehicula vel ac quam.

Sarah Doe

Sarah Doe

Designer

Duis sed tellus eget ipsum posuere viverra in nec dui. Integer et libero turpis. Donec eget neque sit amet tellus porta vehicula vel ac quam.

Jason Doe

Jason Doe

Developer

Duis sed tellus eget ipsum posuere viverra in nec dui. Integer et libero turpis. Donec eget neque sit amet tellus porta vehicula vel ac quam.

Premium WordPress Divi Child Theme for real estate professionals, experts and agencies. Get 15% discount with coupon code ESTATE15
Learn More

14 Comments

  1. Mike

    my pictures have a padding around them? How can I fix that?

    Reply
    • Maciej Ekstedt

      Hi Mike, thank you for your comment! It seems like images you are using are too small or other css is applied. Can you please make sure you are using images at least 400px width and height? Also url would help 🙂

      Reply
  2. Anthea

    Wow, thank you. This really does look great. Looking forward to using this on our next website build 🙂

    Reply
  3. Andre

    Loved your blog design. And that’s a really nice tutorial!

    Reply
    • Maciej Ekstedt

      Thank you Andre! I’m happy to see you here and always welcome! 🙂

      Reply
  4. Jeffrey

    Many thanks, Maciej, for making this valuable module and your tutorial to implement it available to our Divi group.

    Reply
  5. John-Pierre Cornelissen

    That looks great! But how did you add the website icon to the social media icons in the demo? The Divi person module doesn’t have that option, and the db_pb_team_member_website_icon class you use for the globe icon in the demo isn’t in the css above either.

    Reply
    • Maciej Ekstedt

      Hi John-Pierre,
      Thank you for your comment. That’s true. Website icon is added to the Person Module by Divi Booster plugin and this is not a part of this tutorial. Thank you for notifying. I have removed the icon from Live Preview section.

      Reply
      • John-Pierre Cornelissen

        Cool, thank you! I didn’t know Divi booster could add that. I think ET should update that module and allow you to add that + all social media accounts you can also add with the social media module + custom options with a custom icon. There is always something to which for 🙂

        Reply
  6. Micah Petrea

    Awesome tutorial! Thanks for the CSS Code.

    When I implemented this my names and positions are not centered, they are to the left.

    https://allenlawfirm.com/meet-taf/

    Reply
    • Maciej Ekstedt

      Hi Micah,

      Indeed, there is some CSS issue. Please add the following code to your stylesheet:

      .b3_team .et_pb_team_member_description {
      display: block;
      }

      Reply
  7. Dehn

    Very nice. Clean and well executed post as well. Thank you!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Shares

Pin It on Pinterest

Share This
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
Get in touch
We are ready to talk about your project. Please leave your message and we will get back to you shortly.
Your Information will never be shared with any third party.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your email has been added successfully.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resale “as is”. It is allowed to distribute/sublicense the source files as a part of a larger project.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout