BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Free widget

Advanced Divider Widget for Elementor Free

Separate sections with a styled line, text or icon.

Overview

What Advanced Divider does

Advanced Divider draws a line between parts of a page, with text, an icon or both in the middle. Pick from 11 line styles, from a plain solid line to zigzag and wave patterns, and let the lines draw themselves in when the divider scrolls into view.

Live demo

See it in action

Our Services
Features

What it can do

  • Eleven line styles: solid, dashed, dotted, double, fade, gradient, zigzag, wave, slashes, dots and chevrons.

  • Put text, an icon, or an icon and text in the middle of the line.

  • Place the middle content on the left, in the center or on the right.

  • Set the length of the short line when the content sits at one side.

  • Choose the divider width and its alignment in the column.

  • Lines can grow out from the middle the first time the divider is seen.

  • Two colors for the gradient style, and a pattern height for the patterned styles.

  • Style the icon with its own color, background, padding and radius.

Use cases

When to use it

Section titles

Use the text option as a small label between two blocks, such as "Services".

Playful pages

Use the zigzag, wave or chevron pattern to break up a long landing page.

Icon breaks

Put a single icon in the middle of a line between blog sections or menu courses.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag the Advanced Divider widget into a container.

  2. In Divider, choose a Line Style.

  3. Pick the Middle Content: None, Text, Icon or Icon and Text, and fill in the Text or Icon.

  4. Set Content Position, Width and Alignment.

  5. Switch on Draw Lines When Visible if you want the lines to grow in.

  6. In the Style tab, set the line Color, Weight or Pattern Height and the Space Above and Below.

FAQ

Questions and answers

Can I use the divider without any text or icon?

Yes. Set Middle Content to None and you get a styled line on its own.

How do I make a two color line?

Choose the Gradient line style, then set Color and Second Color in the Line style section.

Does the draw-in effect replay when I scroll back?

No. The lines grow in once, the first time the divider scrolls into view.

Free forever

Advanced Divider is free

It is one of 48 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.