Note: Download the complete layout from here.
We are going to recreate this awesome hover example:
We are going to use a two columns layout so lets first add a Normal Section and, inside that one, add a Row and set its layout to be two columns.
Adding and designing the Blurb Module
In the first column, add a Blurb Module, add your Title and Content.
Set the Blurb Background Color
In Content Tab > Background first, activate the Hover option by hovering over the Background text. This will let you enable the Hover options:
Set a Background Color of #890089
- or choose any other color that fits your design.
Switch to hover tab and set the opacity of 0.13. The Background color, in this case, will be rgba(137,0,137,0.13)
Set the Blurb Background Image
In Content Tab > Background set a background image, in this example, the image used is 980x600px
.
In the same section, set the Background Image Blend to Multiply.
Blurb Module's Text Design options
Switch to the Design Tab and set the Blurb Module text to be centered align:
In Design Tab > Title Text > H4 set the Title Font Weight to be Ultra Bold or Bold and the Title Text Color to be #ffffff
In Design Tab > Body Text > Body Text Color activate the Hover
option and, in the Default Tab set the color to be rgba(255,255,255,0)
, switch to Hover tab and set the color to #ffffff
Blurb Module Spacing Design
Custom Margin
In Design Tab > Spacing > Custom Margin first activate the Hover
option. In Default Tab set the top-margin
to be 0.
Switch to Hover Tab and set the top-margin
and bottom-margin
to be -20px
.
Custom Padding
In Design Tab > Spacing > Custom Padding first activate the Hover
option. In Default Tab set the following values:
Top: 32%
Bottom: 13%
Left: 5%
Right: 5%
Switch to Hover Tab and set the following values:
Top : 20%
Bottom: 25%
Left: 5%
Right: 5%
Blurb Module's Box Shadow
In Design Tab > Box Shadow choose the 3rd Shadow option:
The Box Shadow values will be:
Box Shadow Horizontal Position: 0px
Box Shadow Vertical Position: 17px
Box Shadow Blur Strength: 22px
Box Shadow Spread Strength: -6px
Activate the Hover
option for the Shadow Color and set the following values:
Default Value:
rgba(0,0,0,0)
Hover Value:
rgba(0,0,0,0.41)
That's it, now you can duplicate this Blurb Module and place it in the Second Column, change the Blurb Background color and Background Image as well as Blurb Text content.
The end result can be viewed here: https://divi.wordpress-corner.com/divi-hover-effects/
You can download the complete layout (as presented in the above demo) from here.
How to use the Layout
Download the layout.
Unzip the file.
Create a new page.
Activate Divi Builder.
Use the Portability option and import the
.json
file (from the zip file downloaded at step 1).