TessoloTessoloDocs
TessoloTessoloDocs
TemplatesPricingChangelogSign inTessolo documentation

Guides

How blocks workLayout blocksContent blocksImage hotspotsMarketing blocksTimelines, charts and linksMotion and decor blocksHeader, footer and site blocks
Blocks

Content blocks

Heading, Text, Rich text, Image, Video, 3D model, Icon, Button, Link, Badge, Embed.

The blocks that carry what your page actually says.

Heading

Heading text, with a level from the largest down to the smallest.

Levels aren't just size. They're the outline of your page — one main heading at the top, then sub-headings under it. Screen readers use them to navigate and search engines use them to understand structure. Don't pick a level because of how big it looks; pick the right level and change the size separately.

There are optional effects — gradient text, aurora, a highlighter, typewriter, line-by-line, word-by-word and letter-by-letter reveals, a decoding scramble, rotating words, sparkles. Text effect opens a gallery where every tile demonstrates itself, so you pick by looking rather than by guessing what "aurora" means. One per page, on the heading that matters, or they stop meaning anything.

For anything longer than a few words, reach for Lines rise first. Each line comes up from behind a crop, one after another, and the sentence stays whole while it does — people can read it as it arrives. Letter-by-letter is the opposite: it looks busy and the reader waits for the animation to finish before they know what it says. Keep that one for four to eight characters.

Lines rise splits on the line breaks you type. Press Enter in the text where you want each line to start, and that's exactly where it splits — it doesn't guess from the width of the screen. Type it as one long line and the whole heading rises as a single block, which is fine.

Text

A paragraph of body text. The plain one you'll use most.

Rich text

Long-form formatted text: bold, lists, links, images, sub-headings. Opens a small toolbar when you edit it.

Use it for article bodies and long descriptions. For a single line, plain Text is easier to style and can't pick up stray formatting from a paste.

Image

An image, with aspect ratio, corner radius and hover effects. It can link somewhere.

Every visitor automatically gets a version sized for their screen — upload the original. Fill in the alt text; see alt text.

Images placed directly in a section can run the full width of the screen, and you can give phones a different picture — see a different image per device.

You can also mark several clickable regions on one picture — see image hotspots.

Video

An uploaded file, or a link from YouTube (including Shorts and stream replays), Bilibili (a specific part of a multi-part video works too), Vimeo or Loom. Short and decorative: upload. Long and watchable: link. See video, files, fonts and Lottie.

Short links from a phone's share sheet — b23.tv/… — can't be expanded for you. Open one in a browser first and copy the full address out of the address bar.

A link Tessolo doesn't recognise shows nothing at all on the published page rather than an empty black box, and the pre-publish check names the block before you publish.

Icon

A single icon. Good above a feature heading or beside a list item. Can be outline or filled.

Button

The block that makes something happen. Its action can:

  • Go to a page or link — internal page picked from a list, or an external address
  • Open a file — a PDF, price list or spec sheet from your media library. Opens in a new tab; if the file is later deleted the pre-publish check tells you
  • Scroll to a section — pick the target from a list, no addresses to type
  • Copy a piece of text — a contract address, an invite code, a payment account
  • Submit a form — required for a form to work

Write what happens next: "Start free trial", "Book a call". "Learn more" is what you write when you haven't decided.

Style opens the same kind of gallery, with plain styles first and animated ones below. Magnetic is worth knowing about: the button leans toward the cursor as it gets close and springs back when you leave. It reads as "this is the thing to click" — which is why it works on exactly one or two buttons per page and looks nervous on all of them. It does nothing on phones (there's no cursor to lean toward) and stays still for visitors who've asked their system to reduce motion.

A button with no link is the most common pre-publish check finding — it usually came from a template.

Style is a gallery of live tiles: five plain looks (primary, secondary, outline, ghost, link) and six animated ones (shimmer, rainbow border, pulse, ripple, shine, hover fill). The animated ones are for the single button you actually want clicked. Two competing on the same screen cancel each other out.

Link

A text link. Use it for a secondary action beside a button, or a link inside a sentence.

Badge

A small tag — "New", "Limited", "Best seller". A little goes a long way; three badges in one card mean nothing stands out.

Embed

A third-party page or snippet: a map, a booking calendar, a form from another tool, an interactive product demo, a Spline scene. For the common services you only paste a link — pick the service under What to embed and the height takes care of itself.

You'll find it in the Embeds group of the insert panel, next to the ready-made sections.

Only appears on the published site. See custom code and embeds.

3D model

A model visitors can spin. Upload a .glb file to Media and pick it — the same way you pick an image. Good for a product, a piece of hardware, packaging, a collectible.

Auto-rotate is on by default, with three speeds. Visitors can drag to rotate is on too; visitors can zoom is off on purpose — when zoom is on, the mouse wheel over the model zooms it instead of scrolling the page, which strands people halfway down a long page. Turn it on for a model that is the whole point of the page, leave it off elsewhere.

Always set a cover image. It is what shows before the model loads — and it is the only thing that shows in template thumbnails and when you export the page as an image, a PDF or a web page. The pre-publish check will remind you.

Export as .glb, not .gltf. A .gltf file keeps its textures in separate files next to it, and those cannot come along — you would get an untextured white model with no clue why. In Blender: File → Export → glTF 2.0, then pick "glTF Binary (.glb)".

Models are heavy. A 25 MB file takes about twenty seconds on a phone on 4G, so keep them small (under 8 MB is comfortable), and don't put more than two on one page.

Marketing blocks

Countdown, carousel, marquee, counter.

Timelines, charts and links

Timeline, allocation chart, social icons, copyable text.

Image hotspots

Several links on one picture.

Alt text

The field on every image.

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.

Image hotspots

Several clickable regions on one picture, each linking somewhere different.

On this page

HeadingTextRich textImageVideoIconButtonLinkBadgeEmbed3D model