This is a title

  • 100% 100%

Did you see the divider animate in? I think that’s pretty cool. Especially since it animates on scroll. So it’s pretty neat.

It’s a neat little trick, and here’s how you do it.

Let’s start with a bar counter module. We’re going to use it as an animated underline to a heading. Go ahead and add a bar counter.

Divi Tutorial - A Cool Animated Divider

Make the background of the module itself transparent by pulling down the opacity to 0.
And add cool-divider to the custom class.

Divi Tutorial - A Cool Animated Divider
Divi Tutorial - A Cool Animated Divider

Now for the counter.

Set the percentage to 100.

and set the color you want in the counter background (next tab)

Divi Tutorial - A Cool Animated Divider
Divi Tutorial - A Cool Animated Divider

And of course, add this CSS to a place where you add custom CSS.
(Divi theme options, theme customizer, child theme CSS file, or page custom CSS)

.cool-divider.et_pb_counters > li {
	margin: 0px !important;
	padding: 0px !important;
	text-indent: 0px !important;
}
.cool-divider.et_pb_counters > li:before {
	content: none !important;
}
.cool-divider.et_pb_counters .et_pb_counter_container {
    width: 90px;
    margin: 0 auto;
    height: 2px;
}
.cool-divider.et_pb_counters span.et_pb_counter_amount_number {
	display: none;
}

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!


 

Photo by Simone Hutsch on Unsplash

 

Divi Tutorial - A Cool Animated Divider To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi

 

Edit: I had a comment on my YT video asking about why I don’t just use the divider module. I got a FB comment about this as well.

My answer to not using the divider module is that
– I like how this is subtle yet eye-catching.
– It’s contradictory, I know, but it’s something that when noticed is pretty cool, without being too overbearing.
– That’s the kind of animation that I like using.
– My style isn’t too heavy on things popping up slowly, bogging down the scroll and readability.

Hope this makes sense. 🙂