Tilda Zero Block: Custom Layouts and Animation Guide

What Zero Block is and when to use it

Zero Block is a Tilda block in which you place the elements yourself: text, images, shapes, buttons, video, HTML code. It is the right tool when the library blocks cannot give you the composition you need: a custom hero screen, a complex grid, an illustration with captions, an animated diagram.

If a standard block does the job, use it: it is already responsive and needs no manual tuning per screen size. Zero Block gives you freedom, but it also hands you full responsibility for the mobile version.

Artboard and containers

Open the editor with the "Edit block" button. The foundation is the artboard, the block area. Its settings define height, background, spacing and behavior at different window widths.

Each element has a container it is positioned against:

• Grid container — the central fixed-width grid. Best for main content: text and buttons stay in a readable area on any monitor.
• Window container — the whole browser window. Best for background elements and decoration that should stick to the screen edge.

Position can be set relative to the left edge, right edge or center, in pixels or percent. Percentages suit large decorative backgrounds; pixels and grid alignment suit text.

Artboard height can be set as a percentage of the window height, which is how full-height hero screens are built. Keep in mind that on phones the window height changes as the address bar hides during scrolling.

Responsiveness: breakpoints

Zero Block stores a layout for several resolutions: the desktop width and smaller ones for tablets and phones, down to 320 px. The resolution switcher is in the editor's top bar.

How inheritance works:

1. Build the desktop layout first.
2. Switch to a smaller resolution: elements inherit settings from the larger one.
3. Changes on a smaller resolution do not affect larger ones.
4. Hide elements you do not need on a given screen instead of deleting them — deleting removes them everywhere.

A checklist for each breakpoint:

• text does not overflow the edge or overlap other elements;
• the font size is readable on a phone;
• buttons are large enough to tap with a finger;
• artboard height fits the content with no empty space at the bottom;
• nothing causes horizontal scrolling.

Animation: basic and step-by-step

Basic animation is an appear effect triggered on scroll: fade, slide, zoom. You set the type, duration, delay and offset. It works well for gently revealing text and cards.

Step-by-step animation is a sequence of steps, each changing position, opacity, scale or rotation. It is started by a trigger:

• when the block enters the viewport;
• on scroll, with the animation tied to scroll position;
• on hover;
• on click.

The workflow:

1. Select an element and enable step-by-step animation.
2. Choose a trigger.
3. Add steps, each with a duration and the properties it changes.
4. Enable looping if needed.
5. Check the result in preview, then on the published page.

Animation tips:

• Animate offset, opacity and scale — these usually run more smoothly than changing an element's size.
• Do not animate everything: when ten elements move at once, attention scatters.
• Hover effects do not work on touch screens, so important information should never be hidden behind hover.
• Test animation on a real phone: an emulator will not reveal how weaker devices behave.

Mistakes that break mobile layouts

• Only the desktop layout was built. On small screens elements overlap or run off the edge.
• Text as an image. Search engines cannot read it, it blurs and does not scale. Use text elements.
• Fixed height for a text element. If the font loads with different metrics or the text gets longer, it overlaps its neighbors.
• Decoration in the Window container left unchecked. On a narrow screen it can cover the content.
• Heavy images. Compress images and do not upload multi-megabyte originals.
• Too many elements in one block. Such a block is hard to maintain; split it into several Zero Blocks.
• Scroll-driven animation on a tall block can stutter on weak phones — simplify it for mobile resolutions.