Brigade Blocks Docs v1.1.0

Content module

Spacer block

Empty vertical space with separate heights for desktop, tablet and mobile.

Overview

The Spacer adds empty vertical space between blocks. Unlike a plain empty line, you set an exact height — and a different height for tablets and phones, where big gaps usually look too large.

At a glance

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

When and why to use it

  • Fine-tune the rhythm between sections.
  • Reduce big desktop gaps on phones.

Example scenarios

  • Landing page: 96px between sections on desktop, 64px on tablet, 40px on mobile.

How to add the Spacer 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 Spacer in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
  4. Insert it. Click Spacer in the results. The block appears with a 48px space labelled with its heights.
  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.

On the block (in the editor canvas)

Height label

What it does
In the editor the spacer shows its heights, e.g. “Spacer · 48 / 48 / 48 px” (desktop / tablet / mobile).
What to enter or choose
Nothing to type — it is information only.
How to use it
Look at the spacer in the editor.
When to use it
To check the spacing without opening the settings.
Example
“Spacer · 96 / 64 / 40 px”.
Result
Nothing is shown on the site except empty space.

Settings panel: Height

Desktop (px)Desktop

What it does
The height on large screens (and the fallback for smaller ones).
What to enter or choose
A number from 0 to 400 (px).
Default
48 px
How to use it
Drag the slider, or type a number in the box next to it.
Example
96.
Result
The space grows or shrinks.

Tablet (px)Tablet

What it does
The height below 1024px.
What to enter or choose
A number from 0 to 400 (px).
Default
0 px
How to use it
Drag the slider, or type a number in the box next to it.
Example
64.
Result
Applies on screens up to 1023px wide.
Good to know
0 inherits the desktop height.

Mobile (px)Mobile

What it does
The height below 600px.
What to enter or choose
A number from 0 to 400 (px).
Default
0 px
How to use it
Drag the slider, or type a number in the box next to it.
Example
40.
Result
Applies on screens up to 599px wide.
Good to know
0 inherits the tablet height (or desktop if tablet is 0).

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 Spacer offers.

Element: Block

The spacer (visibility per device and custom attributes only).

Styles-tab controls for “Block”
PanelControlPer deviceAvailable in states
VisibilityShow on Desktop / Tablet / Mobile—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.

The Spacer has its own Desktop, Tablet and Mobile heights in the Settings tab. Example: Desktop 96, Tablet 64, Mobile 40.

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.

How it works on your site

An empty element hidden from screen readers (aria-hidden="true"). No JavaScript.

Tips and best practices

  • For spacing between blocks inside a Container, prefer the Container’s Gap setting.