How to Apply Shape Dividers on Elementor

intermediate 8 min read Updated 2026-03-24

Quick Answer

Add a section or container in Elementor, go to Style > Shape Divider, enable Top or Bottom, select a type like Waves or Triangle, then customize color, width, height, and optional Flip or Bring to Front. Shape dividers enhance page flow but may need CSS fixes for z-index overlaps post-updates; regenerate CSS after changes.

Get Deal → Partner

Try Elementor Full Elementor Review

Prerequisites

Active Elementor Pro plugin (shape dividers are Pro-only)
WordPress site with compatible theme like Hello Elementor
Basic familiarity with Elementor editor
Updated Elementor Pro 3.3+ and Elementor 3.0.5+

Step-by-Step Instructions

Add New Section or Container

In the Elementor editor on your page or post, click the + icon to add a new Section or Container. This creates the base element where you'll apply the shape divider.

Select the Section or Container

Click the edit handle (dotted outline or pencil icon) on the section or container to select it. The left panel will update to show editing options for that element.

Use the responsive mode icon to edit per device (Desktop, Tablet, Mobile) as shapes adapt automatically.

Navigate to Style Tab

In the left panel, click Section or Container at the bottom-left, then select the Style tab. This reveals background, border, and shape divider controls.

Expand Shape Divider Panel

Scroll down to the Shape Divider panel and click the arrow icon to expand it. You'll see options for Top and Bottom dividers.

Enable Shape Divider

Toggle the switch to Yes for Top or Bottom (or both). This activates the divider at the chosen position of your section or container.

Choose Bottom for dividing into the next section, Top for separating from above.

Select Divider Type

Click the Type dropdown and choose a style like Waves, Triangle, Curve, or Tilt (defaults include None initially). Elementor renders these as optimized SVGs.

Match shapes to your design; Tilt works well for subtle separations.

Set Divider Color

Click the color picker under Color and select a hex, RGB, or theme color (defaults to inherit from section background). This blends the divider seamlessly.

Use the next section's background color for fluid transitions.

Adjust Width and Height

Use the Width slider (default 100%, up to 200% for overhangs like 120%) and Height slider (default 100px, range 0-500px). Some custom shapes are height_only via code.

Set 100-150% width for curved effects; height controls prominence.

Optional: Flip and Bring to Front

Toggle Flip to reverse horizontally (default off). Enable Bring to Front if widgets overlap the divider (brings SVG foreground; default off).

Avoid Bring to Front if z-index issues occur; use CSS instead.

Preview and Save

Preview your page, regenerate CSS via Elementor > Tools > Regenerate CSS & Data, and update the post. Test in incognito mode and clear caches.

Shapes render asynchronously; responsive edits apply per device.

Common Issues & Troubleshooting

Z-Index Overlap (Divider Appears Above Content)

Add global CSS: .elementor-shape-bottom svg { z-index: -1; } or .elementor-shape-top svg { z-index: -1; }. For Tilt, add .elementor-shape.elementor-shape-bottom { overflow: inherit; }. Regenerate CSS and disable Bring to Front.

Divider Not Visible After Updates

Regenerate CSS files (Elementor > Tools > Regenerate CSS & Data), clear caches, test in incognito Chrome. Ensure Elementor Pro 3.3+ and check for plugin conflicts.

Layout Shifts or Glitches in Editor

Update to latest WordPress and Elementor. Disable conflicting plugins, use compatible theme like Hello Elementor, and avoid Flip in Chrome with certain shapes.

Overlaps with Widgets or Content

Toggle Bring to Front off and use z-index CSS. Ensure section content doesn't hide behind shapes by adjusting height/width.

Custom Shapes Not Appearing

For developers, use elementor/shapes/additional_shapes filter in functions.php with SVG paths and config like 'height_only' => true.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Elementor website before purchasing.

Visit Elementor View Elementor Pricing