Welcome to our first Divi tutorial in 2024! We’re going to create an animated section divider using custom CSS. It’s the perfect way to add some original, animated flair to a website, and it’s easier to do than it looks!
We’ll use a Code module in the Divi Builder and an SVG generator for waves, and I’ll show you how to adjust the size, shape, and speed of the shapes and animation.
Follow along with the YouTube tutorial and copy the code snippets I used below.
And if you’d like to download a free layout with a hero section using an animated wave section divider, you can find it here. There are two versions available, both free to use!
Important!
This tutorial was streamed live inside the Divi Stylist Community, an exclusive online space for Divi Stylist Academy students. If you’d like to master professional web design and coding with live support, as well as take part in inspiring live events inside the community, check out Divi Stylist Academy.
Step 1
Create SVG Shape
You can use any vector-based graphic software to create a wavy shape, or do it online with this fun SVG Waves Generator.
Step 2
Add a New Row
Our animated divider will be located inside a separate Row. Make sure the width of the Row is set to 100% and that it’s positioned absolutely (at the top or bottom of the section). Adjust the parent section padding to accommodate the size of the divider.Step 3
Add SVG code inside a Code module
Paste the SVG code inside a Code module and duplicate the module. The second copy will need to use position absolute with a 100% vertical offset.
Here’s a sample code we used:
<svg viewBox="0 0 1664 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="rgba(34, 34, 34, 1)" d="M 0 0 C 241 0 241 127 482 127 L 482 127 L 482 0 L 0 0 Z" stroke-width="0"></path>
<path fill="rgba(34, 34, 34, 1)" d="M 481 127 C 640 127 640 49 799 49 L 799 49 L 799 0 L 481 0 Z" stroke-width="0"></path>
<path fill="rgba(34, 34, 34, 1)" d="M 798 49 C 1023 49 1023 172 1248 172 L 1248 172 L 1248 0 L 798 0 Z" stroke-width="0"></path>
<path fill="rgba(34, 34, 34, 1)" d="M 1247 172 C 1463.5 172 1463.5 0 1680 0 L 1680 0 L 1680 0 L 1247 0 Z" stroke-width="0"></path>
</svg>
Step 4
Add the CSS code
Here’s a bit of CSS to define the keyframes of our animation. Edit it to match your needs:
@keyframes dl-wave {
0% {transform: translateX(0)}
25% {transform: translateX(-25%) scaleY(30%);}
50% {transform: translateX(-50%) scaleY(100%)}
75% {transform: translateX(-75%) scaleY(30%);}
100% {transform: translateX(-100%)}
}The code above can be placed inside the Page Settings or Free-form CSS.
And here are CSS declarations that need to target the Column with our Code modules:
animation: dl-wave 15s linear infinite;
transform-origin: top;The code above would need to be added to the Advanced tab of the Column settings -> Custom CSS -> Main Element.
And that’s it!
I hope you liked this tutorial and found it easy to follow. What other interesting effects would you like to create with Divi and custom code? Leave me a comment below!
PS: Remember to check out Divi Stylist Academy for live access to content like this!
Hi Ania, thank you for this great tutorial! I tried – on desktop, it works perfectly. However, on tablet and mobile it doesn´t. Do you have an idea how to make it work on all devices? Thank you!
Hi Marcela,
It’s hard to say what could be the problem without seeing the issue live. As you can see on our demo page, this method should work on all screen sizes.