Blocks

The Blocks tab (the grid icon in the left sidebar) gives you a library of pre-built, full-page sections — heroes, features, pricing, testimonials, galleries, footers, and more. Each block comes from a real template and takes on your site’s colours and fonts when you add it.

This is different from the Components tab, which contains individual elements (Heading, Image, Navbar, etc.).

Browse blocks

Open the Blocks tab. It opens as a wide panel over the canvas, so you can see the blocks large. On an empty page it starts on Hero.

• Categories run down the left in page order: Navigation, Page title, Hero, … Footer. Click one to see only those blocks, or All for everything.
• Search across every category by what a section is (“pricing”, “map”, “team”).
• Any template narrows the list to blocks from one template.
• Light / Dark shows the previews in either colour mode. Your page stays as it is.

Each card shows a short title (“Three-tier plans”) and the template it comes from.

To keep the blocks open beside the canvas while you work, click the pin at the top of the panel. It then stays as a narrow column. On small screens it is always a column.

Press Esc, click the close button or click the canvas to close the panel.

Browsing blocks by category and searching

Preview a block

Open a card’s ⋯ menu and choose Preview to see the whole block. Use the arrows to step through the blocks in the same list, and Insert to add the one you’re looking at.

Opening the full preview for a block

Insert a block

Click the card. The block is added after the section you have selected, or at the end of the page if nothing is selected. With a column selected, it goes inside the column instead. The panel closes, and Swebsy selects the block and scrolls to it.

Drag it onto the canvas. The panel gets out of the way while you drag, and a line shows where the block will land.

1. Open the Blocks tab.
2. Pick a category, or search for the section you want.

3. Click the card to add it after the selected section (or at the end of the page), or drag it onto the canvas to place it exactly.

Adding a block from the panel

Expected result

The block is on the canvas in your site’s colours and fonts. Anything special it needs, like a template’s chip buttons or animations, comes with it: you’ll see that styling added to Theme → Advanced → Custom CSS under a “Blocks from …” comment. Once no page or symbol uses that CSS any more, it is removed. CSS you edited in that chunk stays.

Use the template’s look

A new site still has the default theme, so the first block you add won’t look like its preview. After you click a block onto such a site, the message offers Use (template)’s look. That gives your whole site the template’s colours and fonts, so the block looks the way it did in the panel. Click Undo in the next message to go back.

The offer only appears while your site has no theme of its own. Once you’ve picked colours or fonts, blocks always follow them. You can change the theme any time in the Theme panel.

After inserting

Once a block is on the canvas it behaves like any other content: select the parts inside it, edit text inline, swap images, change colours in the Design panel, and reorder or delete in the Layers tab.

Common issues

Block catalog is empty — the catalog is bundled with the app. If you see no blocks, try refreshing the page. If the problem persists, check your network connection and reload.

Block doesn’t look like its preview — blocks take on your site’s colours and fonts. On a site with the default theme, use Use (template)’s look right after adding it, or set your colours in Theme tokens.