Content Builder: Blocks and layout
Content Builder: Blocks and Layout
A page in the content builder consists of blocks placed one below the other. Each block has its own settings, and all blocks share a common layout for spacing, borders, and which devices they are displayed on.
Add a block
Between the blocks is a button. Click it, select Add block, and choose the block you want. On an empty page, you can also let AI build the page from a description.
The blocks
Block | Used for | Key settings |
|---|---|---|
Text | Text with headings, lists, and links | Background color, text color, alignment, spacing. You can open a larger editor |
Image | A single image | Upload or paste link, alternative text, link, width (10–100%), alignment, corner radius |
Video | YouTube or Vimeo | Video link, format (16:9, 4:3, 1:1, or 9:16), autoplay muted, loop, show controls |
Image grid | A gallery of up to 30 images | Images per row (2–6), spacing, shape (keep shape or square) |
Slider | Up to 8 slides with image, heading, text, and button | Height, darker image behind text, arrows and dots, text color |
Button | A link button | Text, link, colors, corner radius, font size, alignment |
Spacer | Empty space between blocks | Height |
Divider | A horizontal line | Color, thickness, width |
Columns | Places blocks side by side | 1–4 columns, spacing, background color, how columns stack on mobile |
Accordion | Collapsible questions and answers, up to 30 | Title and content per item, first item open, colors |
HTML / AI | A custom section designed by AI | See Content Builder: AI in the builder |
Read more | Only in blog posts | Separates the introduction from the rest of the post |
You can only use video from YouTube and Vimeo.
Columns
Columns are the only block that can contain other blocks. You cannot put columns inside columns. Under On mobile, you choose whether the columns are stacked below each other, stacked with the last column first, or remain side by side.
Read more in blog post
In a blog post, the blog overview shows the blocks above Read more, with a link to the full post. Use it once, right after the introduction.
Layout for all blocks
Each block has a section called Layout
Setting | Option |
|---|---|
Show on | All devices, desktop and tablet only, or phones only |
Spacing above and below | Space above and below the block |
Border | Border line, line style (solid, dashed, or dotted), color, and corner radius |
A block that is hidden on some devices is still shown in the editor, with a label indicating where it is displayed. In the preview, you see the page as it will appear on each device.
The settings panel
The panel on the right has two tabs:
- Inspect shows the settings for the block you have selected.
- Global applies to the entire page: background color, text color, content width (320–2000 px), and font.
You can hide and show the panel with the button at the top. If a color field is left empty, the block uses the color from Global
Your brand colors
If your template uses colors from the design builder, the brand colors in the content builder will follow them. If you change a color in the design builder, it will also change here. If the template does not use design builder colors, the brand colors will show the color they currently have.
Pages with fewer blocks
The contact page can only have the Text block. Other blocks and AI suggestions with other blocks will be removed when you save.
💡 Classic content
The block Classic content is only shown on pages that have been moved from the classic editor, and you cannot add it yourself. Read more in Content Builder: Move a page here.