How blocks work
How blocks work in Tessolo: sections, nesting, the settings nearly every block shares, entrance animations, anchors, and which block to use.
Everything on a page is a block. A heading is a block. So is the band it sits in.
Sections hold everything
A Section is a horizontal band across the page. Background, spacing and full-width behaviour all live there, and everything else goes inside one.
A page is a stack of sections, top to bottom. If you're wondering where to put a background colour or how to control the space above and below something, the answer is nearly always "on the section".
Nesting
Blocks go inside blocks. A typical three-card row:
Understanding the nesting is what turns "the spacing is wrong and I don't know why" into "the padding is on the box, not the grid". The Layers panel shows it as a tree.
Some blocks only fit in specific places — a Slide inside a Carousel, an Input inside a Form, a Field inside a collection list or detail template. Drag one elsewhere and the editor won't let it land.
Settings nearly every block shares
Beyond its own content, most blocks have:
- Layout — alignment, width, spacing
- Style — colours, size, corners, shadow
- Motion — entrance animation and scroll effect
- Advanced — anchors, hiding on a breakpoint
Which is why the right panel always looks familiar even on a block you've never used.
Entrance animations
Under Motion, Entrance animation plays once when the block scrolls into view: fade, float up, drop down, slide from either side, zoom, blur focus, curtain reveal, light sweep.
The ten options are tiles, not a dropdown, and each tile demonstrates its own effect on a loop — so you can tell "float up" from "drop down" without applying either. Picking one plays it once on the selected block, right there on the canvas, and Play again at the top of the Motion section replays it. Nothing else on the page moves.
The last two are worth knowing about because they read differently from the rest: curtain reveal widens the visible area from the bottom up without fading anything (the content was always there, you just see more of it), and light sweep passes a soft band of light across the block. Both are common on portfolio and brand openers.
There is no separate "apply" step: the tile you click is already saved, and ⌘Z takes it back.
Delay staggers a block against its neighbours. Stagger children makes the children of a container appear one after another — the right way to animate a row of cards.
Scroll effect — tiles as well — keeps changing as the visitor scrolls rather than playing once: drift up, grow in, or depth layers (front and back moving at different speeds). Amount appears once you've picked one.
Restraint pays here. One or two animated sections on a page feels considered; every section animating feels like a slideshow. Visitors who've asked their device to reduce motion see none of it, and the content is always there regardless.
Anchors
Blocks can be linked to directly, so a button can scroll to a section further down the page. The name is generated from the first heading in the block, and you pick the target from a list when setting up the button — you never type an address.
Which block for what
The blocks reference covers each category. Hovering any block in the Add panel gives you the same one-line description.
Shortcuts and the command palette
Keyboard shortcuts and the command palette in the Tessolo editor — the handful worth learning for editing, selection and view.
Layout blocks
Tessolo's six layout blocks — Section, Box, Stack, Grid, Spacer and Divider — plus sticky boxes, and when to use each one instead of spacing.