A shape divider breaks the straight line between two sections without a background image. Shape 1 is the static option in Advanced Separators: a narrow arch that sits centred on the edge you choose.
Unlike Wave, it does not animate — its outline is identical seconds later — so it is the quieter of the two shapes.
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 Shape Divider
- Drag the Advanced Separators widget into the section or column you want the divider on.
- Under Shape Divider, pick the third picture, Shape 1.
- Pick Section/Row or Column in Row/Column, then set Divider Position to the edge you want.
- Set Fill Color. It colours the whole arch, outline included.
- Choose an Icon Font and an icon in the Icon Library popover, then set Icon Color and Icon Size. Read the Limitations below before you rely on the icon.
- Fill in URL if the shape should be clickable, for example an anchor to the next section. Open the settings icon next to the field and clear Open in new window for an on-page anchor.
The Result
The arch sits centred on the section edge in the colour you set:
The same shape on a photo section. The icon only shows because that page loads Font Awesome itself — see Limitations:
How It Behaves
- The arch is 200px wide and 44px tall on a horizontal edge, and 44px wide by 200px tall on a vertical one. Those sizes are fixed — Shape Height does not apply to Shape 1.
- It is always centred on its edge, and cannot be moved along it.
- Fill Color sets both the fill and the outline of the shape.
- Flip Divider rotates the arch and moves it inside the section edge instead of outside it.
- The shape does not animate. Pick Wave if you want movement.
- A link is always rendered over the shape, even when you do not touch URL — see Limitations.
Limitations
- Icon Color has no effect when Icon Font is Font Awesome 5. That icon is drawn as an inline SVG and picks up Fill Color instead, so it is the same colour as the shape and cannot be seen. Tested with Fill Color orange and Icon Color dark: the icon came out orange.
- With the default Font Awesome (version 4) the icon shows in the Elementor editor but not on the published page, because no Font Awesome 4 stylesheet is loaded there. On a page where nothing else loads it, the icon is blank.
- URL is pre-filled with
#and both Open in new window and Add nofollow are on, so an untouched Shape 1 divider still renders a link across the whole shape that opens a blank tab when clicked. - There is one shape. You cannot upload your own SVG or change the curve.
- 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 icon does not show on the live page
Two separate causes. On the default Font Awesome setting the icon font is not loaded on the front end. On Font Awesome 5 the icon takes Fill Color rather than Icon Color, so it blends into the shape. Neither has a setting that fixes it.
Clicking the shape opens a blank tab
That is the default # link. Open the settings icon beside URL and turn Open in new window off, and put a real target in the field or leave the shape unlinked in your design.
The arch is cut off
It hangs outside the section, so a container with Overflow set to Hidden hides it. Set that overflow back to default, or turn Flip Divider on so the shape sits inside the section.
The shape is the wrong colour
Fill Color controls the arch. Check you are not looking at a Wave divider, whose colours come from the Wave Loop rows instead.
