Skip to main content

Content blocks: Design your sections your way with the Advanced layout

How to use the new Advanced layout on content blocks to control columns, spacing, colours, images and text — with per-device settings.

Your content sections now come with an Advanced layout option that gives you much more control over how each section looks — the spacing, the columns, the colours, the images and the text. If the standard layout has ever felt a little too "fixed", this is for you.

You don't need to know any code. Everything is done with simple sliders and menus, and you can see your changes live as you make them.

Turning it on

  1. Open your website in the Editor.

  2. Click the section you want to change to open its settings.

  3. Find Type Of Layout at the top of the settings panel.

  4. Switch it from Basic to Advanced.

That's it — a new Design Content Blocks button appears. Click it to open the design controls.

The three tabs

The design panel is split into three tabs, so you always know what you're styling:

  • Section — the whole section (the big container and the space around it).

  • Content — the row of cards: how many columns, how wide, how they line up.

  • Blocks — each individual card: its spacing, colours, image, title and text.

What you can change

Layout & columns

  • Choose how many columns of cards appear in a row.

  • Set the container width — keep it tidy and centred, or go full width.

  • Decide how cards line up — centred, to one side, or spread evenly across.

Spacing

  • Adjust padding (space inside) and gaps (space between) at every level — the section, the row, and each card.

  • Set different spacing for each device — phone, tablet, laptop and desktop — so it looks great everywhere. Just click the little arrow next to a spacing slider to set a value for a specific screen size.

Cards

  • Add rounded corners, a border, and a shadow (we call it Elevation) to make cards stand out.

  • Set a minimum height so cards stay even.

  • Pick the background colour and text colour.

Images

  • Place the image left, right, on top of, or filling the card.

  • Choose its shape (square, portrait, landscape, widescreen…).

  • Control how the image fills its space and which part stays in view.

Text & buttons

  • Set font sizes, spacing and colours for titles and body text separately.

  • Adjust the width and spacing of the action button.

Style one card differently

  • Set the look for the whole section once — then open any single card and click Design Block to give just that card its own spacing, colours or image style.

  • Changed your mind? Reset to defaults on that card puts it back to match the rest.

Tips

  • Start small. Change one thing, look at the preview, then move on. The live preview updates as you go.

  • Check it on mobile. Use the phone/desktop toggle at the top of the editor to see how your section looks on smaller screens, and use the per-device spacing if anything feels too tight or too loose.

  • You can always go back. Switching to Basic, or clicking Cancel before you save, undoes your changes.

When you're happy, click Save — and your newly designed section is live.

Did this answer your question?