It's no secret that "About Us" pages are great at driving clicks to your website. It is also this type of page that will emphasize the human part of the business behind the Website. Knowing this, we realize that it is important to pay attention to how we structure pages, what kind of information we share and how we create interactions.
One of the things you can do to improve the page experience is to provide a team members section that puts your employees in the spotlight. On top of that, you can add a biological hover effect to photos of team members using Divi's built-in options only.
This will allow you to save space on the page you are working on and create a hover interaction between you and your visiteurs.
In this tutorial, we'll show you, step by step, how to get there. Once you get the approach, you will be able to customize the design style to suit your own needs.
Let's go!
Preview
Before we dive into the tutorial, let's take a look at the result on different screen sizes.
Office
Mobile
Let's start recreating
Add a new section
Spacing
Create a new page or open an existing one and add a new section using the following custom fill values:
- Best padding: 100px
- Bottom padding: 100px
Add row 1
Column structure
Once you are done adding the custom fill to your section, you can close the section settings and add a new row using a single column.
Add a text module
Add H2 content
Add a Text Module title to the column with an H2 size of choice.
H2 text settings
Then go to the H2 text settings and make some changes to the look of the copy.
- Heading 2 Font: Cinzel
- Title 2 Font Style: Small Caps
- Title 2 Text alignment: center
- Title 2 Text Size: 70px
Add a division module
Visibility
Continue adding a new separation module just below the Text Module title.
- Show Divider: Yes
Color of the separator
Go to the Design tab, open the color settings and change your divider color accordingly:
- Color of the separator: # 333333
sizing
Then we will reduce the size of the divider and center it.
- Width: 26%
- Alignment of the module: center
Add the 2 line
Column structure
Just below the previous line that you added, continue and add a new row using three columns of equal size.
sizing
Without adding more modules, open the line parameters and make some changes to the sizing parameters.
- Use a custom width: Yes
- Unit: PX
- Custom width: 2000px
- Use a custom gutter width: Yes
- Gutter width: 1
- Equalize column heights: Yes
Spacing
Then go to the spacing settings and add custom margin and padding values.
- Upper margin: 50px
- Bottom margin: 50px
- Top Padding: 10px
- Bottom padding: 10px
- Left Padding: 5px
- Upholstery Right: 5px
- Column 1, 2 and 3 Padding on the left: 5px
- Column 1, 2 and 3 Padding on the right: 5px
Shadow box
We also give our line a little depth by adding a box shadow with the following parameters:
- Box Shadow Blur Force: 80px
- Box shadow propagation force: -14px
- Shadow color: rgba (0,0,0,0,3)
Add an image module to column 1
Load an image into an image module
It's time to start adding modules! To achieve the biological hover effect, we will need two modules in total. an image module and a blurb module. The Image module will contain the image of the team member you want to present.
The Blurb mod, meanwhile, will be used to add the icon in the lower left corner and the hover biography. Add an image module to the first column using a square sized image.
filters
The design we create is entirely in grayscale. To add this shade of gray to our image, go to the filters settings and remove all saturation.
- Saturation: 0%
Add the Blurb module to the 1 column
Add content
Continue by adding a new Blurb module just below the image module in column 1. Add the team member's name to the title field and enter additional information about the team member in the box. contents.
Choose an icon
The next thing we'll do is choose a choice icon that will show visiteurs that there is more than just a photo.
Default background color
Next, we'll choose a full transparent background color.
- Background color: rgba (255,255,255,0)
Background color on flyover
And we will change this color hovering.
- Background color: rgba (255,255,255,0.88)
Default icon settings
We want a visible icon that will help visiteurs to understand that they can fly over it. Change the icon settings to get such an icon.
- Icon Color: #ffffff
- Circle icon: yes
- Circle color: # 000000
- Icon location: left
- Use Icon Font Size: Yes
- Icon Font Size: 50px
Hover icon setting
However, we don't want the icon to appear on hover. That's why we use a completely transparent color instead.
- Icon color: rgba (255,255,255,0)
- Color of circle: rgba (255,255,255,0)
Default title settings
Then go to the title's text settings and make some changes.
- Title Police: Cinzel
- Title Font: Bold
- Title Font Style: Small Caps
- Color text title: # 000000
- Text Title Size: 0px
Hover over the text settings of the title
Change the size of the text by hovering.
- Text Title Size: 30px
Default body text settings
Also change the body text settings.
- Body Police: Open Sans
- Body colored text: # 000000
- Body text size: 0px
- Body height: 1.8em
Parameter of the body on overflight
And, again, change the body size of the text hovering.
- Body text size: 14px
Default spacing
Last but not least, we will need to create an overlap between the Blurb module and the image module using a negative upper margin.
- Upper margin: -3.7vw (desktop), -9vw (tablet and phone)
- Bottom margin: 1.5vw (tablet), 2vw (phone)
Stationary spacing
Change the custom margin and fill values in rollover.
- Upper margin: -11,38vw
- Top Padding: 20px
- Bottom padding: 20px
- Upholstery Right: 50px
Clone the two modules twice and place the duplicates in the remaining columns.
We've finished creating our first biological hover effect. To save time, we can simply clone the two modules in column 1 twice and place the duplicates in the remaining two columns.
Edit the image and content of the Blurb module
Don't forget to change the image in the Image module and copy in the Blurb module to complete the team members section!
Preview
Now that we've gone through all of the steps, let's take a final look at how it looked on different screen sizes.
Office
Mobile
Latest Thoughts
In this article, we've shown you how to create a biological hover effect for photos of team members using Divi's built-in options only. We have emphasized how important it is to create good pages because they are one of the most visited websites.
Using bio hover effects for photos of team members will not only improve the quality of your page, but also create interaction with your visitors. If you have any questions or suggestions, be sure to leave a comment in the comments section below!
Hello,
Thank you for this tutorial, it was very useful to me.
However, I encounter 2 small problems:
- the hover background does not apply (I have the impression that it is behind the image ...)
- the flyover does not open in the same way as in the example (my text remains at the same height as the icon and does not open upwards) which gives a nice look.
Do you have a solution? Thank you.
Good night
Hello,
Can you share a screenshot?
Hello,
Thank you for this tutorial, it is very well explained.
However I have a problem when hovering the mouse over my hover is shaking and not flowing. Do you know what this is due to?
Thank you
Hello Sal,
No idea sorry.