--- title: "How to Add Separators in Elementor?" url: https://theplusaddons.com/docs/add-separators-in-elementor/ date: 2024-05-21 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "A separator is the shaped edge between two sections — a wave, a curve or a notch instead of a straight line. It is drawn on the section itself, so..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Separators-in-Elementor_-1024x536.jpg word_count: 958 --- # How to Add Separators in Elementor? ## - The Plus Addons for Elementor Pro includes Advanced Separators, and the widget is deprecated since version 6.5.0 and will be completely removed in 6.6.0. - Advanced Separators adds Wave or Shape 1 to the top, bottom, left, or right edge of a container, and it starts on None until a shape is selected. - The widget attaches to the container it is nested in, so it must be dropped inside the section or column that needs the separator. - Wave animates continuously, while Shape 1 is static and uses settings like Fill Color #8072fc, Icon Font, Icon Color, Icon Size 30px, and URL. A separator is the shaped edge between two sections — a wave, a curve or a notch instead of a straight line. It is drawn on the section itself, so you do not need a background image or custom CSS. The **Advanced Separators** widget from The Plus Addons for Elementor Pro adds one of two shapes to the top, bottom, left or right edge of a container. ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-separators/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## 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. ## The Deprecation Notice The widget still works, but the panel warns you about it at the top of **Content**: ![Deprecation notice at the top of the Advanced Separators Content panel in Elementor](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-deprecated.webp) ## How to Add a Separator - Go to **The Plus Addons > Widgets** and switch **Advanced Separators** on. ![The Plus Addons Widgets screen with the Advanced Separators toggle switched on](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-separators.png) - Edit your page in Elementor and drag the **Advanced Separators** widget into the section or column you want the separator on.- In **Content**, pick a picture under **Shape Divider**. The three choices are **None**, **Wave** (an animated wave) and **Shape 1** (a static arch). It starts on **None**, which draws nothing. ![Shape Divider set to Wave in the Advanced Separators panel, with the wave drawn under the section in the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-widget.webp) - Choose **Section/Row** or **Column** in the **Row/Column** dropdown. **Section/Row** puts the separator across the top or bottom edge; **Column** stands it up along the left or right edge. ![Row/Column dropdown set to Section/Row in the Advanced Separators panel](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-rowcolumn.webp) - Set **Divider Position**. With **Section/Row** the two icons are **Bottom** and **Top**; with **Column** they are **Right** and **Left**. Turn **Flip Divider** on to mirror the shape and pull it inside the section edge. ![Divider Position set to Top, with the wave now drawn above the section in the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-position.webp) ## Video Tutorial https://www.youtube.com/watch?v=REW41xU0aRg ## Settings | Setting | What it does | Default | | ------- | ------------ | ------- | | Shape Divider | Picks the shape: None, Wave or Shape 1. | None | | Row/Column | Whether the separator goes on a horizontal edge (Section/Row) or a vertical one (Column). | Section/Row | | Divider Position | Which edge. Bottom or Top for Section/Row, Right or Left for Column. | Bottom / Right | | Flip Divider | Mirrors the shape and moves it inside the section edge instead of outside it. | Off | | Shape Height | How tall the wave strip is, in pixels. Only for Wave with Section/Row. | 200px | | Wave Loop | The stack of wave layers. Each row has its own colour, Height, Bones, Amplitude and Speed. | 2 rows | | Fill Color | Colour of the Shape 1 arch. | #8072fc | | Icon Font | Which icon library the Shape 1 icon comes from: Font Awesome, Font Awesome 5 or Icons Mind. | Font Awesome | | Icon Color | Colour of the Shape 1 icon. | Empty (white) | | Icon Size | Size of the Shape 1 icon, in pixels. | 30px | | URL | Link wrapped over the whole Shape 1 shape. | #, opens in a new tab | ## How It Behaves - The separator is not drawn where the widget sits. On page load its markup is moved onto the container the widget is inside, and that container is given `position: relative`.- Because of that, the widget itself shows as an empty placeholder box in the editor canvas while the separator appears on the section edge.- **Wave** animates continuously. **Shape 1** is static — its shape is unchanged after seconds of watching.- With **Bottom** the shape hangs below the section; with **Top** it hangs above it. **Flip Divider** moves it inside that edge instead.- You can put more than one Advanced Separators widget in the same container, for example one set to **Top** and one to **Bottom**.- Nothing is drawn until you pick a shape: on **None** the widget outputs an empty, zero-height element. ## Limitations - The widget is deprecated since The Plus Addons for Elementor Pro 6.5.0 and will be removed once 6.6.0 is released. No replacement widget is named.- It is Pro only. Switch the Pro plugin off and every separator disappears from the front end, with no element left in the page at all.- There are two shapes, **Wave** and **Shape 1**. You cannot upload your own SVG.- The vertical wave separator is hidden on screens 767px wide and narrower, and there is no setting for that.- **Shape Height** only applies to **Wave** with **Section/Row**. A vertical separator is a fixed 110px thick.- **Flip Divider** stays visible even when **Shape Divider** is **None**, where it does nothing. ## Troubleshooting ### Nothing appears after adding the widget **Shape Divider** starts on **None**. Pick **Wave** or **Shape 1**. ### The separator is on the wrong section It attaches to the container the widget is nested in. Move the widget into the section or column you want the separator on. ### The widget is a grey empty box in the editor That is expected. The separator markup is moved onto the container, so the widget itself is left empty. Look at the section edge, not at the widget. ### The separator is cut off at the section edge The shape hangs outside the section, so a container with **Overflow** set to **Hidden** hides it completely — tested on the section itself, where the wave vanished. Set that overflow back to default, or turn **Flip Divider** on so the shape sits inside the section. ### I cannot find the widget in the editor Check that The Plus Addons for Elementor Pro is active and that **Advanced Separators** is switched on under **The Plus Addons > Widgets**. ## Related Docs - [Add a shape divider in Elementor](https://theplusaddons.com/docs/add-shape-divider-in-elementor/)- [Create an animated shape divider in Elementor](https://theplusaddons.com/docs/create-animated-shape-divider-in-elementor/)- [Add a horizontal shape divider in Elementor](https://theplusaddons.com/docs/add-a-horizontal-shape-divider-in-elementor/)- [Add a vertical shape divider in Elementor](https://theplusaddons.com/docs/add-a-vertical-shape-divider-in-elementor/) ## Frequently Asked Questions **Q: Why is the separator not showing after I add the widget?** A: Shape Divider starts on None, so the widget outputs nothing until you pick Wave or Shape 1. That default is easy to miss because the widget still exists in the editor, but it renders as an empty element on the page. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this setup so you can choose between a moving wave and a static arch without extra CSS. **Q: Why does the separator appear on the wrong section?** A: The separator attaches to the container it is nested inside, not to wherever the widget sits visually in the layout. That means placement inside the correct section or column matters more than its position in the editor canvas. If it lands on the wrong area, move the Advanced Separators widget into the exact section or column you want it to affect. **Q: Why is the Advanced Separators widget a grey empty box in Elementor?** A: That empty box is normal. On page load, the separator markup gets moved onto its parent container and that container is set to position: relative, so the widget itself stays blank in the editor. The real output is on the section edge, not inside the widget placeholder. This behavior is why The Plus Addons for Elementor Pro can draw separators directly on containers. **Q: How do I stop a separator from getting cut off at the edge of a section?** A: A container with Overflow set to Hidden will clip the shape completely when it hangs outside the section edge. The practical fix is to return overflow to its default or turn Flip Divider on so the shape sits inside the edge instead of outside it. That matters most for wave separators, since they extend beyond the container boundary by design. **Q: What do I need before using Advanced Separators in Elementor?** A: Advanced Separators is part of The Plus Addons for Elementor Pro, so the Pro plugin has to be installed and activated first. It also has to be switched on under The Plus Addons > Widgets before it shows up in Elementor. If Pro is switched off, existing separators disappear from the front end and nothing remains in their place. **Q: Should I use Wave or Shape 1 for a separator?** A: Wave fits animated section dividers, while Shape 1 gives you a static arch. Wave supports Shape Height and Wave Loop settings, which makes it better when you want motion or layered color bands. Shape 1 is simpler and uses icon settings plus Fill Color, so it works better when you want a fixed decorative edge instead of animation. For more divider styles, see [Add a shape divider in Elementor](https://theplusaddons.com/docs/add-shape-divider-in-elementor/) and [Create an animated shape divider in Elementor](https://theplusaddons.com/docs/create-animated-shape-divider-in-elementor/).