Skip to main content
Version: Beaver Builder 2.11

Separator

Use Separator to add a configurable horizontal divider line that breaks up content within a layout.

Usage​

Use Separator to render a horizontal divider line that visually breaks up content. The module outputs a single styled line whose color, height, width, alignment, and border style are all configurable, with responsive support for adjusting each setting per device.

Use Separator between sections, paragraphs, or grouped elements when you need a clean visual break without adding a full row or background. It fits long-form content, landing page sections, and any layout where a simple rule helps separate ideas or call attention to a transition.

Module Settings​

The Separator module settings control the divider's color, dimensions, alignment, and border style.

General Tab​

The General tab contains all of the divider's appearance settings.

Color Default: cccccc; Supports: Responsive, Field Connections

Sets the color of the divider line. Supports alpha transparency.

Height Default: 1; Supports: Responsive

Sets the thickness of the divider line in pixels.

Width Default: 100; Supports: Responsive

Sets the length of the divider line. Accepts %, px, or vw units.

Align Default: Center; Supports: Responsive

Sets the horizontal alignment of the divider within its wrapper.

  • Left: Aligns the divider to the left edge of its wrapper.
  • Center: Centers the divider horizontally within its wrapper.
  • Right: Aligns the divider to the right edge of its wrapper.
Style Default: Solid; Supports: Responsive

Sets the border style used to render the divider line. Double borders must have a Height of at least 3px to render properly.

  • Solid: Renders the divider as a single continuous line.
  • Dashed: Renders the divider as a series of short dashes.
  • Dotted: Renders the divider as a series of dots.
  • Double: Renders the divider as two parallel lines.

Advanced tab​

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.