hover actions divi

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

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.

Leave a comment

echo "";