We’re going to show you how to creatively use hover actions Divi options to showcase CTAs on your pages. We use the Divi laundry service pack and will cover three different examples of highlighting your call to action.
Hover actions Divi: Add a new page using the Laundry or Laundry service layout
Start by adding a new page to your website and upload the laundry service homepage. The three examples we’ll create will be based on this layout. Once you have the approach, you can apply these examples to any layout you are working on.
Clone text module
Let’s start with the first example! We transform an existing text mod into a hover inducement. This approach will only appear on the desktop. This is why we clone the initial module to allow it to appear on smaller screens without hover effects.
Visibility
Text module # 1
Continue by hiding the first module on tablets and phones.
Text module n ° 2
And hide the second module on the desk.
Add hover effect to desktop text module
Add content title 3
We only edit the first text module, which will be the one that appears on the desktop. Open the course and add topic 3 content to the content area.
Hover over the text settings
Then go to the text settings and “hide” the paragraph text of your module by adding 0px to the hover text size.
- Text size: 0px
Hover over text settings 2
Do the same for the text settings for Header 2 on hover.
- Heading 2 Text size: 0px
Default Text Title 3
Then go to the text settings in Item 3 and make changes.
- Section 3 Police: Josefin Sans
- Title 3 Fonts: Semi Bold
- Heading 3 Text size: 0px
Hover over heading 3
Text Settings Change the size of the hover text.
- Heading 3 Text size: 40px
Default spacing settings
Next, go to the spacing settings and make sure the following custom padding values apply:
- Top padding: 80px
- Bottom padding: 50px
- Left padding: 40px
- Right Padding: 40px
Rollover spacing settings
Also, add a custom hover margin.
- Top margin: 50px
- Left margin: -53.5vw
Default border settings
We also add a bottom border with no border.
- Bottom border-width: 0px
- Bottom border-color: # ff947f
- Bottom border-style: dotted
Rollover border settings
Change the width of the hovering border.
- Bottom border-width: 5px
Read more: How to reveal images using horizontal rollover grids and hidden overflow on Divi
Default box shadow settings
Then add a box shadow.
- Box Shadow Vertical Position: 50px
- Box Shadow Blur Force: 54px
- Box shadow propagation force: -32px
- Shadow Color: rgba (255,255,255,0)
Rollover box shadow settings
And change the shadow color of the hovering box.
- Shadow color: rgba (0,0,0,0,2)
Transitions
To create a smooth transition, increase the duration of the transition in the transition settings.
- Duration of the transition: 750ms
Abstract
Finally, in this tutorial, it was about us creating an animation that highlights a section on our Divi page. The possibilities with Divi are almost limitless, by using the different options (combinations of several different options) you will be able to create interfaces with dynamic and attractive animation.
For website maintenance service contact us.