As a web designer, creating a visually appealing website is a must. We often rely on subtle yet engaging design elements to achieve that goal. One such element is the animation of the waves, which can serve as an elegant divider, seamlessly separating sections of your webpage while adding a dynamic flow to the design.
Crafting this effect in Divi, a popular WordPress page builder, may seem challenging, but with the right techniques and your creativity, it’s very possible and achievable.
In this article, we’ll walk you through the step-by-step process of creating a wave animation divider in Divi, utilizing its built-in tools, custom settings, and a touch of CSS for added polish. This guide will help you transform static dividers into eye-catching animations, enhancing your website’s aesthetic and user experience.
How to Create Wave Animation as a Divider in Divi
Step 1. Create SVG Wave
First, we need to create the SVG wave. There are many ways and tools to create an SVG wave. In this example, we will use one of the online SVG wave generators that provide a user-friendly interface with options.
- Click this and start to create beautiful SVG waves.
- Customize wave shape
Next, you can adjust parameters to your preference, such as amplitude, wavelength, frequency, etc., to control the wave’s appearance.
- Control colors
You can choose the color of your SVG wave using an interactive color picker or by entering color codes (hex codes or RGB values).
To make the SVG waves blend well with the element below it, we recommend choosing the same color as the section’s background color under the SVG wave element.
- Export
Lastly, copy the generated SVG code for use in your project. Keep it because we will need it later.
Step 2: Add a New Section
We will locate the animated wave divider inside a separate section. By creating a separate section, you’ll isolate the wave divider from other content on your page. It makes it easier to style, position, and manage independently.
Go to the Divi Visual Builder by selecting your existing post type (page or post). Next, click the Add New Section button to add a new section to your page. Afterward, choose a row layout with one column.
Row Settings
Before adding any new module to your column, we will customize the row setting first. This step is crucial to ensure proper positioning and styling of the wave divider. Here are some key row settings to consider:
- Sizing
- Width: 100%
- Max Width: 100%
To make sure the value has 100% in every screen size, please apply these settings to tablets and phones as well.
- Spacing
- Padding: Top 0px, Bottom 0px
- Transform
- Rotate: 180deg
- Position
- Position: Absolute
- Location: In the center of the bottom
- Vertical Offset: -2px
- Z Index: 100
Step 3: Add the SVG Code into the Code Module
Input the SVG Code
Add the Code module inside the column, then paste the SVG code that you’ve got from the online SVG wave generator.
Next, set the width of the Code module to 100% to make it span the full width of its container, ensuring that the embedded SVG wave aligns properly and looks consistent across the module.
Duplicate the Code Module
Once you’ve added the SVG code, you need to duplicate the module. Special for the second copy/ module, must use position absolute with a 100% horizontal offset.
Step 4: Add the CSS Snippet
It’s time to add two CSS codes to make your SVG waves animated. The first CSS code will be added to your page settings and the second one will be added to your column settings.
- 1st CSS code
Navigate to the Page Settings -> Advanced tab -> Custom CSS. Afterward, copy the CSS snippet below and paste it into the available field.
Here is the CSS snippet you can use and edit to match your needs:
@keyframes wpp-waves {
0% {transform: translateX(0)}
25% {transform: translateX(-25%) scaleY(45%);}
50% {transform: translateX(-50%) scaleY(100%)}
75% {transform: translateX(-75%) scaleY(45%);}
100% {transform: translateX(-100%)}
}
- 2nd CSS code
Go to the column settings with your Code modules, then copy the CSS code below and paste it into the Main Element field on your column.
animation: wpp-waves 12s linear infinite; transform-origin: top;
That’s it. Feel free to edit the CSS snippet and redesign the SVG shape to achieve the best-looking wave animation for your section’s divider. Don’t forget to save and publish your page if you want to.
What did the CSS code do?
@keyframes wpp-waves {
0% {transform: translateX(0)}
25% {transform: translateX(-25%) scaleY(45%);}
50% {transform: translateX(-50%) scaleY(100%)}
75% {transform: translateX(-75%) scaleY(45%);}
100% {transform: translateX(-100%)}
}
Key Concepts:
@keyframes: This defines an animation sequence. Each percentage (e.g., 0%, 25%, etc.) represents a keyframe where specific styles are applied during the animation.transformproperty: Controls translations (movement).translateX: Moves the element horizontally by the specified amount.scaleY: Scales the element vertically.
Animation
- 0%: Starts in its original position with no scaling.
- 25%: Moves 25% left and shrinks to 45% of its height.
- 50%: Moves 50% left and returns to full height.
- 75%: Moves 75% left and shrinks to 45% height again.
- 100%: Moves 100% left and resets to full height.
animation: wpp-waves 12s linear infinite; transform-origin: top;
animation: wpp-waves 12s linear infinite;
wpp-waves: The name of the animation is applied.12s: The speed of the animation cycle is 12 seconds.linear: The animation progresses at a constant speed without easing.infinite: The animation loops endlessly.
transform-origin: top;
- The transformations happen relative to the top edge of the element.
The Bottom Line
Using Divi to create a wave animation as a separator is a great approach to give your website dynamic and eye-catching design components. With the help of Divi’s built-in tools, keyframe animations, and custom CSS, you can easily incorporate wave effects that improve the look and feel of your website and draw in visitors.
With a few simple steps, you can elevate your web design, making it more modern and interactive while maintaining Divi’s flexibility and ease of use. Feel free to try other values in the keyframe and custom CSS to get the best wave animation for your section’s divider.
