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

Animation content revealed diviWhat you need to get started

To get started, you need the following:

  1. Le Divi theme installed and active
  2. A new page created to build from scratch on the front-end (visual constructor)
  3. 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.

Choose a divi layoutBefore 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 a degraded divi background

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.

Divi fruit juiceAdjust the alignment of the image to the center.

Divi center alignment

Adding a call to action in column 2

In the 2 column, add a call to the action module.

Call for action on column 2

Add a button link URL to make sure the button is displayed.

Add a divi action call link

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

Customize divi call to action

Stylize the CTA button

Update the button design as follows:

Button text color: #ffffff
Button Background Color: # e09900
Button Border Width: 0 px

Customize iamge divi background

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)

Custom border divi

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.

Customize divi borders

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

Divi border animation

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

Configure divi transitionsFinal result

Here is the final result on the desktop.

Divi final result

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 !

%d bloggers like this page: