Section dividers continue to be a popular design element on Divi. There are many styles of dividers, including useful options that make it easy to add unique transitions and backgrounds to your page.
In this tutorial, we'll use section dividers a little differently. Divi allows you to adjust the height and layout of each divider. This allows us to position the separators above certain areas or contents of the section. By using the hover option for the height of the divider, we can add unique hover effects revealing partially hidden content. This works great for drawing attention to a call to action or a particular button you want the visiteurs click.
Let's start.
Sample result
What you need to get started
To get started, you need the following:
- Le Divi theme installed and active
- A new page created to build from scratch on the front-end (visual constructor)
- Some dummy images to use in the design. I'm going to use some images with transparent backgrounds from the Juice Shop Layout Pack .
After that, you are ready to start!
Implementing the section divider height hover effect design in Divi
Creating the section and the line
Let's start by creating a regular section with a row of two columns.
Before adding a module, open the section settings and update the following:
Left background gradient: #73ba57
Right background gradient: #2a4c23
Width: 80%
Maximum width: 1080px
Section Alignment: Center
But you can also choose the color scheme you like according to your image. my color scheme is: # fff200 - # e09900 in gradient.
Add section title
To add the section title, create a text module and update the body content with the following h2 header:
The Juice
Then update the drawing as follows:
Heading 2 Font: Lato
Heading 2 Text Size: 80px
Heading 2 Letter spacing: -5px
Margin: -50px at the top, -40px at the bottom
Z-Index: -1
The custom margin and the z index will allow the text to sit behind the image that we will add in the next step.
Add image
Under the text module with the title in column 1, add an image module. Then upload an image with a transparent background. I am using an image from the Juice Shop Layout Pack that is 240 pixels by 300 pixels.
Adjust the alignment of the image to the center.
Adding a call to action in column 2
In the 2 column, add a call to the action module.
Add a button link URL to make sure the button is displayed.
CTA background and title style
Then update the following design parameters:
Background color: #ffffff
Text color:
title Font: Lato
Title Weight Policy: Heavy
Title Font Style: TT
title Text Size: 18px
Stylize the CTA button
Update the button design as follows:
Button text color: #ffffff
Button Background Color: # e09900
Button Border Width: 0 px
Styling the CTA border
Then add a border to frame the module as follows:
Width of the border: 10px
Color of border: rgba (224,145,0,0.25)
Added divider height hover effect to reveal call to action
Now, it's time to add the section division height hover effect to reveal the call to action. To do this, we first need to create our section dividers.
Adding the upper separator
Open the section parameters and the upper separator with the following parameters.
Top divider style: see screenshot Top divider color: # 73ba57 Top divider height: 70% (default), 0% (hovered)
Flip top divider: horizontal
Note that the height of the separator begins with a default height of 70%, and then moves to a height of 0% on rollover.
Addition of the lower divider
Then add a lower separator similar to the section with the following parameters.
Top divider style: see screenshot Top divider color: # 73ba57 Top divider height: 70% (default), 0% (hovered)
Flip top divider: horizontal
Divider Disposition: At the Top of the Content Section
This background separator also starts with a height of 70% which changes to 0% on hover. However, because the separator layout option is set at the top of the content, the section separator hides the lower part of the call to action in column 1. Then, on hover, the rest of the l call to action is revealed.
Check out the result so far.
Added a box shadow hover effect for a unique transition and design
For a unique hovering transition and design, we can add a box shadow hover effect that will take place simultaneously with the divider height hover effect. To do this, add the shadow of the following box to the section.
Box Shadow: see screenshot
Box Shadow Horizontal Position: 0px
Box Shadow Vertical Position: 0px
Box Shadow Spread Force: 0px (default), 150px (hover)
Box Shadow Color: #73ba57
Slow down the duration of the transition
For a last step, let's slow down the duration of the transition.
Duration of the transition: 700ms
Final result
Here is the final result on the desktop.
Based on what we have done above, you will be able to customize the display on mobile and tablet.
Latest Thoughts
Hope this tutorial gave you some inspiration to create unique section divider height hover effects to reveal content. In fact, adjusting the height of the hovering divider can be a remarkable design element. And the design samples should help you start your own exploration and your own designs.
Hope to hear from you in the comments.
Cheers !
