Build Beautiful WordPress Websites Using Divi and Divi Builder

How To Design A Team Member Page With Hovering Social Media Icons On Divi

Rifat Divi Tutorials Jul 5, 2021

We sometimes need to display team members on our websites, this is an excellent way to showcase our dexterous team members to the outer world. We can display their image, name, and designation in the company. To give them more exposure, you can add their social media links to the design. Now, usually, people add these links beneath the name and designation, but it's time to make the smart move and modify the way of design. In today's Divi tutorial, we will see how to create a team member page with hovering social media icons over the image. Let's not waste more time and get to do it!

Sneak Peak

This will be our todays design.

Part 1: Design Module

Settings: Section One

Background Color

Start by changing the color of the initial section to the page you’re working on. Open the section settings and change the background color.

  • Background Color: #0f0f0f

Spacing

Now from the design tab and change the spacing settings.

Create Amazing Websites

With the best free page builder Elementor

Start Now
  • Top Padding: Desktop & Tablet: 100px & Phone: 50px
  • Bottom Padding: Desktop & Tablet: 100px & Phone: 50px

New Row Adding

Column Structure

Now add a new row with following column structure.

Column: Text Module 1

Add H1 Content

Now let's add some context of our choice to this module with H1 content.

H1 Text Settings

Now make some changes to the module from design tab. First, change heading settings.

  • Heading Font: Alata
  • Heading Text Color: #ffffff
  • Heading Text Size: Desktop: 50px, Tablet: 45px & Phone: 35px
  • Heading Line Height: 1.2em

Column: Divider Module

Visibility

Let's add a Divider Module. Make sure the “Show Divider” option is enabled.

  • Show Divider: Yes

Line

From the design tab, change the line color.

  • Line Color: #ffffff

Sizing

Change the sizing of this divider module.

  • Divider Weight: 2px
  • Max Width: 100px
  • Height: 2px

Column: Text Module 1

Add Descriptive Context

Here we'll add another text module where we'll put some content of our choice.

Text Settings

From design tab, change the text settings accodingly.

  • Text Font: Alata
  • Text Color: #7c7c7c
  • Text Size: 17px
  • Text Line Height: 1.9em

Spacing

From spacing section, make the following change.

  • Bottom Margin: 0px

Adding & Settings: Section Two

Now add another regular section below the previous one.

Gradient Background

Now use a gradient background for this section.

  • Color 1: #0f0f0f
  • Color 2: #000000
  • Start Position: 10%
  • End Position: 10%

Spacing

Next, modify the spacing settings.

  • Top Padding: 0px
  • Bottom Padding: 200px

New Row Adding

Column Structure

Now add a new row on this section with following column structure.

Sizing

Open the row settings and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 2px

Column 1: Social Media Follow Module

Add Social Networks

Now, we will add a social media follow module to column 1 and put desired social media connections

Remove Background Color From Social Media Icons

Click settings for each icon and then go to background and select transparent. Also you can click on color and remove it.

Add Link to Each Social Network

Add a corresponding link to each social network too.

Default Background Color

From the module settins option, add this color as background.

  • Background Color: rgba(0,0,0,0)

Hover Background Color

Change the background color for hover effect.

  • Hover Background Color: #494949

Background Image

Then, upload a team member image as background.

  • Background Image Size: Cover
  • Background Image Blend: Multiply

Alignment

From the module’s design tab, change the alignment settings.

  • Module Alignment: Center

Icon

Now change the icon color.

  • Icon Color: rgba(0,0,0,0)

Spacing

Then, go to the spacing settings and apply the following values:

  • Bottom Margin: 0px
  • Top Padding: Desktop: 250px, Tablet: 450px & Phone: 200px
  • Bottom Padding: 20px

Border

Now, change the border setting accordingly.

  • All Corners: 100px
  • Border Width: 2px
  • Border Color: rgba(255,255,255,0)

Hover Border

Now, use a border for hover.

  • Hover Border Color: #ffffff

CSS Class

Now from the advanced tab, add a custom CSS class.

  • CSS Class: team-socials

Hover Before Element

Now, finish the module settings by applying the following CSS code to the before element. Make sure to put it on hover.

content: "Say Hello To Me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
padding-left: 30px;

Column 1: Person Module

Add Content

The final module we will use in this column is a person module. add the module and pout information inside it.

Text Settings

From the design tab of the person module and change the text settings as follows:

  • Text Alignment: Center
  • Text Color: Light

Title Text Settings

Now modify the title text area.

  • Title Font: Alata
  • Title Text Size: Desktop: 27px, Tablet: 25px & Phone: 22px

Position Text Settings

Change the settings for position text .

  • Position Font: Alata
  • Position Text Size: Desktop: 17px & Tablet & Phone: 15px

Spacing

Apply some custom top and bottom padding to the spacing settings.

  • Top Padding: 40px
  • Bottom Padding: 40px

Border

Now apply the following border settings and finish the column.

  • Border Width: 1px
  • Border Color: #ffffff

Remove Other Columns

Now delete the columns for the section.

Clone Column Twice

Now duplicate the column one two times.

Clone Entire Row

Now, duplicate the entire row as more as you need. Here we will duplicate it once.

Change Duplicated Contents

Now we will change the images, social media links, person info for every individual.

Part 2: Code Module

Code Module In Section 1

Now, add a code module below the text module of section one.

Add CSS Code

Now copy the following lines of CSS code and paste it to the code module and you’re done. Don't forget to put them inside Style tag.


.team-socials:hover li a.icon:before {
  color: black !important;
}
 
.team-socials:hover li a.icon {
  background-color: white;
}

Final Result

As far we have completed all the steps successfully, this is what our results look like.

Conclusion

In today's tutorial, we have tried to show how creatively we can design a team member page. Using the hovering effect of the Divi theme, the social connections of the team members can be shown in such an aesthetic way. We hope you find today's tutorials useful, a share with your surroundings will encourage us to come up with more new and amazing Divi tutorials.