Do you want to use shadow and hover effects in Divi to create contents interactive and stand out your Website ?
Make sure your Website standing out from similar websites can be difficult. But once you get there, it's almost always worth the effort and thought that went into it.
We'll show you how to create contents interactive when creating websites with Divi.
Let's go!
Preview
Before we dive into this tutorial, let's take a quick look at the result you can expect.
Desktop computer
Mobile
Let's start the realization with Divi!
See also: Divi: How to create a spinning wheel menu on hoverl
Add a new section
Background color
Create a new page or open an existing one and add a regular section to it. Open section settings and change the background color.
- Background: #03006d
Spacing
Then go to section spacing settings and change as follows:
- Padding (Top and Bottom): 50px
Add a new line
Structure of the column
Continue by adding a new row to the section using the following column structure.
sizing
Then go to the sizing settings and let the line fill the full width of the screen.
- Use Custom Gutter Width: YES
- Gutter Width: 1
- Width: 100%
Spacing
Let's also change the following spacing settings:
- Padding (Right): 9vw (Desktop), 5vw (Tablet and Phone)
- Padding (Right): 5vw (Tablet and Phone)
Add a Text module to column 1
Add content
Once you are done editing row settings, add the first Text module to column 1.
Add the first character as paragraph text. Then, the contents that you want to appear as list text.
Text Settings (Desktop)
Then go to the tab Designand change the default paragraph text settings. Make sure to use the same color for the section text and background.
- Font Weight: Ultra Bold
- Text Color: #03006d
- Text Size: 27vw (desktop), 0vw (tablet and phone)
- Line Height: 1,1 em
- Text Shadow: See capture
- Shadow Blur Strength: 0,01em
- Shadow Color: #ffffff
- Text Alignment: Left
Hover text settings
To create the nice hover effect, we will need to change these hover paragraph text settings.
- Text Color(Hover): #ffffff
- Shadow Color(Hover): rgba(255,255,255,0)
List Settings (Desktop)
Continue by going to the listing settings.
- Font Weight: Light
- List Text Color: #ffffff
- List Text Size: 0px (Desktop), 18px (Tablet and Phone)
- Style Position: Circle
- Unordered List Style Position: Outside
- Unordered List Item Indent: 0px
List text settings on hover (Hover)
We want the list text to appear on hover. This is why we will change the size of the text on hover.
- Unordered List Text Size (Hover): 18px
Spacing
Continue by going to the module spacing settings and make some changes there as well.
- Margin (Bottom): 50px (Tablet and Phone)
- Margin (Right): -4vw (Desktop), 0vw (Tablet and Phone)
Clone text module 4 times and place duplicates in remaining columns
Now that we are done modifying the first module in column 1, clone the module four times. Then place each of the duplicates in the remaining columns. We will modify each of the duplicates to match what we want.
Change the Text module in column 2
Edit content
Open the duplicate in column 2 and edit the content.
Change spacing
Next, go to spacing settings and change custom margin values.
- Margin (Bottom): 50px (Tablet and Phone)
- Margin (Left and Right): -2vw (Desktop), 0vw (Tablet and Phone)
- Right margin: -2vw (desktop), 0vw (tablet and phone)
Change the Text module in column 3
Edit content
Also change the contents of the duplicate in column 3.
Change spacing
With spacing settings in the design tab.
- Margin (Left): 2,5 vw
- Margin (Right): 1,5 vw
Modify the Text module in column 4
Edit content
Continue by opening the Text module settings in column 4 and edit the content there as well.
Change spacing
Next, go to the Design tab and change the custom margin values in the Spacing settings.
- Margin (Left): -6vw
- Margin (Right): 2vw
Modify the Text module in column 5
Contents
Make way for the last duplicate. Edit the content in the content area.
Change spacing
With custom spacing settings.
- Margin (Left): -7vw
- Margin (Right): 3vw
Preview
Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.
Read also: Divi : How to customize the cart and search icons of the “Fullwidth Menu” module
Office
Mobile
Download DIVI Now!!!
Conclusion
We know how important it is to ensure that your Website stands out from other websites. With Divi's built-in options, you can be as creative as you want.
This article is an example of how you can create interactive hover content.
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
