Brigade Blocks Docs v1.1.0

Start here

Getting Started

Build your first section with Brigade Blocks — a heading, text and a button inside a styled container — and learn the three places where every setting lives.

Before you start

  • WordPress 6.5 or newer and PHP 7.4 or newer (see Requirements).
  • The plugin is installed and activated (see Installation & Activation).
  • You edit pages with the Block Editor. If your site uses the Classic Editor plugin, blocks are not available.

The three places where settings live

Every Brigade block is configured in three places. Knowing them makes every guide in this documentation easy to follow.

  1. On the block itself (the canvas). Click text to type it — headings, button labels, captions. Many blocks show their content right where you edit it.
  2. The block toolbar. The small bar above a selected block: alignment, heading level, “Replace” for images, and similar quick actions.
  3. The sidebar. Open it with the gear icon (top-right). It has two tabs:
    • Settings — what the block shows and how it behaves (for example the button style or the number of posts).
    • Styles — how every part of the block looks: colours, typography, spacing, borders, shadows, layout, per state and per device. See Styling Controls.
    At the bottom of the Settings tab, Advanced holds the HTML anchor and additional CSS classes.

Build your first section

We will build a centred “call to action” section: a coloured band with a heading, a sentence and a button.

  1. Create a page. Go to Pages → Add New Page and give it a title.
  2. Add a Container. Click the blue + in the top-left corner, type Container and click it. In the layout picker, choose Centered. (Container guide)
  3. Add a Heading. Click the + inside the Container, search Heading and insert the Brigade Heading block (coral icon). Type “Ready to start your project?”. In the Settings tab, type Let’s talk in Eyebrow label and switch on Accent separator. (Heading guide)
  4. Add the description. Click the description line under the heading and type “Tell us about your idea — we reply within one business day.”
  5. Add a Button. Insert the Button block below the heading. Replace the text, then open the Link panel and enter your contact page address. (Button guide)
  6. Style the Container. Select the Container (use the “Select parent” arrow in the toolbar, or the List View). Open the Styles tab → Background and pick a light colour; then Spacing → Padding 64px on all sides.
  7. Add a hover effect. Select the Button, open Styles, keep Element: Button, switch State to Hover and choose a darker background under Colors. The canvas previews the hover state while you edit it.
  8. Check phones. Select the Container again, set Device to Mobile and reduce the padding to 32px. Values you leave empty on Mobile keep the desktop values. (Responsive guide)
  9. Publish. Click Publish and view the page.

Tip: save the finished section as a pattern (block menu ⋮ → Create pattern) so you can reuse it on other pages.

Finding Brigade blocks

  • In the inserter, Brigade blocks are listed in the Brigade Blocks category and have a coral icon.
  • Type part of the name (e.g. “accordion”) — search also finds blocks by keywords.
  • Type / on an empty line followed by the block name to insert it without the mouse.
  • Some blocks only live inside another block (for example an Accordion Item inside an Accordion); they appear in the inserter only when the parent is selected.
  • If a block is missing, its module or the block itself may be switched off — see Plugin Settings.

Next steps