# Divider Widget

> Decorative horizontal divider with multiple style presets — line, dotted, double-line, branded SVG shapes, icon-in-middle.

**Class file:** `includes/Elements/Divider.php` (1,068 lines)
**Slug:** `divider` (widget id `eael-divider`)
**Public docs:** <https://essential-addons.com/elementor/docs/divider/>
**Pro-shared:** Pro-only. Uses Lite's `Classes\Helper`.

## Overview

Renders a visual divider — beyond Elementor's built-in solid line, Pro adds dotted / double / triple / shape patterns plus icon-centered dividers. Optional SVG shapes for hero/section breaks (waves, slopes, curves). No JS — pure CSS + SVG.

## Pro vs Lite

Pro-only.

## File Map

| File | Role |
| --- | --- |
| `includes/Elements/Divider.php` | Widget class (1,068 lines) |
| `src/css/view/divider.scss` → `assets/front-end/css/view/divider.min.css` | Styles |
| `config.php` entry `'divider'` | Self CSS only (no JS) |

## Architecture

- **Composes Lite's `Helper`** (line 12).
- **SVG icon middle-anchor** — `.eael-divider-icon svg` (line 770) for fill / size / rotate. Two svg-render paths: `.eael-divider-icon svg` (inline) and `.eael-divider-svg-icon` (wrapper).
- **`divider_style` switch** (line 398) — drives CSS class on root for `solid` / `dotted` / `double` / `dashed` / etc.
- **No JS** — entirely CSS-driven.

## Render Output

```html
<div class="eael-divider eael-divider-{style}">
  [?] <span class="eael-divider-line eael-divider-left"></span>
  [?] <div class="eael-divider-icon">
    {inline FA5 / SVG icon}
  </div>
  [?] <span class="eael-divider-line eael-divider-right"></span>
</div>
```

## Controls Reference

| Control id | Tab → Section | Type | Purpose |
| --- | --- | --- | --- |
| `divider_style` | Content → Style | SELECT | `solid` / `dotted` / `dashed` / `double` / `wave` / `curve` / ... |
| Icon middle toggle + ICONS picker | Content → Icon | SWITCHER + ICONS | Center icon |
| Line color / thickness / length | Style → Line | various | Per-side line |
| Icon color / size / rotation | Style → Icon | various | Center icon styling |

## Conditional Dependencies

```text
icon_show = 'yes' → ICONS picker + icon style controls
divider_style = 'wave' | 'curve' | 'slope' → SVG shape controls (color / scale)
```

## JavaScript Lifecycle

N/A — pure CSS widget.

## Hooks & Filters

Standard widget render. No Pro-emitted hooks.

## Common Issues

| Symptom | Cause | Fix |
| --- | --- | --- |
| Icon misaligned vertically | Line-height mismatch with line | Adjust icon size or line thickness |
| SVG shape doesn't fill section | Width 100% not set on parent | Verify section padding/width |
| Line color invisible | Same as background | Switch color or add contrast |

## Known Limitations

- **No `prefers-reduced-motion`** for animated dividers (some styles have subtle animation)
- **SVG shapes use inline embedding** — no per-shape responsive scaling control
- **No vertical divider** mode — strictly horizontal

## Cross-References

- Shared patterns: [`_patterns.md`](_patterns.md)