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.
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.
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.
- 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-dividercontaining 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.
