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
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.
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.
- Change the unit of width to PX.
- 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.
You can also add a text or icon element in between the divider.
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.