--- title: "How to Add a Horizontal Shape Divider in Elementor?" url: https://theplusaddons.com/docs/add-a-horizontal-shape-divider-in-elementor/ date: 2024-05-21 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-a-Horizontal-Shape-Divider-in-Elementor_-1024x536.jpg word_count: 721 --- # How to Add a Horizontal Shape Divider in Elementor? ## - Advanced Separators en The Plus Addons for Elementor Pro añade un separador horizontal al borde superior o inferior de una sección, y se usa en modo Section/Row dentro de Row/Column. - Wave cubre todo el ancho del contenedor donde está el widget, mientras que Shape 1 tiene un tamaño fijo de 200 por 44 píxeles y siempre queda centrado. - Flip Divider refleja la forma y la mueve dentro del borde de la sección, y en una prueba con Bottom pasó de 680 a 480, es decir, dentro de los últimos 200 píxeles. - The Plus Addons for Elementor Pro 6.5.0 marca Advanced Separators como obsoleto y avisa que se eliminará por completo cuando salga la versión 6.6.0; con el plugin Pro desactivado, el separador no se renderiza. 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](https://theplusaddons.com/docs/add-separators-in-elementor/).* ***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. ## 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. ![Flip Divider switched on in the Advanced Separators panel, with the wave now sitting inside the section edge](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-flip.webp) ## The Result **Top** puts the shape across the section's upper edge: ![Purple wave divider running across the top edge of a two-column section on a published page](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-result-row-top.webp) The same idea with a single blue wave: ![Marketing demo of a blue wave separator running across the top edge of a section](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-separators-wave-demo-1.gif) ## 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. ## Related Docs - [Advanced Separators widget overview](https://theplusaddons.com/docs/add-separators-in-elementor/)- [Add a vertical shape divider in Elementor](https://theplusaddons.com/docs/add-a-vertical-shape-divider-in-elementor/)- [Create an animated shape divider in Elementor](https://theplusaddons.com/docs/create-animated-shape-divider-in-elementor/)- [Add a shape divider in Elementor](https://theplusaddons.com/docs/add-shape-divider-in-elementor/)