Reusable Vertical Divider (70% Height) for Elementor Widgets

This tip explains how to create a reusable 70% height vertical divider that can be applied
to almost any Elementor widget (CTA, Icon Box, Text, Image Box, Containers, and more) by simply adding
a CSS class.

What This Tip Does

• Adds a vertical divider that is 70% of the widget height
• Keeps the divider centered vertically
• Works with most Elementor widgets
• Reusable across multiple pages and layouts

Step 1: Add a Class to the Widget

Select the widget where you want the vertical divider to appear.

Go to Advanced → CSS Classes and add:

vertical-divider-70

This class can be added to CTA widgets, Icon Boxes, Headings, Text widgets,
Images, Containers, or Columns.

Step 2: Add the Universal CSS

Go to Appearance → Customize → Additional CSS (or your global CSS area)
and paste the following code:

/* =========================================================
   Universal 70% Vertical Divider
   Usage:
   - Add class: vertical-divider-70
   - Works on most Elementor widgets
   ========================================================= */

.vertical-divider-70 {
  position: relative;
}

.vertical-divider-70::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 70%;
  background-color: #e5e5e5;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

/* ================= END Vertical Divider ================= */

Special Case: Elementor CTA Widgets

Elementor CTA widgets use internal background overlays. If the divider does not appear
when using the universal class above, add the CTA-safe override below.

.vertical-divider-70 .elementor-cta {
  position: relative;
}

.vertical-divider-70 .elementor-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 70%;
  background-color: #e5e5e5;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}

Optional Variations

Left-side divider

.vertical-divider-left::after {
  left: 0;
  right: auto;
}

Thicker divider

width: 2px;

Darker divider

background-color: #cccccc;

Hide divider on mobile

@media (max-width: 767px) {
  .vertical-divider-70::after {
    display: none;
  }
}

When to Use This

• Dashboards
• Feature grids
• Admin-style layouts
• CTA sections needing subtle visual separation