It’s no secret that about pages are nice to create click-throughs to your web page. It’s additionally that one roughly web page that’ll emphasize the human a part of the corporate at the back of the web page. Realizing this makes us mindful that it’s necessary we be aware of the best way we construction about pages, what sort of knowledge we percentage and the way we create interactions. One of the crucial issues you’ll do to lift the about web page revel in is offering a staff participants segment that places your workers within the highlight. On best of that, you’ll upload a bio hover impact to staff member footage the use of Divi’s integrated choices handiest. This may increasingly will let you save house at the web page you’re running on and create a hover interplay between you and your guests.
On this instructional, we’ll display you step-by-step the way to get there. When you get the manner, you’ll be capable to customise the design taste in your personal wishes.
Let’s get to it!
Preview
Prior to we dive into the academic, let’s check out the end result on other display sizes.
Desktop
Cellular
Let’s Get started Recreating
Upload New Phase
Spacing
Create a brand new web page or open an present one and upload a brand new segment the use of the next customized padding values:
- Most sensible Padding: 100px
- Backside Padding: 100px
Upload Row #1
Column Construction
When you’re achieved including the customized padding in your segment, you’ll shut the segment settings and upload a brand new row the use of one column handiest.
Upload Textual content Module
Upload H2 Content material
Upload a name Textual content Module to the column with some H2 replica of selection.
H2 Textual content Settings
Then, cross to the H2 textual content settings and make some adjustments to the semblance of the replica.
- Heading 2 Font: Cinzel
- Heading 2 Font Taste: Small Caps
- Heading 2 Textual content Alignment: Middle
- Heading 2 Textual content Dimension: 70px
Upload Divider Module
Visibility
Proceed by means of including a brand new Divider Module proper beneath the name Textual content Module.
- Display Divider: Sure
Divider Colour
Cross to the design tab, open the colour settings and alter the colour of your divider accordingly:
- Divider Colour: #333333
Sizing
Subsequent, we’ll lower the dimensions of the divider and middle it.
- Width: 26%
- Module Alignment: Middle
Upload Row #2
Column Construction
Proper beneath the former row you’ve added, cross forward and upload a brand new row the use of 3 equally-sized columns.
Sizing
With out including any modules but, open the row settings and make some changes to the sizing settings.
- Use Customized Width: Sure
- Unit: PX
- Customized Width: 2000px
- Use Customized Gutter Width: Sure
- Gutter Width: 1
- Equalize Column Heights: Sure
Spacing
Then, cross to the spacing settings and upload customized margin and padding values.
- Most sensible Margin: 50px
- Backside Margin: 50px
- Most sensible Padding: 10px
- Backside Padding: 10px
- Left Padding: 5px
- Proper Padding: 5px
- Column 1, 2 & 3 Left Padding: 5px
- Column 1, 2 & 3 Proper Padding: 5px
Field Shadow
We’re additionally giving our row a little of intensity by means of including a field shadow to it with the next settings:
- Field Shadow Blur Energy: 80px
- Field Shadow Unfold Energy: -14px
- Shadow Colour: rgba(0,0,0,0.3)
Upload Symbol Module to Column 1
Add Symbol to Symbol Module
Time to start out including modules! To reach the bio hover impact, we’ll want two modules in overall; an Symbol Module and a Blurb Module. The Symbol Module will cling the picture of the staff member you wish to have to show off. The Blurb Module, alternatively, shall be used so as to add the icon to the left backside nook and the bio on hover. Upload an Symbol Module to the primary column the use of a square-sized symbol.
Filters
The design we’re growing is solely grayscale. So as to add this grayscale to our symbol, cross to the filters settings and take away the entire saturation.
- Saturation: 0%
Upload Blurb Module to Column 1
Upload Content material
Proceed by means of including a brand new Blurb Module proper beneath the Symbol Module in column 1. Upload the staff member’s title to the name box and input some extra information concerning the staff member within the content material field.
Make a choice Icon
The following factor we’ll do is make a choice an icon of selection that’ll display guests that there’s extra to it than only a image.
Default Background Colour
Then, we’ll make a choice a whole clear background colour.
- Background Colour: rgba(255,255,255,0)
Hover Background Colour
And we’ll trade that colour on hover.
- Background Colour: rgba(255,255,255,0.88)
Default Icon Settings
We would like a noticeable icon that can assist guests perceive they may be able to hover it. Trade the icon settings to reach an icon like that.
- Icon Colour: #ffffff
- Circle Icon: Sure
- Circle Colour: #000000
- Icon Placement: Left
- Use Icon Font Dimension: Sure
- Icon Font Dimension: 50px
Hover Icon Settings
Then again, we don’t need the icon to look on hover. That’s why we’ll use a fully clear colour as an alternative.
- Icon Colour: rgba(255,255,255,0)
- Circle Colour: rgba(255,255,255,0)
Default Name Textual content Settings
Subsequent, cross to the name textual content settings and make some adjustments.
- Name Font: Cinzel
- Name Font Weight: Daring
- Name Font Taste: Small Caps
- Name Textual content Colour: #000000
- Name Textual content Dimension: 0px
Hover Name Textual content Settings
Alter the textual content dimension on hover.
- Name Textual content Dimension: 30px
Default Frame Textual content Settings
Alter the frame textual content settings as smartly.
- Frame Font: Open Sans
- Frame Textual content Colour: #000000
- Frame Textual content Dimension: 0px
- Frame Line Top: 1.8em
Hover Frame Textual content Settings
And, once more, trade the frame textual content dimension on hover.
- Frame Textual content Dimension: 14px
Default Spacing
Final however now not least, we’ll want to create an overlap between the Blurb Module and Symbol Module the use of unfavourable best margin.
- Most sensible Margin: -3.7vw (Desktop), -9vw (Pill & Telephone)
- Backside Margin: 1.5vw (Pill), 2vw (Telephone)
Hover Spacing
Trade the customized margin and padding values on hover.
- Most sensible Margin: -11.38vw
- Most sensible Padding: 20px
- Backside Padding: 20px
- Proper Padding: 50px
Clone Each Modules Two times & Position Duplicates in Closing Columns
We’re achieved growing our first bio hover impact. To avoid wasting time, we will be able to merely clone each modules in column 1 two times and position the duplicates within the two last columns.
Trade Symbol & Content material of Blurb Module
Take into account to modify the picture within the Symbol Module and the replica within the Blurb Module to complete the staff member segment!
Preview
Now that we’ve long past via all steps, let’s take a last take a look at the end result on other display sizes.
Desktop
Cellular
Ultimate Ideas
On this publish, we’ve proven you the way to create a bio hover impact on hover for staff member footage the use of Divi’s integrated choices handiest. We’ve discussed how necessary it’s to create excellent about pages, as they’re probably the most visited pages web sites. The use of bio hover results for staff member footage won’t handiest will let you take your about web page to the following degree but in addition create an interplay together with your guests. When you’ve got any questions or tips, make sure to go away a remark within the remark segment beneath!
The publish How To Add A Hover Effect To Team Member Bios In Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design