Use one Info Box instead of four separate blocks

TL;DR

If you keep stacking an Image block, a Heading, a Paragraph and a Button to make a card or a service panel, use Spectra's Info Box instead. It holds all four parts in one block, so the spacing stays even, the card moves as one piece, and you style it once.

What people usually do

To build a service panel or a team card, most people add four blocks one after the other: an Image, a Heading, a Paragraph and a Button. On screen it looks fine.

The trouble starts later. Each block has its own spacing, so the gap between the heading and the text never quite matches the next card. Moving the card means selecting four blocks and hoping none get left behind. When you want three cards in a row, you end up with twelve blocks to keep in line.

What to do instead

Spectra’s Info Box puts the image (or an icon), a heading, the text and a button inside one block.

1. In the editor, click the + and search for Info Box.
2. Choose an icon or an image, then type your heading and text straight into the block.
3. Turn on the call to action in the block settings, and choose a button or a text link.
4. Set the spacing once in the block’s settings. It stays the same everywhere you use the block.

Once one card looks right, duplicate it for the next two. The copies keep the same spacing and style, so all you change is the words and the picture.

Two extras worth knowing

You can choose where the image sits: above the heading, or to the left or right of the text. On a phone you can set it to stack, so a side-by-side card on a laptop turns into a neat column on a mobile.

You can also make the whole card clickable rather than just the button, which gives people on phones a much bigger target to tap.

Need two buttons?

Keep the Info Box and turn its call to action off. Add a Spectra Buttons block straight under it, where you can turn on a second button (or more) next to the first.

To keep the two together, put them inside a Spectra Container and give the Container a name in List View, such as “Service card: repairs”. Next time you can find it in a second. The same goes for a card that needs a list or a form: build it in a named Container.

Questions

Do I need Spectra Pro for the Info Box?

No. The Info Box is in the free Spectra plugin.

Can I turn my existing four blocks into an Info Box?

Not in one click. Add an Info Box next to them, copy the heading and text across, choose the same image, then delete the four old blocks. It takes a couple of minutes per card.

What if I want two buttons?

Still use the Info Box. Turn its call to action off, then add a Spectra Buttons block straight under it. The Buttons block lets you add as many buttons as you need, side by side.