How to design awesome team member area with nice Hover Effect in DIVI

In today’s tutorial, I will show you how to make an awesome team member area in Divi from scratch. So my client requested me to make a custom team member area like this site but using in Divi. I am going to create a similar design but with the Divi theme builder. So let’s dive into it and let’s get started.

Team Member Area

So first I’m taking a new section and here and taking a new row with three columns. Then first I’m going to edit these row settings and from here I’m going to design and sizing and making the width to 100%. So it’s looking similar to this page area now I am taking a new module. I’m taking here social media follow module for the top area. Now I’m going to the background section and here I am taking add image to add a background image.

And here I will take a team in Area so here we will use our images as a background. I am going to spacing and adding some top padding from here and just trying with 300 pixels that in for the top area and 70 pigs in for the bottom we can increase top studying more like this yes it’s looking good.

Now we are just making our social icons to making it Center aligned from here. You can add some icing color to the black color and just add in my color code for black three three three and I’m adding also boho color white.

Add Social Icon

It’s looking good now I’m going to a single item that’s just I’m going for Facebook. And here I’m just changing this background color and changing this color to white and almost it and making this color to black. Yes and now I’m going to design option again and making this I want to make this icon to circular icon. So I’m going to the border area and any rounded content to 50% so it’s now rounded para save it now just trying to copy this time and test this time to other patterns.

Now I will try to add some color overlay with this image like this area when we move our on this image we can see a blue color overlay on it. So we are trying to make something like this so here we are going to back down and going to gradient color background. So I am adding some color here I’m adding similar blue color and from here. And it’s not showing but there are two on this option yeah that’s decreasing our opacity to zero it and here and just insane.

Hover Effect in DIVI

Okay, and clicking on our voice did you are image. We can see only this color on the home I stood yes so when we hover on this image. We can see it overlays and when we are normal state this overlay will move on. Now I’m going to save this page and check it now. So now I’m going to add some more business for this icon so I’m just clicking on these icons and going to inspect the element I am just taking this icon first name from here. I’m just taking this class name and adding sees this yeah for Norma listed icons opacity will be 0 and 4 whole voice did I am adding this last name and I’m just adding this area.

So when we move on this area icon opacity will be 1 so here opposite II will be 1 yes so in the normal state. We cannot see these icons and when we move on image icons also showing here. Now I’m just driving my thesis from here and I’m going to my dashboard and from here I’m going to Divi theme options and spawning down here and from here custom CSS options I’m adding my thesis here and also and I’m taking another CSS from here for her voice chip you just copy module and adding sis this year.

okay now Save Changes now I am adding a text module below this

Team Member Area

Now here and tapping Ambani no I’m tapping mine in here and grabbing this text and making it type title eight tree and under this and trapping member designation such as project manager. I’m going to design a tab and going to the text area. Now I’m making this text alignment to Center and then going to heading text and from here h3 and decreasing text a bit now okay.

Then change the color to darker and again going to the text area and also decreasing this font size going to change the color with the lighter. Okay, so I think it’s looking better now I’m going to save it. Now I am going to duplicate this section for all columns so I’m going to duplicate it and test it to another column and doing the same eggie and now I’m going to change this image I’m going to change a new image here okay.

Again and duplicating text for on module I’m going to duplicate it and test it here and doing the same for another column. So now I’m going to row settings and clicking the design tab and clicking on cut width and decreasing to two now save it.

So here spacing between images decreased now and looking great. Now I’m going to save it and going to check it from here.

Leave a Comment