Marketing module

Call to Action block

A conversion banner — eyebrow, headline, supporting text and buttons — on a dark, coral, tinted or image background.

Overview

The Call to Action (CTA) is a banner that asks visitors to take the next step. It combines an optional eyebrow label, a headline, a supporting sentence and one or more buttons on a strong background: dark ink, brand coral, a soft tint or a photo with a darkening overlay. The text and buttons can sit side by side (Split) or stacked.

At a glance

Block name: wpbb/call-to-action
Module: Marketing
Find it by searching: Call to Action
Loads JavaScript on the site: No

When and why to use it

End-of-page “Ready to start?” banners.
Newsletter or trial prompts between sections.
Promotions with a background photo.

Example scenarios

Homepage footer: Dark background, “Ready to start your project?” and two buttons, Split layout.
Campaign: Image background with 70% overlay, centred text, one Primary button.

See it in action

These are live examples: real Call to Action 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.

Dark, Brand and Tint banners

Open in a new tab

How to add the Call to Action block

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).
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.
Search for the block. Type Call to Action in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Call to Action in the results. The block appears with empty headline and text fields and two sample buttons (“Start a Project” and “Talk to us”).
Configure the content. Type the headline and text on the block and edit the buttons (each is a Button block — click one to change its text and link). Then open the Settings tab.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
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)

Headline

What it does: The main message (an H2).
What to enter or choose: A short, benefit-driven sentence. Bold and italic allowed.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always.
Example: “Ready to start your project?”
Result: Large text in the banner.

Text

What it does: A supporting sentence.
What to enter or choose: One or two sentences.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Usually.
Example: “Tell us what you’re building — we’ll reply within one business day.”
Result: A paragraph below the headline. Empty text is hidden.
Good to know: If the headline, text and buttons are all empty, nothing is shown on the site.

Buttons

What it does: The actions.
What to enter or choose: Brigade Button blocks (or WordPress Buttons if the Button block is switched off).
How to use it: Click a button to edit it; use + to add another.
When to use it: Always — this is the point of the banner.
Example: A Primary and an Outline button.
Result: Buttons appear beside or below the text.

Settings panel: Call to Action

Layout

What it does: Text and buttons side by side, or buttons below the text.
What to enter or choose: One of: Text | Buttons, Stacked.
Default: Text | Buttons
How to use it: Click one of the buttons in the group.
When to use it: Split for wide banners; Stacked for narrow columns and centred designs.
Example: Split in a full-width band.
Result: With Split, the buttons wrap below the text when there is not enough room. Centre alignment always stacks.

Background

What it does: The banner background. Each colour background comes with matching, accessible text colours.
What to enter or choose: One of: Dark (ink), Brand (coral), Tint, Image.
Default: Dark (ink)
How to use it: Open the dropdown and pick an option.
When to use it: Dark or Brand to stand out; Tint for a softer prompt; Image for campaigns.
Example: Brand for a sale.
Result: The background and text colours change.

Background imageShown when Background is Image

What it does: The photo behind the banner.
What to enter or choose: Choose, replace or remove an image from the Media Library.
Default: 0
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: With the Image background.
Example: A team photo.
Result: The image fills the banner behind a dark overlay.

Image positionShown when an image is chosen

What it does: The point of the image that always stays in view (focal point).
What to enter or choose: Click the preview (or enter X/Y percentages).
Default: {"x":0.5,"y":0.5}
How to use it: Click the point in the preview that matters most, e.g. a face.
When to use it: When important parts of the photo get cropped.
Example: Click on a person’s face.
Result: The image is positioned so that point stays visible.

Image fitShown when an image is chosen

What it does: How the image fills the banner.
What to enter or choose: One of: Cover (fill, crop edges), Contain (whole image), Original size.
Default: Cover (fill, crop edges)
How to use it: Open the dropdown and pick an option.
When to use it: Cover for photos; Contain or Original size for patterns and illustrations.
Example: Original size + Repeat for a pattern.
Result: The image scales accordingly.

Repeat imageShown when Image fit is not Cover

What it does: Tiles the image.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Patterns.
Example: For a small pattern.
Result: The image repeats across the banner.

Fixed background (parallax)Shown when an image is chosen

What it does: Keeps the image still while the page scrolls.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For a subtle depth effect.
Example: On for a landscape photo.
Result: Parallax effect.
Good to know: Most mobile browsers show it as a normal background.

Overlay darkness (%)Shown when Background is Image

What it does: How dark the layer over the image is.
What to enter or choose: A number from 20 to 90 (%).
Default: 60 %
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Increase until the text is easy to read.
Example: 70 for a busy photo.
Result: The image darkens; the text stays white.

Eyebrow label

What it does: A small label above the headline.
What to enter or choose: One to three words, or empty.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: To frame the message.
Example: “Limited offer”.
Result: Shown above the headline.

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 Call to Action offers.

Element: Block

The banner — background, padding, corners, text colour.

Styles-tab controls for “Block”
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
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
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
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Eyebrow

The eyebrow label.

Styles-tab controls for “Eyebrow”
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
Colors	Text	—	Normal

States: Normal only.

Element: Title

The headline.

Styles-tab controls for “Title”
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
Colors	Text	—	Normal

States: Normal only.

Element: Text

The supporting text (also its max width).

Styles-tab controls for “Text”
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
Colors	Text	—	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Element: Buttons area

The area holding the buttons — gap, direction and alignment.

Styles-tab controls for “Buttons area”
Panel	Control	Per device	Available in states
Layout	Arrange content	Yes	Normal
	Direction	Yes	Normal
	Wrap	Yes	Normal
	Columns	Yes	Normal
	Justify content	Yes	Normal
	Align items	Yes	Normal
	Align content	Yes	Normal
	Gap	Yes	Normal
Spacing	Margin	Yes	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: 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 (%), Arrange content, Direction, Wrap, Columns, Justify content, Align items, Align content, Gap.

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.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

A <section> with the text and buttons. No JavaScript. Background images are loaded at full size.

Accessibility

The built-in backgrounds have been chosen so text meets WCAG AA contrast.
With an image background, raise the overlay until the text is clearly readable.

Tips and best practices

One primary action plus at most one secondary action converts best.
Use the Styles tab → Buttons area to change the gap between buttons.

Limitations and notes

Fixed (parallax) backgrounds do not work on most mobile browsers.

Overview

At a glance

When and why to use it

Example scenarios

See it in action

How to add the Call to Action block

Content settings

On the block (in the editor canvas)

Headline

Text

Buttons

Block toolbar

Align

Settings panel: Call to Action

Layout

Background

Background imageShown when Background is Image

Image positionShown when an image is chosen

Image fitShown when an image is chosen

Repeat imageShown when Image fit is not Cover

Fixed background (parallax)Shown when an image is chosen

Overlay darkness (%)Shown when Background is Image

Eyebrow label

Design & styling

Element: Block

Element: Eyebrow

Element: Title

Element: Text

Element: Buttons area

Responsive settings

Advanced options

How it works on your site

Accessibility

Tips and best practices

Limitations and notes