How to Add Custom Shape Dividers in WP
Last updated: July 2026
Quick Answer
In Elementor, edit any section, go to Style > Shape Divider, and pick from waves, tilts, curves, or triangles for the top and bottom edges. If you’re not using a page builder, you can achieve the same wave divider WordPress effect by pasting an inline SVG into a Custom HTML block and layering it with CSS position: absolute.
Why Use Shape Dividers
Shape dividers break up flat, rectangular sections with a wave, tilt, curve, or custom SVG shape at the seam between two sections. They’re a small design touch that makes a homepage feel intentional rather than templated. At Canada Create, we add section divider design elements like this on almost every custom homepage build because they cost nothing in load time when done correctly, but noticeably lift the perceived polish of a site. A well-placed divider can also support the kind of conversion-focused layout we describe in our guide to optimizing a landing page for conversions. According to Google’s web.dev SVG optimization guide, well-structured SVG markup keeps these decorative elements fast-loading.
Method 1: Elementor’s Built-In Shape Divider
This is the fastest way to add custom shape dividers in wordpress if you’re already using Elementor or a similar page builder like Divi or Beaver Builder. If you’re still deciding which page builder fits your project, our breakdown of custom web design versus template builds covers the tradeoffs.
Step 1: Select the Section
Open the page in Elementor and click the section handle (the six-dot icon) for the section you want to style.
Step 2: Open the Style Tab
In the left panel, click the Style tab, then scroll to Shape Divider. You’ll see a Top and Bottom option, each independent.
Step 3: Choose a Shape and Adjust Settings
Pick from waves, curves, tilts, zigzags, clouds, or triangles. Elementor gives you three sliders worth understanding:
- Width: stretches the shape horizontally, useful for creating a busier wave pattern
- Height: controls how tall the shape divider extends into the section
- Flip / Invert: mirrors or flips the shape so it reads correctly whether it’s a top or bottom divider
Set a color for the shape that matches the section below it (or above it, for a top divider) so the transition looks seamless rather than like an obvious overlay.
Step 4: Check Mobile Responsiveness
Shape dividers can look oversized on small screens. Switch to Elementor’s mobile preview and reduce the Height value for the mobile breakpoint if the shape dominates too much vertical space.
Method 2: Custom SVG Shape Divider via CSS
If you’re not on Elementor, or you want a fully custom shape no page builder offers, an inline SVG gives complete control.
Step 1: Get or Create Your SVG Shape
Many free SVG wave and curve generators let you export a path as raw SVG code. Choose a shape that matches your brand rather than a generic default. The MDN SVG tutorial is a solid reference if you want to hand-edit the path data yourself.
Step 2: Add the SVG to a Custom HTML Block
In the WordPress block editor, add a Custom HTML block at the bottom of the section and paste the SVG code, wrapped in a container div with a class like section-divider.
Step 3: Position It With CSS
In Appearance > Customize > Additional CSS (or your theme’s custom CSS panel), add:
.section-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; }
This pins the SVG to the bottom edge of its parent section. You’ll need position: relative on the parent section for the absolute positioning to anchor correctly.
Step 4: Match Colors and Test Across Breakpoints
Set the SVG’s fill color to match the adjoining section, then preview on mobile, tablet, and desktop. SVG shapes scale cleanly, but extreme aspect ratio changes on small screens can distort a wave into something that looks broken. Canada Create readers building their own sites should budget extra QA time here, since this is the step most people skip.
Troubleshooting
| Issue | Likely Cause | Fix |
|---|---|---|
| Shape divider not visible | Parent section missing position: relative | Add position: relative to the section container |
| Shape looks pixelated | Using a raster image instead of SVG | Switch to an SVG shape, which scales without quality loss |
| Divider overlaps text | Height value set too high | Reduce the Height slider in Elementor or adjust SVG viewBox |
| Divider looks fine on desktop but broken on mobile | No responsive breakpoint override | Set a smaller Height for mobile in Elementor’s responsive controls |
Frequently Asked Questions
Do shape dividers slow down my WordPress site?
Not meaningfully. SVG shape dividers are lightweight vector code, typically a few kilobytes, so they have negligible impact on page speed compared to large images. As we cover at Canada Create, page speed issues almost always trace back to unoptimized photos, not small decorative SVGs.
Can I use shape dividers without Elementor?
Yes. Any theme or page builder that lets you add Custom HTML or Custom CSS can support an SVG-based wave divider WordPress solution, including the core block editor. Canada Create readers on the block editor can follow Method 2 above without installing anything extra.
What’s the best shape divider style for a modern website?
Subtle waves and gentle curves tend to age better than sharp zigzags or tilts, which can look dated quickly. Canada Create readers building professional service sites usually do best with a soft wave. If you want a second opinion on layout choices, our downtown Toronto web design team reviews homepage sections like this for local clients regularly.
