How blocks work

Start hereBuilding with blocksHow blocks workEvery page on your site is built from blocks: headings, pictures, buttons, and the boxes that hold them. This page explains how they fit together, so the editor's settings make sense.A page is blocks inside blocksSome blocks show one thing: a Heading, an Image, a Button. Others are containers: they hold other blocks and decide how those are laid out. A Section holds a Grid, the grid holds Cards, and each card holds a picture, a heading and a button.You add a block by dragging it from Add block onto the page, either into a container or between two blocks. The Layers panel shows the same page as an outline, which is the easiest way to pick a block that sits inside another one.Click any block to select it. Its settings appear on the right, under the block's name. Every block also has Bottom spacing and Motion at the foot of its settings, explained below.Grids, tabs and accordions are made of cells, tabs and sections. You drop blocks into those, and change the layout on the grid, tab set or accordion itself, not on the cell.A selected Section, with its settings and the blocks inside it.Sections: the bands of a pageMost pages are a stack of Sections, one for each band you see as you scroll: a photo at the top, a row of services, a dark band with a call to action. A section's background always runs the full width of the screen. Its contents stay in a tidy column in the middle.

Vertical padding: the space above and below the contents. Bigger steps make a roomier band.

Content width: how wide the column of contents can grow, from SM up to XXL. Full width uses the whole screen but keeps a small margin at each side; Edge to edge drops that margin too.

Align content: left, centre or right.

Background: a Solid colour or a Gradient between two colours.

Pattern / background image: a photo or pattern behind the band. Image mode chooses tile (repeat it) or cover (one photo filling the band), and Photo position chooses which part of a photo stays in view.

Background video: a short, muted, looping video behind the contents. Add a background image too; it shows before the video plays, and to anyone whose device asks for less motion.

Light and dark bands, and text over photosText tone tells a section whether its background is light or dark. Set it to dark on a dark colour or a dark photo, and the text, borders and cards inside switch to your theme's colours for dark backgrounds, so they stay readable. A main button in a dark band swaps its colours too.Words over a busy photo need help to be read. Overlay scrim lays a colour over the photo but under the text; choose a colour, then set its Scrim shape and Scrim strength. Letter halo puts a soft outline round the letters instead, without darkening the picture.Image opacity fades the photo into the band's colour. It does not make text easier to read; the scrim does that.A photo band's settings.Grids, rows and cardsA Grid puts blocks side by side in columns. It works in one of two ways, chosen under Layout:

Placed: a fixed number of columns and rows. Press Edit grid layout to change them, or to make a cell span more than one column or row.

Deck: cells flow in order and wrap onto new rows, however many there are. Use it for a gallery or a long list of cards. Under Columns per breakpoint you can show a different number of columns on smaller screens.

With Stack on mobile on (the normal setting), the columns sit one above another on screens narrower than 768 pixels, which covers phones and small tablets. Turn it off only for something that must stay side by side, like two small icons.A Flex row lines blocks up in a row (or a column), and wraps them onto the next line when the screen runs out of room. It is what a header uses for the logo and menu. Collapse into a menu folds a row behind a ☰ button on small screens.A Card is a box with padding, a background, rounded Corners and an optional Shadow. Put cards in a grid for a row of services or team members. Match the height of its row lines a row of cards up along the bottom, and Link (whole card) makes the whole card clickable.Use the phone button above the canvas to see how your grids and rows stack before you publish.Spacing comes from your themePadding and gaps are chosen as steps (none, xs, sm, md, lg and so on), not measured in pixels. The real size of each step is set by your theme, under Spacing on the Themes screen. Change it there and every block on the site follows.Bottom spacing is the gap under a block. Left on Theme default, it uses the gap your theme sets for that kind of block (the theme's Block spacing). Pick a step to change it for this one block only.The same idea runs through every setting: a blank setting means "use the theme". Leave things blank unless this block really needs to be different.Colours: theme colours or a fixed colourEvery colour setting offers a row of small swatches first: Primary, Secondary, Accent, Foreground, Muted, Background, Card and Border. These are your theme's colours. Pick one and the block follows the theme: change the theme's primary colour later and the block changes with it.Next to the swatches is a colour picker for any exact colour. A colour picked this way is fixed: it stays that colour whatever the theme does. Clear takes the setting back to blank, which means the theme's own choice for that spot.Fixed colours are how a site slowly stops matching its theme. Use a theme swatch wherever one will do, and save exact colours for the rare block that truly must not change.MotionAny block can move a little. Under Motion in its settings:

On hover: what happens when a visitor's pointer rests on it, such as Lift, Grow or Glow. Good for cards and buttons.

When scrolled into view: how it arrives, such as Fade in or Fade up. On a grid or row, Reveal children one after another brings each card in just after the last.

Always (loop): a gentle repeating movement, such as Float or Pulse. Use sparingly.

Strength, Speed and Delay fine-tune the effect.

Scroll and loop effects only play on the live page, not on the editor's canvas; use Preview in the editor's toolbar to see them. Anyone whose device asks for reduced motion sees none of it, and the page simply shows still.← Search engines and sharingEvery block, explained →Getting startedPagesBuilding with blocksNavigation and lookMediaForms and leadsCatalogueShopBookings and membersRunning the siteCairnWebsites for businesses that need more than a brochure. Built, hosted and kept running by us.StartBuildRun© 2026 Cairn. All rights reserved.Built with Cairn.