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.
Before diving into the tutorial, let's quickly examine what we are going to create, to get an idea.
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.
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.
Text module # 1
Continue by hiding the first module on tablet and phone.
Text module # 2
And hide the second module on the desktop.
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.
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
Hover over 2 text settings
Do the same for the 2 overhead text parameters.
- Title 2 Text Size: 0px
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
Hover Over the 3 Text Parameters Header
Change the size of the text by hovering.
- Title 3 Text Size: 40px
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
Flyover spacing settings
Also add a custom rollover margin.
- Upper margin: 50px
- Left margin: -53.5vw
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
Flyover border settings
Change the width of the hover border.
- Width of the bottom border: 5px
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)
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)
To create a smooth transition, increase the duration of the transition in transitional settings.
- Duration of the transition: 750ms
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.