Interactive module

Slide block

One slide of a Slider. Holds any blocks; its background image, colour, gradient and overlay are set in its Styles tab.

Overview

A Slide is one slide of a Slider. Put any blocks inside it, and give it its own background in the Styles tab — a photo with a dark overlay for a hero, a brand colour, or a gradient. It can only be used inside a Slider.

At a glance

Block name: wpbb/slide
Module: Interactive
Find it by searching: Slide
Used inside: Slider (it cannot be used on its own)
Loads JavaScript on the site: No

When and why to use it

One banner, quote or card of a slider.

Example scenarios

Hero slide: Styles → Background: a photo; overlay navy at 50%; text colour white; content position Middle.

How to add the Slide block

Add a Slider. A Slide only exists inside a Slider block, which starts with three sample slides.
Add or copy a slide. Use Add slide or Duplicate in the bar under the slider.
Select it. Click Edit this slide’s background in the bar, or pick the Slide in the List View.
Edit the content. Click inside the slide and type, or use the + to add blocks.
Style it. In the Slide’s Styles tab, set the background (image, colour or gradient), overlay, text colour and padding. Styles for all slides at once are on the Slider (Styles → All slides).
Reorder or remove. Use the arrows in the block toolbar, or the block menu (⋮) → Delete.
Save or publish. Click Save draft, Preview or Publish / Update.

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)

Content

What it does: The content shown on this slide.
What to enter or choose: Any blocks — paragraphs, lists, images, buttons, even another Brigade block.
How to use it: Click in the content area (it starts with “Slide heading” or sample text) and type, or use the + to add blocks.
When to use it: Always.
Example: A paragraph and a Button.
Result: The blocks appear inside.

Settings panel: Slide

Content position

What it does: Where the content sits vertically when the slide is taller than its content.
What to enter or choose: One of: Top, Middle, Bottom.
Default: Middle
How to use it: Click one of the buttons in the group.
When to use it: Middle for most heroes; Bottom for a caption over a photo.
Example: Bottom with a dark gradient overlay.
Result: The content moves up or down inside the slide.

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:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
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 Slide offers.

Element: Slide

This slide only: background image, colour or gradient, overlay, text colour, padding, border and radius. Hover state.

Styles-tab controls for “Slide”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover
Colors	Text	—	Normal, Hover
	Link	—	Normal
	Link hover	—	Normal
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
	Overlay	—	Normal, Hover
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal, Hover
	Scale X / Scale Y	—	Normal, Hover
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal, Hover
	Skew X (°) / Skew Y (°)	—	Normal, Hover
Effects	Opacity (%)	Yes	Normal, Hover
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

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: Font size, Line height, Letter spacing, Alignment, Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).

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.
This block cannot be turned into a synced pattern on its own; make a pattern from its parent block instead.

HTML anchor gives the slide an ID, for your own CSS or scripts.

How it works on your site

A plain element inside the slider’s row; its background and overlay are compiled to a small stylesheet for this slide only.

Limitations and notes

Only works inside a Slider block.