Divi: the easiest WordPress theme to use
Divi: The best WordPress theme of all time!
With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]
It's no secret that the "Who We Are" pages are very good for generating clicks on your website. It is also this type of page that will focus on the human part of the business behind the website. Knowing this, we recognize that it is important to pay attention to how we structure pages, the type of information we share, and how we create interactions.
One of the things you can do to enhance the page experience is to provide a section of team members that puts your employees in the limelight. In addition to that, you can add a bioflash effect to team members' photos using the built-in Divi options only.
This will save you space on the page you are working on and create a hovering interaction between you and your visitors.
In this tutorial, we will show you, step by step, how to get there. Once you get the approach, you can customize the design style to suit your own needs.
Before diving into the tutorial, let's look at the result on different screen sizes.
Let's start recreating
Add a new section
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
Once you have finished adding 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 access the H2 text settings and make some changes to the appearance 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
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 the color of your divider accordingly:
- Color of the separator: # 333333
Then we will reduce the size of the divider and center it.
Easily create your website with Elementor
Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]
- Width: 26%
- Alignment of the module: center
Add the 2 line
Just below the previous line that you added, continue and add a new row using three columns of equal size.
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
Then, access the spacing settings and add custom margin and fill 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
We also give our line a little depth by adding a box shadow with the following parameters:
- Box Shadow Blur Force: 80px
- Shadowbox propagation strength: -14px
- Shade color: rgba (0,0,0,0,3)
Add an image module to the 1 column
Load an image into an image module
It's time to start adding modules! To achieve the biological overflowing 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 module, meanwhile, will be used to add the icon in the lower left corner and the flyby biography. Add an image module to the first column using a square image.
The design we create is entirely in grayscale. To add this shade of gray to our image, go to the filter settings and remove all the saturation.
- Saturation: 0%
Add the Blurb module to the 1 column
Continue adding a new Blurb module just below the image module in the 1 column. Add the team member's name to the title field and enter additional information about the team member in the content area.
Choose an icon
The next thing we will do is choose an icon of choice that will show visitors that there is more than just a picture.
Are you looking for the best WordPress themes and plugins?
Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]
Default background color
Then we will 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 visitors 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
Parameter of the overflight icon
However, we do not want the icon to appear overflown. That's why we use a totally 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
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)
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 have finished creating our first biological hover effect. To save time, we can simply clone the two modules in the 1 column twice and place the duplicates in the two remaining columns.
Easily create your Online Store
Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]
Modify the image and content of the Blurb module
Do not forget to change the image in the Image module and the copy in the Blurb module to finish the section of the team members!
Now that we have gone through all the steps, let's take a look at the result on different screen sizes for the last time.
In this article, we showed you how to create a biological hover effect for team members' photos using the built-in Divi options only. We emphasized how important it is to create good pages because they are one of the most visited websites.
Using organic flyover effects for team members' photos 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!