--- title: "How to Add a Vertical Shape Divider in Elementor?" url: https://theplusaddons.com/docs/add-a-vertical-shape-divider-in-elementor/ date: 2024-05-22 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "A vertical shape divider runs up the side of a column instead of across a section. It gives two side-by-side content areas a shaped boundary rather than a hard edge..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-a-Vertical-Shape-Divider-in-Elementor_-1024x536.jpg word_count: 844 --- # How to Add a Vertical Shape Divider in Elementor? ## - The Plus Addons for Elementor Pro Advanced Separators widget adds a vertical shape divider in Column mode, and the post says it is only in The Plus Addons for Elementor Pro 6.5.0 until removal in 6.6.0. - Advanced Separators uses Shape Divider options Wave or Shape 1, with Row/Column set to Column and Divider Position set to Right or Left. - Vertical Wave dividers hide at 767 pixels and below, while Shape 1 stays visible on phones and measures 44 by 200 pixels in Column mode. - The divider attaches to the container it sits in, takes the column's content height, and leaves gaps when top and bottom padding reduce the content box height. A vertical shape divider runs up the side of a column instead of across a section. It gives two side-by-side content areas a shaped boundary rather than a hard edge or a border. In the **Advanced Separators** widget from The Plus Addons for Elementor Pro this is the **Column** 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.- **A column to attach it to:** put the widget inside the inner container or column that the divider belongs to, not in the outer section. The divider takes the height of whatever container it finds itself in. ## How to Add a Vertical Shape Divider - Drag the **Advanced Separators** widget into the column you want the divider on.- Under **Shape Divider**, pick **Wave** or **Shape 1**.- Set **Row/Column** to **Column**.- Set **Divider Position**. In this mode the two icons are **Right**, which is the default, and **Left**.- Turn **Flip Divider** on to mirror the shape. ![Row/Column set to Column and Divider Position highlighted in the Advanced Separators panel, with the vertical wave on the column edge](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-column.webp) ## The Result The divider stands up the right-hand edge of the first column: ![Purple vertical wave divider standing on the right edge of the left column of a two-column section](https://theplusaddons.com/wp-content/uploads/2026/09/advsep-result-column.webp) The same idea in a marketing layout: ![Demo of a pink curved divider with a chevron on the right edge of a two-column layout](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-separators-column-demo.png) ## How It Behaves - The divider attaches to the container the widget is inside, and is turned on its side against that container's **Right** or **Left** edge.- Its length is set in the browser from the column's content height, so it grows and shrinks with the column and is re-measured when the window is resized.- That length is the content box, not the whole column. On a 420px column with 40px top and bottom padding the divider measured 340px, leaving a gap at each end.- A vertical **Wave** divider is a fixed 110 pixels thick. **Shape Height** is not offered in this mode and has no effect if it was set earlier.- **Right** puts the divider on the column's right edge. **Left** places it just outside the column's left edge, so on the left-most column it can sit off the page.- **Shape 1** in **Column** mode is a 44 by 200 pixel arch, centred vertically on the edge. ## Limitations - A vertical **Wave** divider is hidden on screens 767 pixels wide and narrower. Tested: visible at exactly 768px, gone at exactly 767px and at 390px. There is no setting for it, so plan a layout that reads correctly on phones without the divider.- **Shape 1** in **Column** mode is not covered by that rule and stays visible on phones.- You cannot set the thickness of a vertical divider; it is fixed in the stylesheet.- The divider is as long as the column's content box, so container padding leaves a visible gap at the top and bottom.- **Left** draws the divider outside the column, which puts it off-canvas when that column is the left-most element on the page.- 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 vertical divider is missing on mobile A vertical **Wave** divider is hidden at 767 pixels and below by the widget's own stylesheet. Use **Shape 1** if you need something visible there, or accept the straight edge on small screens. ### The divider is shorter than the column Its length comes from the column's content height. Reduce the column's top and bottom padding, or move that padding onto the content inside the column. ### The divider is off the page **Left** places it outside the column's left edge. On the left-most column use **Right** on that column instead, or put the widget in the column to its right. ### The divider does not resize with the column The length is measured on load and on window resize. If the column grows later — for example because content was loaded in — reload the page or resize the window to re-measure. ### Shape Height does nothing It only applies to **Wave** with **Section/Row**. In **Column** mode the control is hidden and the thickness is fixed. ## Related Docs - [Advanced Separators widget overview](https://theplusaddons.com/docs/add-separators-in-elementor/)- [Add a horizontal shape divider in Elementor](https://theplusaddons.com/docs/add-a-horizontal-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/) ## Frequently Asked Questions **Q: What do I need before adding a vertical shape divider in Elementor?** A: A vertical shape divider in this setup depends on the Advanced Separators widget from The Plus Addons for Elementor Pro, and the Pro plugin has to be installed and activated. The widget is enabled under The Plus Addons > Widgets, and it attaches to the container it sits inside, not the outer section. That matters because the divider takes the height of the container it finds itself in, so placement changes the result. **Q: How do I make a vertical shape divider run along a column instead of across a section?** A: The key switch is Row/Column set to Column inside the Advanced Separators widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH. In Column mode, pick Wave or Shape 1 under Shape Divider, then choose Right or Left for Divider Position. Flip Divider mirrors the shape. This turns the separator onto the side of the column instead of spanning a section. **Q: Why is my vertical wave divider missing on mobile?** A: A vertical Wave divider is hidden by the widget’s own stylesheet at 767 pixels and below. It was tested as visible at exactly 768px and gone at exactly 767px and 390px. If you need a divider on phones, Shape 1 stays visible in Column mode. That makes Wave a desktop or tablet choice, while Shape 1 is the safer option for small screens. **Q: Why is my vertical divider shorter than the column?** A: The divider only measures the column’s content height, not the full column box. That means top and bottom padding create visible gaps above and below the shape. A practical fix is to reduce padding on the column itself or move that spacing onto content inside the column. On a 420px column with 40px top and bottom padding, the divider measured 340px. **Q: Why does my vertical divider go off the page on the left side?** A: Left positions the divider outside the column’s left edge, so it can end up off-canvas when that column is already the left-most element on the page. Right keeps it on the column’s right edge instead. If you need a left-side look on a first column, placing the widget in the column to its right avoids that off-page placement. **Q: What are the main limitations of a vertical shape divider in The Plus Addons for Elementor?** A: The biggest limits are fixed thickness and fixed behavior by mode. A vertical Wave divider is always 110 pixels thick, Shape Height does nothing in Column mode, and thickness cannot be changed because it is fixed in the stylesheet. The widget is also deprecated since The Plus Addons for Elementor Pro 6.5.0 and will be removed in 6.6.0, so it is not a good choice for new builds.