How to Add a Vertical Divider in Elementor

How to Add a Vertical Divider in Elementor | The Easiest Ways

Are you tired of your Elementor designs looking messy and lacking visual appeal? If so, you’ve come to the right place! In this blog post, we’ll guide you through the easiest ways to add a vertical divider in Elementor. Whether you’re an experienced developer or just starting with this powerful page builder, these simple techniques will enable you to effortlessly create stunning layouts that catch the eye. So, let’s discover “How to Add a Vertical Divider in Elementor”.

What is a Vertical Divider?

A vertical divider in Elementor refers to a visual element that is used to create a vertical line or separator between different sections or elements on a web page. It is a design element that helps to organize and separate content and improve the overall layout and aesthetics of a website.

By adding a vertical divider, you can create clear visual distinctions between different sections, columns, or widgets, making your designs more visually appealing and easy to navigate. This simple element can significantly enhance the overall look of your Elementor pages, providing a professional appearance.

How to add a Vertical divider in Elementor?

Among all the website builders, Elementor is the most popular builder. But despite its popularity, it has certain limitations. For instance, Elementor does not allow vertical dividers. But you need not worry because there are certain ways to add a vertical divider for a better user experience.

In this article, We’ll describe the following different ways to add a vertical divider in Elementor:

How to add a vertical divider in Elementor | Elementor Pro?

How to add a vertical divider in Elementor using Plugin?

How to add a vertical divider in Elementor | Elementor Pro?

In order to add a vertical divider in Elementor (free version), follow the given procedure:

Step 1: Add a new Elementor section

Step 2: Adjusting the columns in the section

Step 3: Add Elementor divider

Step 4: Change the properties of the divider

Step 5: Style the vertical divider

Step 1: Add a new Elementor section

The first thing is to add a new section with three columns.

How to Add a Vertical Divider in Elementor How to Add a Vertical Divider in Elementor

Two of these columns (Left & right) will be used to insert images/elements and the middle column will be used to insert the divider.

How to Add a Vertical Divider in Elementor

Step 2: Adjusting the columns in the section

To insert a divider, you’ll have to adjust the width of the middle column. Hover over the middle column and click on the Edit Column icon in the upper corner of the middle column.

How to Add a Vertical Divider in Elementor

To ensure the divider fits perfectly, adjust the column width under the Layout tab to 4%. By making the middle column narrower, enough space for the divider will be created to seamlessly fit in, giving a balanced and visually pleasing layout.

How to Add a Vertical Divider in Elementor

Modify the “Vertical align” attribute to “Bottom”.

How to Add a Vertical Divider in Elementor

Access the edit column toolbox for the right and left columns to adjust the width of each column individually to achieve your desired design and layout.

How to Add a Vertical Divider in Elementor

Step 3: Add Elementor divider

In the search bar at the top of the sidebar, type “Divider” and hit enter. Look for the “Divider” element in the search results. Drag and drop the Divider element in the middle column of the section.

How to Add a Vertical Divider in Elementor

Step 4: Change the properties of the divider

To change the divider properties, locate the navigator at the bottom of the left sidebar in the elementor editor. Once you have located the navigator icon, click on it to modify the properties of the divider using the navigator toolbox.

How to Add a Vertical Divider in Elementor

Open the edit divider properties tab using the navigator toolbox. To change the properties, open the Edit Divider toolbox in the left sidebar and click on the Advanced tab.

How to Add a Vertical Divider in Elementor

Locate the Custom CSS and open it. Now add the following code in the Custom CSS text box:

selector{
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg)
}
How to Add a Vertical Divider in Elementor
IMPORTANT: 
For Elementor Free
Go to Advanced >> CSS Classes. Give your divider a class name for instance “Vertical-divider”
In the Code given above, Change the selector with the class name; vertical-divider in the current example.
.vertical-divider{
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg)
}

Paste the code in the additional CSS. This action will change the position of the divider from horizontal to vertical.

Step 5: Style the vertical divider

Go to the Edit Divider toolbox again and click on the Content Tab this time to style the divider.

Change the unit of width to PX. To adjust the height of the divider use the width scrollbar.

How to Add a Vertical Divider in Elementor

Once you have adjusted the width and height of the divider, now is the time to style the divider.

Go to the Style attribute and select the desired style of the divider from the dropdown.

How to Add a Vertical Divider in Elementor

If you want to add an icon or text in between the divider, you definitely can do this using the “Add Element” attribute.

How to Add a Vertical Divider in Elementor

 

Responsive Tab Setting

This technique is specifically suitable when you have adjacent columns, such as in a desktop layout. However, it may not yield the desired visual result on mobile devices. In such cases, it becomes necessary to hide the divider element using the responsive tab within the advanced menu.

How to Add a Vertical Divider in Elementor

By utilizing this option, you can ensure that the divider is selectively hidden on mobile devices, allowing for a seamless and optimized viewing experience across different screen sizes.

How to Add a Vertical Divider in Elementor Using Plugin

Adding a vertical divider without the help of a plugin is not a difficult task and does not require coding knowledge. But if you hate codes and do not want to engage with the coding, then this method is absolutely for you.

Using a plugin does not require much effort. This is a straightforward technique to add a vertical divider. Plugins are useful to easily customize the widgets as per your needs. The famous and one of the best plugins being used to add vertical dividers is PowerPack Addons.

Follow the steps given below:

  1. Go to your WordPress Dashboard
  2. Navigate to Plugins>>Add New
  3. Locate the search bar and type “PowerPack Addons for Elementor”    How to Add a Vertical Divider in Elementor 
  4. After the plugin appears on the screen, Click on “Install Now” and “Activate”
  5. Once the Plugin is activated, go to the page (Edit with Elementor) where you want to add a divider.
  6. In the left sidebar, Locate the PowerPack Elements, and drag and drop the Divider element of the plugin on the desired location.                                                                 How to Add a Vertical Divider in Elementor 
  7. You can customize the divider according to your needs from the divider edit menu.  How to Add a Vertical Divider in Elementor
  8. Once you are done with the changes, click on update.

Conclusion

In conclusion, adding a vertical divider in Elementor is a simple yet effective way to enhance the visual appeal and organization of your website designs. We have described the two easiest ways “How to add a vertical divider in Elementor”. Whether you’re a beginner or an experienced user, the process of adding a vertical divider is straightforward and can be easily customized to suit your design preferences.

Remember to consider the responsive design and make necessary adjustments for optimal display across various devices. With Elementor’s versatile tools and options, you have the freedom to unleash your creativity and create stunning websites that leave a lasting impression on your visitors. So, go ahead and experiment with vertical dividers in Elementor to elevate the aesthetics of your web pages and deliver a remarkable user experience.

FAQs. (How to add a vertical divider in Elementor)

How can I add a shape divider in Elementor?

  1. Add a new Section.
  2. Go to Section > Style > Shape Divider.
  3. Choose to display at the Top or Bottom of your section.
  4. Type: Click the dropdown to choose your Shape Divider style.
  5. Color: Pick a color.
  6. Width: Set the width of your Shape Divider.
  7. Height: Set the height of your Shape Divider.

What are sections in Elementor?

Pages in Elementor are built using three primary building blocks: Sections: the largest building blocks, which house the content inside columns. Columns: sit inside of Sections and house Widgets. Widgets: are placed inside Columns and are functional site components.

What is a separator in WordPress?

The separator block creates a break between two blocks of content with a horizontal line. This helps to create a separation between ideas or sections on your post or page. In order to add a separator block, click on the Block Inserter icon.

How do I add a horizontal divider in Elementor?

To add a horizontal line using the WordPress block editor, click the (+) icon to add a new block wherever you want the line to be. Next, select the Separator block from the Layout Elements section or search for it using the search bar. Once added, you’ll see your horizontal line divider in your content area.

What is the difference between a spacer and a divider in Elementor?

The Divider element allows you to add a styled, horizontal line to add a divider between other elements. You can change the line type, its width and color, and other settings. On the other hand, the Spacer element allows you to add spacing between elements in Elementor without adding any visual element