How to Make Custom Section Dividers in Divi
Want to make your Divi website look more modern and visually engaging? Custom section dividers in Divi are one of the easiest ways to create smooth transitions between sections without relying on images or complicated design tools.
Divi includes a built-in Section Dividers feature that lets you add decorative shapes to the top or bottom of a section. You can change the divider style, color, height, repetition, orientation, and placement directly from the Visual Builder. Divi currently provides 26 built-in divider shapes, including curved, angled, and diagonal designs.
If the built-in shapes don't give you the exact design you want, you can take things further with custom CSS, SVG shapes, pseudo-elements, gradients, or custom HTML.
In this guide, you'll learn how to make custom section dividers in Divi step by step.
What Is a Section Divider in Divi?
A section divider is a decorative shape placed between two sections of a webpage. Instead of having a straight horizontal boundary between sections, you can use waves, curves, diagonals, triangles, or other shapes to create a more distinctive transition.
For example, a section could transition like this:
Straight section → Wave divider → Next section
or:
Hero section → Curved divider → Services section
Divi's Section Divider feature is available for Regular, Fullwidth, and Specialty Sections. Dividers are applied to the Section itself rather than to individual rows or modules.
How to Make a Custom Section Divider in Divi
The easiest approach is to use Divi's built-in Section Divider settings.
Step 1: Open the Divi Visual Builder
Open the page you want to edit and activate the Divi Visual Builder.
Choose the section where you want to add the divider and click the gear icon to open its settings.
Step 2: Go to Design → Dividers
Inside the Section Settings, navigate to:
Design → Dividers
Divi provides separate controls for adding a divider to the top or bottom of a section.
Step 3: Choose a Divider Shape
Enable either the Top Divider or Bottom Divider.
You can then select one of Divi's available divider shapes. Divi provides 26 built-in options, so you can experiment with curves, angles, waves, diagonals, and other styles.
Step 4: Change the Divider Color
Choose a color that matches the section you're transitioning into.
A useful approach is to make the divider the same color as the next section's background. This creates the appearance that the divider is cutting into the section rather than sitting on top of it.
Divi can also automatically match the divider with the section and adjacent section colors, while still allowing you to select a custom color when needed.
Step 5: Adjust the Divider Height
The Divider Height setting controls how deep the shape extends into the section.
For a subtle design, use a smaller height.
For a dramatic hero section, increase the height to create a stronger visual transition.
Don't make the divider unnecessarily large on mobile devices because it can consume valuable vertical screen space.
Step 6: Experiment With Horizontal Repeat
Divi also includes a Horizontal Repeat option.
This allows the divider shape to repeat across the width of the section, creating different visual patterns from the same basic shape.
Step 7: Flip the Divider
If you like the shape but want it facing the opposite direction, use Divi's Flip controls.
You can change the divider's orientation without having to choose another shape.
Step 8: Choose the Divider Arrangement
Divi lets you control whether the divider appears above or underneath the section content.
This is particularly useful when creating overlapping or layered designs.
How to Create a More Advanced Custom Divider With CSS
Divi's built-in shapes are enough for most websites, but sometimes you need a divider that isn't available in the standard options.
For example, you might want:
- A custom wave
- A zigzag edge
- A unique geometric shape
- A branded SVG divider
- A slanted section transition
- A multi-layered divider
- A gradient divider
- A decorative blob shape
For these designs, custom CSS gives you much more control.
Divi 5 allows custom CSS to be added at several levels, including Theme Options, Page Settings, individual elements, Code modules, and child themes.
Method 1: Add Custom CSS to a Divi Section
Open the Section Settings and go to:
Advanced → Custom CSS → Free-Form CSS
In Divi 5, the Free-Form CSS field uses the selector keyword to target the selected element.
For example, you can use a pseudo-element to create a custom angled divider:
selector {
position: relative;
overflow: hidden;
}
selector::after {
content: "";
position: absolute;
left: -5%;
bottom: -50px;
width: 110%;
height: 100px;
background: #ffffff;
transform: rotate(-3deg);
}
Change the background color, height, position, and rotation to match your design.
Important: Test custom CSS at desktop, tablet, and mobile widths. Divi's own documentation recommends using targeted CSS and checking responsive behavior when customizing elements.
How to Create a Wave Divider With CSS
You can also create a simple curved transition using CSS.
For example:
selector {
position: relative;
overflow: hidden;
}
selector::after {
content: "";
position: absolute;
left: -10%;
bottom: -80px;
width: 120%;
height: 140px;
background: #ffffff;
border-radius: 50% 50% 0 0;
}
This creates a large curved shape at the bottom of the section.
You can adjust:
heightwidthbottomborder-radius
until the curve fits your layout.
How to Create a Diagonal Section Divider in Divi
Diagonal dividers are particularly effective for hero sections, landing pages, portfolios, and modern business websites.
A simple CSS approach is to use a pseudo-element and transform it:
selector {
position: relative;
overflow: hidden;
}
selector::after {
content: "";
position: absolute;
left: -5%;
bottom: -70px;
width: 110%;
height: 120px;
background: #ffffff;
transform: rotate(4deg);
}
The angle can be adjusted by changing:
transform: rotate(4deg);
For example, try 2deg, -3deg, 5deg, or another value that fits your layout.
Can You Use SVG for a Custom Divi Section Divider?
Yes. SVG is one of the best choices when you need a completely custom section divider.
SVG shapes are resolution-independent, which means they can scale cleanly across different screen sizes. Divi itself uses SVG for its built-in section divider shapes.
An SVG approach is useful when you have a custom design created in:
- Figma
- Adobe Illustrator
- Sketch
- Another vector design application
You can implement the SVG using Divi's Code Module or another suitable location, depending on how your page is structured.
For reusable designs, consider turning the divider into a reusable component or template rather than recreating it on every page.
Divi Section Divider vs. Divider Module
It's important to understand the difference between a Divi Section Divider and the Divi Divider Module.
Divi Section Divider
A Section Divider creates a shape transition between sections.
It is ideal for:
- Waves
- Curves
- Diagonal transitions
- Decorative section edges
- Hero section transitions
Divi Divider Module
The Divider Module is designed primarily for creating horizontal lines or visual separation inside your content layout. Divi 5 provides options for line color, style, position, sizing, spacing, and more.
So, if you're trying to create a wave between two sections, use a Section Divider rather than simply adding the Divider Module.
Best Divi Section Divider Ideas
Here are some practical ways to use custom dividers in your Divi layouts.
1. Hero to Content Divider
Add a curved or wave divider to the bottom of your hero section.
This creates a smoother transition into your main content.
2. Services Section
Use a subtle diagonal divider between your introduction and services section.
This can make a simple business website feel more dynamic.
3. Pricing Section
A curved divider can help visually separate pricing from the content above it.
4. Testimonials
Use a wave or angled transition to make the testimonials area stand out.
5. Footer Transition
A large curved or diagonal divider can create a polished transition into the footer.
6. Landing Pages
Use different divider shapes between major sections to create a continuous visual story as visitors scroll down the page.
How to Make Divi Section Dividers Responsive
A divider that looks perfect on desktop may look too large or awkward on a phone.
That's why responsive settings are important.
Divi's design controls allow you to adjust settings for different device sizes. For example, you can use:
Desktop: Large wave
Tablet: Medium wave
Phone: Small wave
When using custom CSS, consider using media queries or Divi's responsive controls.
For example:
@media (max-width: 767px) {
selector::after {
height: 70px;
bottom: -40px;
}
}
The exact values will depend on the design and section height.
Common Problems With Custom Divi Dividers
The divider is covering my content
This usually happens when a pseudo-element is positioned over the section content.
Try reducing the divider's height or adjusting its bottom value. You may also need to adjust the section's padding.
The divider disappears on mobile
Check your responsive settings and make sure the element isn't hidden on smaller devices.
If you're using custom CSS, inspect the element in your browser's developer tools to determine whether another CSS rule is overriding your styles.
The divider color doesn’t match
Make sure the divider color matches the background of the section you're transitioning into.
For example:
Blue Section → White Divider → White Section
The white divider will visually blend into the following section.
My custom CSS isn’t working
Check for:
- CSS syntax errors
- Incorrect selectors
- Specificity conflicts
- Caching
- Responsive CSS overrides
Divi specifically recommends using targeted selectors and checking for specificity and caching issues when troubleshooting custom CSS.
Best Practices for Divi Section Dividers
A custom divider should improve the design—not distract from the content.
Keep these guidelines in mind:
Keep the shape consistent with your brand
A playful wave may work beautifully for a creative agency but may feel out of place on a corporate website.
Don’t use too many different shapes
Using a different divider between every section can make the page feel chaotic.
Choose one or two styles and repeat them consistently.
Consider mobile first
Large desktop dividers can become excessive on smaller screens.
Always check the final result on phones and tablets.
Match the next section’s background
This is one of the easiest ways to make a divider look integrated into the page.
Don’t sacrifice performance
Avoid unnecessarily large raster images for simple shapes. CSS and SVG are often better solutions for scalable decorative elements.
Frequently Asked Questions About Divi Custom Section Dividers
How do I add a section divider in Divi?
Open the Divi Visual Builder, select your Section, go to Design → Dividers, and enable a Top or Bottom Divider. You can then select the shape, color, height, repeat, flip, and arrangement options.
How many section divider shapes does Divi have?
Divi provides 26 built-in Section Divider shapes that can be customized using its design controls.
Can I create a custom divider in Divi?
Yes. You can use Divi's built-in divider shapes or create more advanced designs using custom CSS, pseudo-elements, gradients, or SVG.
Can I add a divider to a Divi row?
The built-in Section Divider feature belongs to the Section element, so it isn't added directly to rows or modules. For custom designs, however, you can use CSS or other design techniques on individual elements.
Are Divi section dividers responsive?
Yes. Divi's section design controls can be customized for different device sizes, and custom CSS can also be adapted using responsive rules.
Is the Divi Divider Module the same as a Section Divider?
No. The Divider Module is primarily designed for horizontal visual separation within a layout, while Section Dividers create decorative transitions at the top or bottom of Divi Sections.
Do I need custom CSS to make section dividers in Divi?
No. For most designs, Divi's built-in Section Divider feature is enough. Custom CSS is useful when you need a shape or effect that isn't available among Divi's built-in options.
Final Thoughts
Creating custom section dividers in Divi doesn't have to be complicated.
For most websites, start with Divi's built-in Design → Dividers controls. You can choose from 26 shapes and customize their color, height, repetition, orientation, and placement without writing code.
If you need something more unique, use custom CSS or SVG to build a divider that matches your exact design.
The key is to use section dividers intentionally. A well-designed wave, curve, or diagonal transition can make your Divi website feel more polished while helping visitors visually understand where one section ends and another begins.
In short:
Built-in Divi divider → easiest option
Custom CSS → more design control
SVG → maximum flexibility for unique shapes
With the right combination, you can create custom Divi section dividers that look great on desktop, tablet, and mobile without relying on large image files.
