---
title: "How to Add Custom Shape Divider in WordPress?"
url: https://nexterwp.com/docs/add-custom-shape-divider-in-wordpress-gutenberg/
date: 2024-11-28
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Two sections of different colours meet in a straight line, and a straight line is the most obvious thing on the page. A shaped edge makes the join part of..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Custom-Shape-Divider-in-WordPress_-1024x519.jpg
word_count: 521
---

# How to Add Custom Shape Divider in WordPress?

## Key Takeaways

- Container block draws a shape divider on the top edge, the bottom edge, or both, and each edge has its own shape, colour, height, and width.
- Nexter Blocks Pro is required to render the divider on a published page, even though the control appears in the free editor.
- Shape divider colour matches the adjacent section, and tall or wide dividers can overlap content or distort at narrow widths, so padding and phone checks matter.

Two sections of different colours meet in a straight line, and a straight line is the most obvious thing on the page. A shaped edge makes the join part of the design instead.

The Container block can draw a shape along its top edge, its bottom edge, or both.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/)

## Before You Start

- **Edition:** **Pro** — shape dividers — see the note below needs Nexter Blocks Pro.- **Block to enable:** Container, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block with a background colour that differs from the section next to it — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/).

> *The shape divider controls appear in the free editor, but measured on a published page with Nexter Blocks Pro deactivated, no divider is rendered. This has been reported to the development team; this page will be corrected if the behaviour changes.*

## Steps

- Select your **Container** and open its shape divider options.

![The shape divider options on the Container block](https://nexterwp.com/wp-content/uploads/2024/11/container-shape-divider-demo.webp)

- Choose a **shape** for the top edge, the bottom edge, or both.

- Set the divider **colour** to match the section it is meeting.

- Set its **height** and **width**.

- Flip or invert it if the curve runs the wrong way, then publish.

## How It Behaves

The divider is drawn as an SVG inside the container, sitting along the edge you chose.

- **Measured on a published page:** setting a top and a bottom shape rendered `tpgb-section-divider` containing an `<svg>` for each edge.- **The colour is the divider, not the gap.** Set it to the colour of the *adjacent* section, so the shape appears to be cut out of this one.- **Top and bottom are independent**, with their own shape, colour, height and width.- **Flip and invert change the orientation** without needing a different shape.- **Measured with Nexter Blocks Pro deactivated: nothing renders at all**, despite the controls being present in the free editor. Reported to the development team.

## Limitations

- **It needs Pro to render**, as measured above — the free editor offers the control but the published page shows no divider.- **The colour has to be maintained by hand.** Change the next section's background and the divider no longer matches.- **A tall divider eats the section.** A large height can overlap the content inside, so add padding to compensate.- **Wide shapes distort at narrow widths**, so check a phone before publishing.- **It is decoration.** It adds nothing for a screen reader, which is fine, but it should not be carrying meaning.

## Troubleshooting

### No divider appears

Measured, the divider does not render without Nexter Blocks Pro even though the control is available in the free editor. Check Pro is active. This is reported to the development team.

### The divider is the wrong colour

Set it to the colour of the section it meets, not the colour of this one. That is what makes the shape read as a cut-out.

### It overlaps my content

The divider height is greater than the container padding on that edge. Increase the padding.

### The curve runs the wrong way

Use the flip and invert options rather than looking for a mirrored shape.

## Related Docs

- [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Create a grid container in WordPress](https://nexterwp.com/docs/create-grid-container-in-wordpress/)- [Add an animated gradient colour background in a container](https://nexterwp.com/docs/add-an-animated-gradient-color-background-in-a-wordpress-container/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: Why isn’t the shape divider showing up on my published WordPress page?**
A: The divider needs Nexter Blocks Pro to render on the published page. The free editor can still show the controls, but without Pro active nothing appears in front end output. That mismatch is the main gotcha here, and it has already been reported to the development team. If you are testing, use a published page and confirm Pro is active before assuming the shape settings are wrong.

**Q: What do I need before adding a custom shape divider in WordPress?**
A: A Container block with a different background colour from the section next to it is the key setup. Nexter Blocks, part of Nexter Suite by POSIMYTH Nexter, draws the divider on that container edge, so the effect only reads properly when two differently coloured sections meet. The page also notes that Container must be switched on under Nexter &gt; Blocks in your WordPress dashboard.

**Q: How do I keep a shape divider from covering my content?**
A: Divider height and container padding need to stay in balance. A tall divider eats into the section, and if its height is greater than the padding on that edge it can overlap content inside the container. The practical fix is to increase padding so the decorative SVG has room to sit on the edge without colliding with text or other blocks.

**Q: Why is my custom shape divider the wrong colour?**
A: The divider colour should match the section it meets, not the section it sits in. That is what makes it read like a cut-out instead of a solid overlay. If you change the next section’s background later, you have to update the divider colour by hand or the illusion breaks immediately.

**Q: How do I flip a WordPress shape divider when the curve faces the wrong way?**
A: Flip and invert are the controls for orientation, so you do not need to hunt for a mirrored shape. The page says those options change direction without requiring a different shape. That matters because top and bottom dividers are independent, so each edge can have its own shape and orientation.

**Q: Is a custom shape divider better for desktop or mobile layouts?**
A: Wide shapes can distort at narrow widths, so mobile is where this effect needs extra checking. The page specifically warns to test on a phone before publishing because what looks clean on desktop can compress badly in a narrow container. Since top and bottom dividers are separate SVGs inside the container, their proportions matter more as screen width shrinks.