Super Easy Elementor Vertical Divider

April 8, 2020

In this article we will learn about how to add a vertical divider in Elementor. This will help you to add much more visual appeal to your website.

Follow the steps mentioned below to add a vertical divider to your Elementor page.

Method 1. Transforming the Elementor Shape Dividers into Vertical Dividers

To get a divider like this :

Watch the video, and use this code!

selector{
    overflow: hidden!important;
}

selector .elementor-shape {
    left: 50px;
}

selector .elementor-shape.elementor-shape-bottom{
    transform: translateY(-250px) rotate(270deg);
    z-index: 2;
}

Method 2. Transforming the Elementor Divider element into simple vertical dividers

Step 1: Add a new Elementor section

Select the three column Elementor layout

Add two elements to the Elementor section

Add two Elementor elements to the left and right most columns of the section. Here we are adding image elements to the columns. The empty column in the middle will serve for the purpose of a divider later on.

Step 2: Adjust the width of the Elementor columns

Adjust the width of the middle column

Click on the Edit Column icon of the middle column.

Change the Column Width under the Layout tab to 4%. This will make the middle column narrower for the divider to fit in.

Change Vertical-align attribute of the middle column

Change the Vertical align attribute to "Bottom".

Adjust the width of the right and left Elementor columns

Go to the edit column toolbox for the right and left columns in the section.

Step 3: Add Elementor divider element

Drag and drop the Elementor divider element in the center column of the section.

Open edit column toolbox for the Elementor middle column

Change the Vertical Align to Bottom under the layout tab.

Step 4: Change Elementor divider properties

This can be easily achieved by going to the going to the Elementor navigation windows and accessing the divider properties.

Go to Elementor navigation tab

To the bottom left side of the page you will find the Navigator icon. Click it to open the navigator toolbox. You will need the navigator toolbox edit properties for the divider element.

Open the Elementor divider properties

Open the Edit divider properties window from the Elementor navigator toolbox.

Change properties from the Edit Divider toolbox

Go to the Advanced Tab.
Add the below to the custom CSS text box.

 selector{
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
}

selector .elementor-divider {
    display: block;
}

If you have Elementor free, give your divider a class name under Advanced > CSS Classes, and replace 'selector' with '.yourclassname'. See how to add CSS for Elementor free websites for more information.