Super Easy Elementor Vertical Divider

Table of Contents

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.

Step 1: Add a new Elementor section

Elementor Vertical Divider

Select the three column Elementor layout

Super Easy Elementor Vertical Divider 1

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.

Super Easy Elementor Vertical Divider 2

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.

Super Easy Elementor Vertical Divider 3

 

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

Super Easy Elementor Vertical Divider 4

Change Vertical-align attribute of the middle column

Super Easy Elementor Vertical Divider 5

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.

Super Easy Elementor Vertical Divider 6

Step 3: Add Elementor divider element

Super Easy Elementor Vertical Divider 7

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

Open edit column toolbox for the Elementor middle column

Super Easy Elementor Vertical Divider 8

Super Easy Elementor Vertical Divider 9

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

Super Easy Elementor Vertical Divider 10

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.

Super Easy Elementor Vertical Divider 11

Change properties from the Edit Divider toolbox

Super Easy Elementor Vertical Divider 12

  1. Go to the  Advanced Tab.
  2. Add the below to the custom CSS text box.
 selector{
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg)
}

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.

Step 5: Styling the Elementor Divider

Adjusting the height of the divider

Go to the Edit Divider tool box again and open the Content tab.

Super Easy Elementor Vertical Divider 13

  1. Change the unit of width to PX.
  2. Adjust the width scrollbar to adjust the height of the divider.

Styling the divider

Go to the style attribute and toggle through the available divider style options.

Super Easy Elementor Vertical Divider 14

You can also add a text or icon element in between the divider.

Super Easy Elementor Vertical Divider 15

Conclusion

Alright! Now you know how to add a vertical divider element to the Elementor page. It will help you to make more vibrant websites.

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments