---
title: "How to Add Shape Divider in Elementor?"
url: https://theplusaddons.com/docs/add-shape-divider-in-elementor/
date: 2024-05-21
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Shape-Divider-in-Elementor_-2-1024x536.jpg
word_count: 866
---

# How to Add Shape Divider in Elementor?

## 

- Advanced Separators muestra Shape 1 como una opción estática en The Plus Addons for Elementor Pro, con un arco estrecho centrado en el borde elegido y sin animación.
- The Plus Addons for Elementor Pro 6.5.0 marca Advanced Separators como obsoleto, y el texto indica que se eliminará por completo cuando se publique la versión 6.6.0.
- Shape 1 fija su tamaño en 200px por 44px en un borde horizontal y 44px por 200px en uno vertical, y Shape Height no se aplica a esta forma.
- Fill Color controla tanto el relleno como el contorno del arco, mientras que URL deja un enlace sobre toda la forma y puede abrir una pestaña en blanco si se mantiene el valor # por defecto.

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](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 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.

![Fill Color set to orange for a Shape 1 divider, with the orange arch on the section edge in the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-shape1-fill.webp)

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

![Icon Font set to Font Awesome 5, with Icon Color and Icon Size below it in the Advanced Separators panel](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-shape1-icon.webp)

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

![URL field of the Advanced Separators widget filled with an on-page anchor](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-shape1-url.webp)

## The Result

The arch sits centred on the section edge in the colour you set:

![Orange Shape 1 arch on the bottom edge of a two-column section on a published page](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-result-shape1.webp)

The same shape on a photo section. The icon only shows because that page loads Font Awesome itself — see Limitations:

![Demo page with a pink Shape 1 arch and a white chevron icon on the bottom edge of a photo section](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-separators-shape-demo.png)

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

## Related Docs

- [Advanced Separators widget overview](https://theplusaddons.com/docs/add-separators-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 shape divider not showing on the live page?**
A: The usual cause is that Advanced Separators is Pro-only in The Plus Addons for Elementor, so if the Pro plugin is switched off the widget is not rendered at all. Another gotcha is the default Font Awesome icon, which can appear in the Elementor editor but not on the published page because no Font Awesome 4 stylesheet loads there. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also notes that Font Awesome 5 icons can blend into the shape because they take Fill Color instead of Icon Color.

**Q: How do I stop a shape divider from opening a blank tab?**
A: That blank tab comes from the default # URL that Shape 1 pre-fills. The link layer sits over the whole shape even when you do not intend to use it, so an untouched divider still behaves like a link. Clearing Open in new window and replacing # with a real target fixes the click behavior. If you want an on-page anchor, keep it as a same-page link instead of leaving the default settings in place.

**Q: Why is my arch cut off at the edge of the section?**
A: Shape 1 hangs outside the section edge by design, so any container with Overflow set to Hidden will clip it. That is why the arch can look sliced off even when the widget itself is working correctly. Setting overflow back to default lets the full curve show again, and Flip Divider is another option because it moves the shape inside the section edge instead of outside it.

**Q: What color setting controls a shape divider in Elementor?**
A: Fill Color controls both the fill and the outline of Shape 1, so it sets the visible color of the whole arch. That matters because Icon Color does not always affect what you see: with Font Awesome 5, the icon is drawn as an inline SVG and picks up Fill Color instead. If you are comparing shapes, remember that Wave uses different color behavior from Shape 1.

**Q: Can I use a custom SVG or change the curve of this shape divider?**
A: Shape 1 does not support custom SVG uploads or curve edits. There is only one built-in shape, and its size stays fixed at 200px wide by 44px tall on horizontal edges or 44px wide by 200px tall on vertical edges. That makes it predictable for layout work, but it also means Shape Height does not apply to Shape 1.

**Q: What should I use if I want a moving divider instead of a static arch?**
A: Shape 1 is static, so it stays visually identical over time and does not animate. If motion matters, Wave is the better choice because The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH treats Wave as the animated option while Shape 1 stays quiet and fixed. That difference matters when you want a separator that adds energy versus one that just breaks up sections cleanly.