Are you looking to add custom shape dividers in WordPress Gutenberg? These unique shapes, placed between sections or blocks of content, not only add visual interest but also help break up a webpage’s monotony.
With the Container block from the Nexter Blocks, you can easily add custom shape dividers between sections in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
What It Does
Shape Divider adds a decorative SVG shape (wave, curve, triangle, and similar presets) to the top and/or bottom edge of a Container block, in place of a plain straight line between sections.
Why It Matters
Stacked sections with hard, straight edges can make a page feel like a list of boxes. A shape divider softens that transition without needing a designer to export a custom SVG or background image, and it stays editable from the block editor if you change the section’s background color later.
What You Get
Independent Top and Bottom divider tabs, a library of preset shapes for each, per-device width and height controls, a color picker for the shape, and Flip/Invert/Bring to Front toggles — all inside the Container block’s Style tab.
Capabilities
- Top Divider / Bottom Divider – add a shape independently to either edge of the container, each with its own settings.
- Color – set the shape’s fill color, independent of the container’s own background.
- Width – control the shape’s width per device.
- Height – control the shape’s height per device.
- Flip – mirror the shape horizontally.
- Invert – invert the shape’s design (peaks become troughs).
- Bring to Front – raise the shape above overlapping content when it would otherwise render behind it.
How It Works
The Shape Divider renders as an absolutely positioned SVG layered on the Top or Bottom edge of the container. Because it is layered rather than baked into a background image, its color, width, and height can be changed independently for each device without re-exporting an asset, and Bring to Front simply raises its stacking order above sibling content.
How to Use It
Add the Container block with the appropriate layout to the page and follow the steps:
1. Go to Style > Shape Divider.
2. Select a shape from the Top Divider section under the Top tab. This adds the shape divider to the top of the container.
3. From the Color section, set the shape’s background color.
4. Adjust the shape’s Width and Height per device.
5. Enable Flip to mirror the shape, or Invert to invert its design.
6. If the shape divider renders behind any content, enable Bring to Front to raise it above.
7. To add a divider at the bottom of the container, repeat the same steps under the Bottom tab, which offers the same options as the Top tab.
Use Cases
- Softening the transition between a hero section and the content below it with a wave or curve.
- Breaking up long, stacked landing-page sections so they read as distinct visual blocks rather than one flat scroll.
- Matching a section’s shape divider color to the following section’s background to create a layered, angled effect.
Limitations
- Only the preset shape library is available from the Style tab; there is no field to upload a fully custom SVG shape.
- The Flip toggle mirrors the shape but does not rotate it, so shapes that are not left-right symmetric may still need the Invert option combined with Flip to get a specific orientation.
- A shape divider set to Bring to Front will render above any content placed directly inside that same container, so it needs to be re-checked if you add new content near the container’s top or bottom edge afterward.
Troubleshooting
- The Flip toggle does not change the shape’s orientation: this matches a confirmed Nexter WP bug (ticket #18269, Shape Divider Flip setting not working) reported and under investigation as of this writing. If Flip has no visible effect, try the Invert toggle instead, or check for a Nexter Blocks update that resolves it.
- The shape divider is hidden behind the section’s content: enable Bring to Front on that divider so its stacking order is raised above sibling content.
- The shape divider looks stretched or too tall on mobile: set the Width and Height fields for the Tablet and Mobile device tabs separately — these values do not automatically scale down from the Desktop setting.
