How to Create a Vibrant Hover Team Page for Your Next Divi Project

Posted on August 1, 2019 by in Divi Resources | 3 comments

How to Create a Vibrant Hover Team Page for Your Next Divi Project

Team pages are often underestimated. Before purchasing a product or hiring a service, many users navigate to team or about pages to get a better idea of the company and the people behind it. If your team page leaves a positive first impression, it could lead towards higher conversion rates. Now, there are many ways to create beautiful team pages with Divi, but if you’re searching for some inspiration for your next project, you’re going to love this post. We’ll recreate a vibrant hover team page that triggers member bios on hover.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

meet the team preview gif

Mobile

responsive preview of the vibrant team hover

Subscribe To Our Youtube Channel

1. Start With a Regular Section + One-Column Row For The Title

Open a new page and set the page attributes to ‘blank page.’ Once you’ve done that, enter the Divi Builder and add a section with a one-column row.

Add a once column row

Add a text and divider module.

add a text and a divider module

2. Add Content to Text Module & Style It

Add some H1 content to the text module.

Add the content into the text module

Move on to the design tab and style the H1 text settings accordingly:

  • Heading Font: Poppins
  • Heading Font Weight: Light
  • Heading Text Alignment: Center
  • Heading Text Color: Black #000000
  • Heading Text Size:
    • Desktop = 6vw
    • Tablet = 9vw
    • Phone = 11vw
  • Heading Letter Spacing: -0.4vw

style the meet the team blurb

3. Style the Divider

On to the next module, which is the divider module. Change the divider color into black and modify the sizing settings.

  • Divider Color: Black #oooooo
  • Divider Weight: 12px
  • Width: 14%
  • Module Alignment: Center

divider settings

4. Create Team Bios Using a Regular Section + Three-Column Row

Now that we’ve completed the title section, we’re ready to start building the team bios. Start by adding a new regular section with a three-column row.

add a new section

add a three column row

5. Adjust Row Sizing Settings

Allow the row to take up the entire width of the section container by modifying the sizing settings.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

spacing for the row

6. Adjust Row Spacing Settings

Add some custom top and bottom padding as well.

  • Top Padding: 2vw
  • Bottom Padding: 2vw

padding for row settings

7. Add an Image & Blurb Module to Column One

The two main modules we’ll use to create the final effect are an image and a blurb module. First, add the image module and then the blurb.

add an image and a blurb

8. Upload an Image & Style It

Your hover team page is all about showcasing team members. Open the image module and add a photo of one of them. We’ll use one of our Divi stock images. Make sure your image dimensions are 612px X 612px.

add an image

Alignment

Move on to the design tab and change the image alignment.

  • Image Alignment: Center

Centered image alignment

Sizing

Modify the sizing settings too.

  • Width: 30%
  • Module Alignment: Center

Sizing the image

Spacing

And add some negative top margin.

  • Margin:
    • Desktop = -3vw
    • Tablet and Phone = -13vw

set the margin for the image

Border

To turn the image into a circle, we’re going to change the border settings.

  • Rounded Corners: 20vw All Four Corners
  • Border Styles: All Four Sides
  • Border Width: 12px
  • Border Color: White #ffffff
  • Border Style: Double

add a double border to the image

Box Shadow

We’re also adding some depth to the image by applying a subtle box shadow.

  • Box Shadow: The First Option
  • Box Shadow Blur Strength: 50px

add a box shadow to the image

Z Index

In one of the previous steps, we’ve added some negative top margin. To make sure the image stays on top of the column, even when it exceeds it, we’re going to increase the z index in the visibility settings.

  • Z Index: 3

Set the z index to 3

9. Add Content to Blurb & Style It

Add Custom CSS to The Page Settings

Before we do anything else, we’ll add some custom CSS to get rid of the default bottom margin of the icon inside the blurb. Add the following lines of CSS code to the page settings:

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

add CSS to page settings

Give Blurb a CSS Class

Open the blurb module next and add the matching CSS class.

  • CSS Class: blurb-icon

add a css class to the blurb

Add Content

We’ll use placeholder text but you can insert the actual name and description of a team member.

add the content in the blurb

Choose Icon

Choose a plus icon next.

  • Use Icon: Yes
  • Icon: Plus Sign Inside a Circle

choose an icon for the blurb

Style Background

Move on to the background settings, add a white default background color and a gradient background on hover.

  • Background: White #ffffff
  • Hover Background: Gradient
  • Gradient Color One: #00ffa1
  • Gradient Color Two: #29c4a9
  • Gradient Type: Linear
  • Gradient Direction: 154deg
  • Start Position: 0
  • End Position: 46%

add a background to the blurb

Style Icon

Apply the following icon settings next:

  • Icon Color:
    • Default: #29c4a9
    • Hover: Transparent rgba(255,255,255,0)
  • Use Icon Font Size: Yes
  • Icon Font Size:
    • Desktop = 2vw
    • Tablet = 4vw
    • Phone = 6vw

Style the icon in the blurb

Alignment

Move on to the text settings and change the text alignment.

  • Text Alignment: Center

align the text in the blurb

Style Heading Text

Then, open the heading text settings and make some changes across different screen sizes.

  • Heading: H4
  • Title Font: Poppins
  • Title Font: Bold
  • Title Text Color: White #ffffff
  • Title Text Size:
    • Desktop: 1.5vw
    • Tablet: 2.5vw
    • Phone: 3.5vw

style the heading text in the blurb

Style Body Text

Do the same for the body text settings.

  • Body Text Color: White #ffffff
  • Body Text Size:
    • Desktop = 0.8vw
    • Tablet = 1.9vw
    • Phone = 2.6vw
  • Body Line Height:
    • Desktop = 2vw
    • Tablet + Phone = 3vw

Style the white text in the blurb

Sizing

Next, we’re going to change the sizing settings of our blurb module.

  • Content Width: 100%
  • Width: 81%
  • Module Alignment: Center

sizing the white text in the module

Spacing

We’ll apply some custom margin and padding values across different screen sizes as well.

  • Top Margin:
    • Desktop = -4vw
    • Tablet + Phone = -9vw
  • Bottom Margin:
    • Desktop = 3.5vw
    • Tablet + Phone = 10vw
  • Top and Bottom Padding:
    • Desktop = 7.1vw
    • Tablet = 30vw
    • Phone = 28vw
  • Left and Right Padding
    • Desktop = 2vw
    • Tablet + Phone = 8vw

margin and padding for the module

Border

Turn the blurb module into a circle by adding some border radius.

  • Rounded Corners: 50vw All Four Corners

rounded corners blurb

Box Shadow

And complete the blurb module design by adding a box shadow that appears on hover.

  • Box Shadow: Fifth Style
  • Box Shadow Horizontal Position: 0vw
  • Box Shadow Vertical Position:
    • Desktop + Hover = -14vw
    • Tablet = -44vw
    • Phone = -46vw
  • Box Shadow Spread Strength:
    • Desktop + Hover = -6vw
    • Tablet + Phone = -19vw
  • Box Shadow Color:
    • Hover = rgba(0,0,0,0.05)

box shadow for the blurb

10. Style Column One

Now that we’ve added all modules we need to column one, it’s time to style the column.

Background

Open the column one background settings and apply the following gradient background:

  • Background Style: Gradient
  • Gradient Color One: #00ffa1
  • Gradient Color Two: #29c4a9
  • Gradient Type: Liner
  • Gradient Direction: 282deg

set the background for the column

Border

Move on to the design tab and turn the column into a circle by adding some border radius.

  • Rounded Corners: 50vw

round the corners of the column

Overflow

To make sure the image appears above the column, we’re going to change the horizontal and vertical overflows in the visibility settings.

  • Horizontal and Vertical Overflow: Visible

visibility and overflow

11. Delete Empty Columns & Duplicate First Column Twice

We’ve completed the first column and all the modules inside it. To save ourselves some time, we’re going to remove the empty columns and clone the first column twice.

Delete Columns Two & Three

Go back to the main row settings and click on the trash icon for columns two and three.

Delete columns two and three

Duplicate Column One Twice

After you’ve deleted columns two and three, column one will look weird for a second, but that all changes as soon as you clone the column twice.

duplicated column

12. Change Content & Colors of Column Two

Now it’s time to style the new columns for your two other team members.

Column Two

Open the second column’s settings and change the gradient background

  • Background Gradient Color One: #00eeff
  • Background Gradient Color Two: #309ce5

Change the color background in the column settings

Upload a different image as well.

change the image

Continue by opening the blurb module and changing the gradient background.

  • Hover Background Color One: #00eeff
  • Hover Background Color Two: #309ce5

change the blurb background hover gradient

Change the icon color as well.

  • Default Icon Color: #309ce5

change the icon color

Column Three

Open the third column’s settings and change the gradient background.

  • Background Gradient Color One: #ff91ec
  • Background Gradient Color Two: #a500ff

style the color of the third column

Change the blurb gradient background next.

  • Hover Background Color One: #ff91ec
  • Hover Background Color Two: #a500ff

change the blurb background

Along with the icon color.

  • Default Icon Color: #a500ff

change icon color in blurb

Preview

Now that we’ve gone through the different steps, let’s take a final look at the outcome across different screen sizes.

Desktop

meet the team preview gif

Mobile

responsive preview of the vibrant team hover

It’s a Wrap!

In this post, we showed you how to create a vibrant hover team page with colorful hover options. Feel free to use this design in your next Divi project. Try it out for a team page or a contributors directory. Let us know if you have any thoughts in the comments.

Premade Layouts

Check Out These Related Posts

13 Industrial Child Themes for Divi

13 Industrial Child Themes for Divi

Posted on November 17, 2019 by in Divi Resources

Industrial websites are technology-based and include lots of science and engineering and can include anything from manufacturing robots to building a home. Divi is a great choice for building industrial websites because everything you need to show services, projects, products, introduce clients to...

View Full Post

3 Comments

  1. This seems like a very cool and professional manner to introduce any team or board of directors for example.
    However, there is just SO much to change. It has taken me hours to repeat the steps and I still can’t get it right.
    It may be because of the conversions from VW to pixels. Could you make the function available as a library unit
    so I can examine it step by step. Something seems to be missing or wrong in following the directions, its probably
    me but I can’t spend much more time trying to figure this out. My email is below.
    Thank-you

  2. Can you please email me this library section? I cannot get it to work and would love to use it.
    Thank-you

  3. Yes same issue here. Not coming out this way.

Join To Download Today

Pin It on Pinterest