A horizontal shape divider is the shaped edge that runs across the full width of a section, at its top or its bottom. It is what most people mean by a section separator.
In the Advanced Separators widget from The Plus Addons for Elementor Pro this is the Section/Row setting of Row/Column.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Separators widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Advanced Separators is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it renders no separator.
- Widget to enable: Advanced Separators, switched on under The Plus Addons > Widgets.
- Deprecated: the panel shows “The Advanced Separators widget has been deprecated since The Plus Addons for Elementor – Pro 6.5.0. Note that Advanced Separators will be completely removed once The Plus Addons for Elementor – Pro 6.6.0 is released.” No replacement widget is named. Keep that in mind before building new pages around it.
- Where it goes: the separator attaches itself to the container the widget sits in, so drop the widget inside the section or column you want the separator on. Its own place in the layout does not matter.
How to Add a Horizontal Shape Divider
- Drag the Advanced Separators widget into the section you want the divider on.
- Under Shape Divider, pick Wave or Shape 1.
- Leave Row/Column on Section/Row. That is the horizontal mode.
- Set Divider Position. The two icons are Bottom, which is the default, and Top.
- Turn Flip Divider on if you want the shape mirrored and pulled inside the section edge rather than hanging outside it.
The Result
Top puts the shape across the section’s upper edge:
The same idea with a single blue wave:
How It Behaves
- A Wave divider spans the full width of the container the widget sits in, not the width of the widget.
- With Bottom it is added as the container’s last element and hangs below it; with Top it is added first and hangs above it. Measured on a section running from 260px to 680px down the page: Bottom drew at 680, Top at 60.
- Flip Divider mirrors the shape and moves it inside the section: the same Bottom divider moved from 680 to 480, that is into the section’s last 200 pixels.
- You can use two Advanced Separators widgets in the same container, one on Top and one on Bottom.
- The horizontal divider stays visible on phones. Tested at a 390px viewport, it was still drawn.
- Shape Height is available here for Wave, so you can make the strip shallower or deeper.
Limitations
- Only two shapes are available, Wave and Shape 1. There is no way to upload your own.
- Shape 1 is a fixed 200 by 44 pixels and always centred; it cannot be stretched across the section or moved sideways.
- The divider is drawn outside the section edge, so a container with Overflow set to Hidden hides it completely. Tested: the wave disappeared entirely.
- The widget is deprecated since The Plus Addons for Elementor Pro 6.5.0 and will be removed once 6.6.0 is released.
- It is Pro only. With the Pro plugin off the divider is not rendered at all.
Troubleshooting
The divider is on the wrong section
It attaches to the container the widget is nested in, not to where the widget appears in the layout. Move the widget into the section you want.
The divider disappeared
Check Overflow on that section and on its parents. Set to Hidden, it clips the whole divider away. Either set it back to default or turn Flip Divider on so the shape sits inside the section.
The divider overlaps the next section
That is how Bottom works — it hangs over what follows. Lower Shape Height, add top padding to the next section, or turn Flip Divider on.
The divider is narrower than the section
With Shape 1 that is expected: it is a fixed 200px arch centred on the edge. Use Wave for a full-width shape.
