Brigade Blocks Docs v1.1.0

Content module

Divider block

A horizontal line with style, weight and width options, and an optional centred label or icon.

Overview

The Divider separates sections or ideas with a horizontal line. You choose its style (solid, dashed, dotted, double), colour, thickness and width, and you can place a short text label or an icon in the middle of the line.

At a glance

Block name
wpbb/divider
Module
Content
Find it by searching
Divider
Loads JavaScript on the site
No

When and why to use it

  • Separate sections without a big gap.
  • Create “OR” separators between two options.
  • Add a decorative accent under a heading.

Example scenarios

  • Sign-up page: a divider with the label “or” between two buttons.
  • Article: a short, centred brand-coloured line with a star icon between chapters.

See it in action

These are live examples: real Divider blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Line styles, label and icon
Open in a new tab

How to add the Divider block

  1. Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
  2. Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
  3. Search for the block. Type Divider in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
  4. Insert it. Click Divider in the results. The block appears with a thin, full-width line.
  5. Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
  6. Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
  7. Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Block toolbar

Align

What it does
Places a shortened line left, centre or right.
What to enter or choose
One of: Align text left, Align text center, Align text right.
Default
Align text center
How to use it
Select the block; the button is in the toolbar that appears above it.
Example
Left under a left-aligned heading.
Result
Visible only when the Width is under 100%.

Settings panel: Line

Style

What it does
The line pattern.
What to enter or choose
One of: Solid, Dashed, Dotted, Double.
Default
Solid
How to use it
Open the dropdown and pick an option.
Example
Dashed for a lighter separation.
Result
The line changes pattern.

Color

What it does
The line colour from the design palette.
What to enter or choose
One of: Subtle, Brand, Dark.
Default
Subtle
How to use it
Open the dropdown and pick an option.
When to use it
Subtle for quiet separation; Brand for an accent.
Example
Brand for a decorative divider.
Result
The line colour changes.

Weight (px)

What it does
The thickness of the line.
What to enter or choose
A number from 1 to 10 (px).
Default
1 px
How to use it
Drag the slider, or type a number in the box next to it.
Example
3 for a bold accent.
Result
The line gets thicker.

Width (%)

What it does
How much of the column the line spans.
What to enter or choose
A number from 5 to 100 (%).
Default
100 %
How to use it
Drag the slider, or type a number in the box next to it.
Example
20 for a short accent line.
Result
The line gets shorter and is placed according to Align.

Settings panel: Label

Element

What it does
What appears in the middle of the line.
What to enter or choose
One of: None, Text, Icon.
Default
None
How to use it
Open the dropdown and pick an option.
Example
Text for an “or” separator.
Result
The line splits around the label or icon.

TextShown when Element is Text

What it does
The label text.
What to enter or choose
One or two words.
Default
Empty
How to use it
Type into the text field. Changes appear in the preview right away.
Example
“or”.
Result
Shown in the middle of the line. Empty text shows just the line.

IconShown when Element is Icon

What it does
The icon in the middle.
What to enter or choose
An icon from the library.
Default
star
How to use it
Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
Example
star.
Result
The icon sits in the middle of the line.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

  1. Element — which part of the block to style.
  2. State — Normal, or a state such as Hover (only the states the part supports are offered).
  3. Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Divider offers.

Element: Block

The whole divider: space around it, padding, width, position, visibility.

Styles-tab controls for “Block”
PanelControlPer deviceAvailable in states
SpacingMarginYesNormal
PaddingYesNormal
SizingWidthYesNormal
Max widthYesNormal
HeightYesNormal
Min width / Min height / Max heightYesNormal
Block alignmentYesNormal
PositionPositionYesNormal
Top / Right / Bottom / LeftYesNormal
Z-indexYesNormal
OverflowYesNormal
EffectsState transition (ms)—Normal
Timing—Normal
VisibilityShow on Desktop / Tablet / Mobile—Normal

States: Normal only.

Element: Label text

The label text.

Styles-tab controls for “Label text”
PanelControlPer deviceAvailable in states
TypographyFont family—Normal
Font sizeYesNormal
Weight—Normal
Style—Normal
Line heightYesNormal
Letter spacingYesNormal
Letter case—Normal
AlignmentYesNormal
Decoration—Normal
ColorsText—Normal

States: Normal only.

Element: Icon

The icon.

Styles-tab controls for “Icon”
PanelControlPer deviceAvailable in states
ColorsText—Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

  • HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
  • Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
  • Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
  • State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

A role="separator" element drawn with CSS. No JavaScript.

Accessibility

  • Screen readers announce it as a separator.