Testimonials are an enormous deal for lots of web sites. They display experience and guests typically move in search of them in the event that they wish to work out how credible an organization or individual is. That’s why it’s necessary to consider the best way you visually provide testimonials to your website online.
With Divi, you’ll be able to show your testimonials precisely the best way you wish to have to. To encourage you, we’ll display you the way to create a surprising and distinctive method to show off testimonials the usage of hover overlaps.
Let’s get to it!
Preview
Sooner than we dive into the academic, let’s check out the outcome.
Upload New Segment
Let’s get began! Upload a brand new web page or open an current one and upload a brand new common phase.
Upload New Row 1
Column Construction
Proceed by way of including a brand new row the usage of the next column construction:
Sizing
With out including any modules but, open the row settings and alter the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
Upload some customized spacing values as neatly.
- Most sensible Padding: 0px
- Backside Padding: 0px
- Column 2 Left Padding: 2vw (Desktop), 3vw (Pill & Telephone)
- Column 2 Proper Padding: 11vw (Desktop), 3vw (Pill & Telephone)
Upload Symbol Module to Column 1
Add Symbol
Time to begin including the more than a few modules! Get started with an Symbol Module within the first column. Add a portrait symbol of selection.
Symbol Alignment
Open the picture settings and alter the picture alignment.
- Symbol Alignment: Left
Sizing
Alternate the sizing settings subsequent.
- Width: 78% (Desktop), 70% (Pill & Telephone)
- Module Alignment: Left
Upload Hover Overlap Textual content Module to Column 1
Upload Content material
Proper under the Symbol Module, upload a Textual content Module. Position the individual’s main points within the content material field.
Default Background
Continue by way of including a background colour.
- Background Colour: rgba(255,255,255,0)
Hover Background
Upload some other background colour on hover.
- Background Colour: #0f1bff
Default Textual content Settings
Then, exchange the textual content settings.
- Textual content Colour: #ffffff
- Textual content Dimension: 0px
- Textual content Line Peak: 0px
Hover Textual content Settings
Make some changes for the textual content settings on hover.
- Textual content Dimension: 19px
- Textual content Line Peak: 2em
Default Heading Textual content Settings
The heading textual content settings want to be changed as neatly.
- Heading 3 Font Weight: Extremely Daring
- Heading 3 Font Taste: Uppercase
- Heading 3 Textual content Colour: #ffffff
- Heading 3 Textual content Dimension: 0px
- Heading 3 Line Peak: 0em
Hover Heading Textual content Settings
Upload other values on hover.
- Heading 3 Textual content Dimension: 35px
- Heading 3 Line Peak: 1.1em
Spacing
Subsequent, move to the spacing settings and upload some values.
- Most sensible Margin: -100px
- Left Margin: 50px
- Proper Margin: 50px
- Most sensible Padding: 40px
- Backside Padding: 60px
Alternate Textual content Orientation
Return to the textual content settings and alter the textual content orientation.
- Textual content Orientation: Heart
Default Field Shadow
Then, upload a default field shadow to the textual content module. This field shadow shall be a part of the whole design.
- Field Shadow Horizontal Place: 1000px
- Field Shadow Vertical Place: -400px
- Field Shadow Blur Power: 0px
- Field Shadow Unfold Power: 250px
- Shadow Colour: rgba(175,175,175,0.13)
Hover Field Shadow
To create the particular hover overlap impact, upload a hover field shadow as neatly.
- Field Shadow Horizontal Place: -73px
- Field Shadow Vertical Place: -49px
- Field Shadow Blur Power: 0px
- Field Shadow Unfold Power: 10px
- Shadow Colour: rgba(255,182,12,0.53)
Transitions
To create a easy transition, exchange the transition length within the complicated tab.
- Transition Length: 1000ms
Upload Testimonial Textual content Module to Column 2
Upload Content material
In the second one column, the very first thing we’ll want is a name Textual content Module. Cross forward and upload a abstract of the testimonial.
Heading Textual content Settings
Then, exchange the heading textual content settings.
- Heading 3 Font: Goudy Bookletter 1911
- Heading 3 Textual content Alignment: Left
- Heading 3 Textual content Dimension: 3.5vw (Desktop), 40px (Pill), 30px (Telephone)
- Heading 3 Line Peak: 1.1em
Spacing
Proceed by way of including some customized spacing values.
- Most sensible Margin: 7vw (Desktop), 100px (Pill), 50px (Telephone)
Upload Description Textual content Module to Column 2
Upload Content material
Upload some other Textual content Module with all of the testimonial proper under the name Textual content Module.
Textual content Settings
After you’ve added the testimonial, move forward and alter the textual content settings.
- Textual content Line Peak: 2.2em
- Textual content Orientation: Left
Spacing
Upload some customized most sensible margin as neatly.
- Most sensible Margin: 4vw (Desktop), 50px (Pill & Telephone)
Upload New Row
Column Construction
Now that we’ve completed the primary row, let’s upload the second the usage of the next column construction:
Sizing
Open the row settings and alter the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
Upload some customized spacing values subsequent.
- Most sensible Margin: 100px
- Most sensible Padding: 0px
- Backside Padding: 0px
- Column 1 Left Padding: 11vw (Desktop), 3vw (Pill & Telephone)
- Column 1 Proper Padding: 2vw (Desktop), 3vw (Pill & Telephone)
Clone Textual content Modules of Earlier Row & Position in Column 1
Return to the former row and clone each modules in column 2. When you do, position the duplicates within the first column of the brand new row.
Alternate Textual content Orientation
Alternate the textual content orientation of each modules.
- Textual content Orientation: Proper
Upload Symbol Module to Column 2
Add Symbol
Subsequent, upload an Symbol Module to the second one column and add a brand new portrait symbol.
Symbol Alignment
Alternate the picture alignment of the module.
- Symbol Alignment: Proper
Sizing
Proceed by way of converting the sizing settings.
- Width: 78% (Desktop), 70% (Pill & Telephone)
- Module Alignment: Proper
Spacing
Upload some customized spacing values as neatly.
- Most sensible Margin: 50px (Pill & Telephone)
Upload Hover Overlap Textual content Module to Column 2
Upload Content material
The ultimate module we want to end this design is a Textual content Module under the Symbol Module. Upload the individual’s main points within the content material field.
Default Background
Then, upload a background symbol to the module.
- Background Colour: rgba(255,255,255,0)
Hover Background
Alternate the background colour on hover.
- Background Colour: #690cff
Default Textual content Settings
Alternate the textual content settings subsequent.
- Textual content Colour: #ffffff
- Textual content Dimension: 0px
- Textual content Line Peak: 0px
- Textual content Orientation: Heart
Hover Textual content Settings
Make some changes on hover.
- Textual content Dimension: 19px
- Textual content Line Peak: 2em
Default Heading Textual content Settings
Alternate the heading textual content settings as neatly.
- Heading 3 Font Weight: Extremely Daring
- Heading 3 Textual content Colour: #ffffff
- Heading 3 Textual content Dimension: 0px
- Heading 3 Line Peak: 0em
Hover Heading Textual content Settings
With some small tweaks on hover.
- Heading 3 Textual content Dimension: 35px
- Heading 3 Line Peak: 1.1em
Spacing
Proceed by way of going to the spacing settings and upload some customized values.
- Most sensible Margin: -80px
- Left Margin: 50px
- Proper Margin: 50px
- Most sensible Padding: 40px
- Backside Padding: 60px
Default Field Shadow
Upload a default field shadow to the Textual content Module.
- Field Shadow Horizontal Place: -1000px
- Field Shadow Vertical Place: -420px
- Field Shadow Blur Power: 0px
- Field Shadow Unfold Power: 250px
- Shadow Colour: rgba(175,175,175,0.13)
Hover Field Shadow
And alter the field shadow on hover.
- Field Shadow Horizontal Place: -73px
- Field Shadow Vertical Place: -49px
- Field Shadow Blur Power: 0px
- Field Shadow Unfold Power: 10px
- Shadow Colour: rgba(12,255,238,0.53)
Transitions
Final however no longer least, create a easy transition by way of converting the transition length.
- Transition Length: 1000ms
Preview
Now that we’ve long gone via all steps, let’s take a last have a look at the outcome!
Ultimate Ideas
We are hoping this submit impressed you to create surprising testimonial sections the usage of hover overlaps! They in point of fact permit you to upload some other size for your website online with no need to spend numerous time coding or figuring issues out. You probably have any questions or ideas, be sure to depart a remark within the remark phase under!
The submit How to Create Unique Hover Overlaps for Testimonials with Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design