Skip to Main Content

Divi Tutorial: How to Use Rollover Actions - Part One

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Each week, Elegant Theme offers new free Divi layout packs that you can use for your next project. For one of the presentation packs, they also share a use case that will help you get your website to the next level. This week, as part of the ongoing Divi design initiative, we'll show you how to creatively use Divi's flyover options to highlight CTAs in your pages. We use the Divi laundry service pack and we will cover three different examples of highlighting your call to action.

Overview

Before diving into the tutorial, let's quickly examine what we are going to create, to get an idea.

realization animation divi.gif

Add a new page using the Laundry or Laundry service layout

Start by adding a new page to your website and download the laundry homepage. The three examples we will create will be based on this provision. Once you have the approach, you can apply these examples to any layout you are working on.

laundry demo.jpg

Clone the text module

Let's start with the first example! We transform an existing text module into a hover incitation. This approach will only appear on the desktop. That's why we clone the initial module to allow it to appear on smaller screens without hovering effects.

clone the text.jpg module

Visibility

Text module # 1

Continue by hiding the first module on tablet and phone.

visibility element divi.jpg

Text module # 2

And hide the second module on the desktop.

visibility desktop divi.jpg

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Add a rollover effect to the desktop text module

Add a content title 3

We only edit the first text module, which will be the one that appears on the desktop. Open the module and add content from the 3 topic to the content area.

modification of the first module texte.jpg

Hover over text settings

Then, go into the text settings and "hide" the paragraph text of your module by adding 0px to the text size on rollover.

  • Text size: 0px

text parameters module divi.jpg

Hover over 2 text settings

Do the same for the 2 overhead text parameters.

  • Title 2 Text Size: 0px

header configuration 2 divi.jpg

3 default text title

Then, access the text parameters of the 3 topic and make changes.

  • Heading 3 Font: Josefin Sans
  • Title 3 Fonts: Semi Bold
  • Title 3 Text Size: 0px

configuring header 3 fonts.jpg

Hover Over the 3 Text Parameters Header

Change the size of the text by hovering.

  • Title 3 Text Size: 40px

header configuration 3 divi.jpg

Default spacing settings

Then, access the spacing settings and make sure that the following custom fill values ​​apply:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

  • Top padding: 80px
  • Bottom padding: 50px
  • Left padding: 40px
  • Upholstery Right: 40px

padding options.jpg

Flyover spacing settings

Also add a custom rollover margin.

  • Upper margin: 50px
  • Left margin: -53.5vw

hovering overflight configuration.jpg

Default border settings

We also add a bottom border without a border.

  • Width of the bottom border: 0px
  • Bottom border color: # ff947f
  • Lower border style: dotted

border configuration divi.jpg

Flyover border settings

Change the width of the hover border.

  • Width of the bottom border: 5px

focus on ctas

Default box shadow settings

Then add a box shade.

  • Box Shadow Vertical Position: 50px
  • Box Shadow Blur Force: 54px
  • Spread strength of box shadow: -32px
  • Shade color: rgba (255,255,255,0)

option dombres divi.jpg

Drop box shadow settings

And change the color of the box's shadow hovering.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]

  • Shade color: rgba (0,0,0,0,2)

border configuration on flyover divi.jpg

Transitions

To create a smooth transition, increase the duration of the transition in transitional settings.

  • Duration of the transition: 750ms

transition divi builder block text.jpg

Summary

Finally, in this tutorial we were talking about creating an animation that highlights a section on our Divi page. The possibilities with Divi are almost limitless, using the different options (combinations of several different options), you will be able to create interfaces with a dynamic and attractive animation. Is not complete, we will discuss the second part of this tutorial later. Until then, if you have any questions, feel free to ask them in the comments section.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
1 shares
Share1
tweet
Save
WhatsApp