A Complete Guide To Zero Block

Control each element. You can control each element of the block, including text, image, button, or background. Also, you can decide their position, size, and screen resolution on which they'll appear.

Layers. This is a convenient tool for creating depth with overlay and opacity techniques.

Screen edges and grid alignment. Each element of the website can be positioned relative to the layout grid or the edges of a screen.

Custom screen resolutions. Define custom screen resolution values to make your layout fit a specific device perfectly. Breakpoints can be set anywhere between 320px and 1920px for full responsive control.

Advanced typography. Designers have full creative freedom to create unique typographic solutions.

Guides. Use visual guides to have precise control over your layout. You can set them to appear only at selected screen resolutions, so you won't waste time hiding them when they're unnecessary.

Artboard zoom from 20 to 300%. This range makes it easy to work with elements on the artboard. Zoom in to adjust small details, or zoom out to see the entire artboard—for example, when you're working with many elements at once.

Flexible image positioning in shapes. Manually adjust which part of an image is visible inside a shape. This gives you more control over the block layout when the default positioning options don't fit your design.

Groups as objects. Combine multiple elements into groups to simplify setting up animations, editing and rotating elements, and more.

Opacity. Set the opacity level on any element and shadow effects below it. Adjust every parameter, such as composition or element visibility, for each screen resolution.

Plates. Add colored plates, content cards, or place images inside shapes.

Video. Add YouTube or Vimeo videos to your website. In Zero Block, you can adjust its size and position on the page.

Adding HTML. Add any element to Zero Block by inserting HTML code and adjust the positioning of these elements on each screen.

Tooltip. Use this interactive tool to add short pop-up prompts. You can personalize the color, shadow, size, select and upload an icon inside a circle, or an image above text.

Feedback form. Add input fields and data capture services. Set the style for the form and animate it.

Vector editor. Create and edit vector images right in Zero Block. Using Tilda's vector editor, you can create all kinds of shapes and edit imported SVG files.

Element appearance animation. Animate the way web elements appear on a page, such as fade in, zoom in, or slide from the top, bottom, left, or right of the screen.

Step-By-Step Animation. Use Step-By-Step Animation to make your page more engaging and dynamic. You can trigger animations on click, on scroll, on hover, or when an element appears on the screen. You can also adjust the easing for each step to control smoothness. Choose the right setting and fine-tune easing with Bézier curves.

Parallax scrolling. Use a parallax scrolling effect or create a parallax effect on mouse move.

Fixed elements when scrolling. Specify the distance for which the element should remain fixed and its location.
Apply sticky elements during scrolling. You can set the distance during which the element will be fixed and its position. You can also make the entire Zero Block sticky. This will allow you, for example, to create a fixed menu with a non-standard layout of elements.

Auto Layouts. Simplify your workflow by automating the alignment of elements within a group. Auto Layouts help you build designs faster, swap content easily, and automatically adapt layouts for different devices.

If you design layouts in a graphics editor before doing anything, use Zero Block to transfer them to your website as it is. For this, Zero Block offers a 12-column grid and customizable parameters for each element. These include coordinates, size, positioning in relation to the grid or screen, opacity parameters, and shadow. Use these tools to recreate your layout in Zero Block.

Zero Block's interface is similar to that of a graphics editor. Simply add the necessary elements and give them the appropriate coordinates. It's easy to do in Zero Block, especially if you've done it before. Use Zero Block to quickly transfer your idea from a graphics editor to your website without needing to write any code.

If you are creating a web page or a landing page and can't find the right block in the Tilda library, you'll find the Zero Block useful. Here are some examples.

Websites made on Tilda are often created with blocks, so visitors scroll down its sections. This is a unification trend in web design where content comes ahead of design.

If you want to change the way visitors read the information on your website, Zero Block is a great tool for that.

Zero Block works great for collecting elements with uneven edges into a single composition by making all distances visually similar.

In Zero Block, using layers is a breeze. You can easily overlap images, texts over a panel, and buttons on top of images. Create additional effects by playing around with their positioning.

To keep things simple when it comes to multiple elements, use Layers. This tool allows you to manage each element—change its position, hide or lock it.

To open the Layers panel, use these keyboard shortcuts: ⌘+ L or Ctrl + L (for Macs) or Ctrl + L (for Windows).

Zero Block allows users to create multi-element custom compositions such as texts, images, lines, panels, and buttons. You can also combine several elements into a single object. For example, you can design an article card and add a link to it. This kind of element group can be animated, spaced with margins, given a shadow, and customized with other settings. To create an object group, select several elements, group them, and in the Group settings, choose Object.

This landing page showcases Tilda's features that are especially helpful for businesses and consists of blocks containing multiple elements.

The hover effect changes the appearance of an element when the user points a mouse over it. You can use it as an additional design element or as a functional element of an article or infographics.

Perfect in situations where it's impossible to modify a pre-designed block the way you imagine it using its settings.

If you've selected a ready-made Tilda block and want to make some changes to it, use the Convert to Zero Block option. This will allow you to edit it as if it were a Zero Block. This option is available for the majority of Tilda blocks.

Let's break down this process into steps. For example, let's change the pricing block by positioning icons outside information panels.

Example of a block converted to Zero Block:

Tilda's pre-designed blocks offer plenty of settings. Add the most appropriate one from the library. Open the Settings panel and check whether you can adjust the template to suit your goal. It's possible that you won't need Zero Block at all.

The examples below are designed with Tilda's pre-designed blocks.

On Tilda, you can specify the paddings separately for desktops and mobile devices.

On Tilda, pre-designed blocks are arranged on a 12-column grid. You can define the indents as equal to any number of columns. If you designed your block in Zero Block without taking the grid into account, you won't be able to set the same indents for pre-designed blocks (you'll need to convert them to Zero Block).

Let's say you are alternating pre-designed and Zero Blocks in your website layout. While you can place elements wherever you want in Zero Block, this won't be possible in pre-designed blocks. So it's good to keep in mind that the ready-made blocks can only be positioned on the grid.

We recommend using a grid when designing your website in Zero Block. Position the main elements relative to the grid. This way, your design can be easily combined with all other Tilda blocks.

Select a preferred interface theme for the editor — standard, light, or dark. You can also reduce the size of the interface for each of them so that it takes up less space on the screen. Where to enable: Zero Block → click "Tab" → Zero Block Settings → Theme.

In Zero Block, you can add elements that are more complex than texts, images, shapes, and buttons.

Add and set up videos from YouTube, Vimeo, Kinescope, iFrame, or upload an MP4 or WebM file. Modify the size and aspect ratio of the video, its opacity, create shadows, and apply animation.

In the video settings, you can set automatic playback, enable and disable looping, set the start and end time for each video, and upload your own cover.

Add any element by embedding HTML. For example, interactive elements, online recording, music players, calendars, calculators, and social media posts. You can adjust the position of these elements on each screen.

A tooltip is an interactive prompt that appears when a mouse cursor is positioned over an element of a website. It could be useful if you are describing a complex subject and would like to describe its parts in a photo. For example, if you are selling cottages in a housing development, you can draw a map and mark each building on this map.

The tooltip comes with several handy settings: Adjust the color, shadow, and size, upload an icon that appears inside a circle, or upload an image that will pop up when hovered over.

After you've finished placing the elements/tooltips on the page, don't forget to check the position of each tooltip for all resolutions. Otherwise, the prompt will run the risk of being cut off from above, below, or the edges of the block.

Add a horizontal or vertical online form to Zero Block. Next, personalize every setting, such as input fields or data capture services, success and error messages, form styles, or animations.

In Zero Block, you can create and edit vector elements. For example, unusual shapes, icons, or small drawn elements such as underlines or arrows. The vector editor is also convenient for refining imported SVG elements directly on Tilda.

Each element can be assigned the coordinates relative to the four sides of a screen or a grid, the opacity, and shadow; you can also rotate elements or assign a link to them.

Rulers make it easier to work with layout elements. These are horizontal lines at the top and vertical lines on the left edge of the screen, from which you can "pull" guides. Rulers and guides help you set the desired arrangement of elements in the layout, monitor indents and alignment, and maintain constant sizes and proportions of elements. To enable rulers, go to Settings in Zero Block → Show Rulers.

Each element can be assigned a size in pixels or a percentage of the screen size. For example, if you wish to create an element that will take half of the screen regardless of its size, set up its width and height in %, not pixels.

Discover many surprises with Zero Block. Here's a list of effects you can use on your website.

Use a button for hover effects in Zero Block. You can make it any size you want, plus you can even make it round by adjusting the settings. Do you want it to be visible only on hover? Then make it transparent, and for hover, select 30% opacity and any color.

Position the button over the elements you want to cover with the hover effect. These could be images or text. If needed, assign a URL link to the button.

To lock an element while scrolling, change the image settings to Behavior — Fixed. This feature is available for background images and images inside a shape. If you apply this to an image inside a panel, the image will stretch across the entire screen. However, it will only be visible inside the shape. If several such shapes are used in a block, the image inside will be a continuation of itself.

You can combine fixed images and static images to create additional effects and unusual compositions.

If you'd like some elements displayed outside Zero Block and superimposed over adjacent blocks, use Overflow. Find it in the Settings panel in Zero Block.

In Zero Block, you can also set different parameters for the X and Y axes. This can be useful when you want to make cards that scroll horizontally without vertical displacement.

If you set X to "Hidden" and Y to "Visible/Auto," a vertical scroll bar will appear in Zero Block, and the block will be fixed until all content along the Y axis is displayed.

And if you set X to "Visible/Auto" and Y to "Hidden," content outside the canvas on the X axis will be displayed on horizontal scroll.

The Zero Block can be locked on the page so that it remains at the top or bottom of the page when scrolling. This is useful, for example, for creating a fixed menu with a customized design. To set up locking, go to Settings → Position and Overflow.

You can also make it so the block doesn't show up right away, but after a few scrolls (Appear Offset). In this case, you can use one of two appearance animations — Fade In or Slide Up/Down.

Zero Block includes five basic screen resolutions to modify the responsiveness of your website: 320px, 480px, 640px, 960px, and 1200px. You can extend this range by adding breakpoints. Breakpoints enable you to achieve the perfect layout for all website elements at specified resolutions. Flexible configuration can be useful, for example, when users visit the website on devices with irregular screen resolutions.

When designing Zero Block, it is essential to test how the website appears on all screens. You can do this directly in Zero Block by clicking on the image of the corresponding device.

Zero Block is designed so that each element on each screen can be customized individually. When you change the composition or content on one of them, the block may look different on screens with lower resolution due to differences in line length or element size.

When creating a Zero Block from scratch, remember to customize layouts for each resolution manually. Keep this in mind before publishing the website.

If your entire website is designed in Zero Block, it is more convenient to break it down into separate blocks. This way, you can disable blocks for low-resolution screens or temporarily disable them for the entire website.

If you use a lot of details on a large screen, you can make the layout simpler and more concise on screens with lower resolution for ease of perception.

Here's an example of a unique visual composition for each screen size:

If you don't like the adaptive design and want to start from scratch, you can clear the settings for elements for lower screen resolutions. To do this, select one or more elements → right-click to open the context menu → Clear Adaptive Design.

Auto Layouts in Zero Block is a design technique that allows you to quickly create layouts, change content, and adapt the design to different screen resolutions. It is convenient for creating elements such as cards, buttons with multiple elements, menu items, and others. See the guide to setting up Auto Layout in the Help Center.

Auto Layouts control the placement of elements in a group relative to each other. Once the direction and distances are set, they automatically align according to these rules, regardless of changes in the group's content. For example, if you need to add another image to a group when creating a gallery, it will “fit” according to the specified rules — you won't need to move other elements of the group manually.

Check out the tutorial on using Auto Layouts:

You can animate each element as it appears in Zero Block. There are six types of animations:

Each type of animation includes its own settings. Let's take a look at them.

Duration is the length of the animation in seconds. The higher the value, the slower the animation.

Distance is the space between the initial position of an animated element and its final position. It is specified only for the animations where objects appear from the sides.

Scale is the size of an element at the beginning of animation as a percentage of the original size. This parameter is set when a scale-up or a scale-down occurs. If the value is greater than 100, the element is bigger from the start, and it scales down to its original size. If the value is less than 100, the element is scaled up to its original scale.

Delay is the delay of animation playback, in seconds. If the value is 0, the animation will start as soon as the block appears on the page.

When should you use delay? It can be helpful if another object overlaps with or crosses out a significant element. If there are several animated objects on one page, assign different delay settings to each element. This allows you to direct the viewer's eye, leading them from one element to the next.

Trigger Offset is the distance, measured in pixels, from the bottom edge of the screen where the element appears on the page. By default, the animation begins as soon as the element crosses the bottom line of the page. If you'd like to delay the animation until the element is visible to the viewer (and not at the very bottom of the page), set the distance from the bottom edge at which the animation will begin. If the object is initially located at a shorter distance than the value of this parameter, it won't be visible until the user scrolls down.

Once you've set the necessary parameters, check the animation right in the editor. To see the animated element in action, click "Play Element" for a single element, and "Play all" for several elements and want to see how they are working together.

With Step-By-Step Animation, you can assign sequential transformation steps to any page element and allow visitors to interact with them.

To add a Step-By-Step Animation to an element in Zero Block, select the element, open its settings, and navigate to the Step-By-Step Animation section (located at the end of the element settings).

Elements appear and move when the visitor is scrolling up or down the page.

All the animation examples below are available as templates, so you can add them to your projects and use them as you like.

Animation on scroll examples:

This type of animation is triggered when an element appears on the screen.

Element on Screen — animation is triggered when an element crosses the bottom of the browser and appears on the web page.

Block on Screen — animation is triggered when a Zero Block with the element crosses the bottom of the browser and appears on the web page.

This type of animation is triggered when a visitor hovers over an element.

This type of animation is triggered when a visitor clicks on the element.

Each type of animation has additional settings:

Start Trigger is an event that triggers the animation. Choose between Window Top, Window Center, and Window Bottom.
A Window Bottom trigger is set as a default; animation will start as soon as it crosses the bottom of the browser.

Trigger Offset is the distance in pixels from the selected Start Trigger. The animation starts once that distance is scrolled.

Loop is a parameter that allows you to repeat specified steps indefinitely. You can either repeat the animation an infinite number of times (set Loop with Reverse) or play the animation only once (set Loop Once).

Easing sets the smoothness of the animation. On Tilda, you can choose one of 29 types of easing that will affect the display of the configured animation. The selected smoothing type can be changed using the Bézier curves.

You can test the resulting animation using the Play Element (see the animation of the selected element) / Play All (play the animation of all elements in the block) buttons. This option is available for all types of animation except animation on scroll.

For convenience, you can work on the animation in two browser tabs: Edit the Zero Block in one and open the page preview in the other. This allows you to quickly check the result without leaving Zero Block. Before testing the result, don't forget to save your changes in Zero Block and refresh the preview page.

When you use Step-By-Step Animation, you can add steps and customize the properties of each of them. This will trigger changes in the parameters of each selected element on your web page. Create a trajectory and movements of your elements on the page based on several steps.

To change the initial state of an element—if you want it to be invisible in the beginning, for instance, set the opacity to 0 and the duration to 0 seconds or 0 pixels (for animation on scroll).

Using the step settings, you can change the properties of the element to which the animation is applied.

You can set the position (Move), size (Scale), transparency (Opacity) of the element, and the angle of rotation of the element (Rotate).

Parallax on scroll. When you apply this animation to an element, its movement speed will differ from the speed of other elements when scrolling the page. In the settings, you can set its movement speed — at a low speed from 0 to 100, it will move slower than the scroll, at a high speed from 100 to 200, it will move much faster.

Parallax on mouse move. An element with this animation type moves in the opposite direction to the cursor movement. Its vertical and horizontal movement range can be set in the settings.

This type of animation allows you to lock elements while scrolling. In the Settings, you can specify the distance within which the elements stay fixed at a specific position (locking only occurs within the block). After scrolling to the specified distance, the element will no longer be fixed and will scroll along with other elements on the page.

The settings also allow you to specify what will trigger the lock—the top edge of the window, the bottom edge, or the centre. Trigger Offset allows you to control the distance from the edge of the window, ensuring that the element does not stick to it. It is also useful when you want to lock several elements at once at a certain distance from each other.

If you use animation in your project, don't overload the page with too many effects; it's usually sufficient to animate 20–30% of the content. Excessive animation looks intrusive and annoying, and it also slows down the page loading speed.

If you are creating a block from scratch, it's worth designing the entire page first to see how this block compares with the others. Once you've done that, don't forget to configure its adaptability settings. If you are translating text in Zero Block and simply changing it, check how it looks on every screen version, even if everything looks good on the first screen. Due to different font sizes and the length of the line, the text can look different on different screens.

If you'd like to have two elements remain in the same position relative to one another, no matter the screen resolution, set the positioning of the elements as Grid Container or Window Container.

Learn more about setting up elements' positioning in the Help Center:

If you are positioning the text relative to the grid and want it to always remain within the screen, ensure that its container doesn't go over the grid area. Creating a neat layout is a good habit: This way, you will avoid any unpleasant surprises when the block is published.

Use Zero Block for creating impressive websites and innovative typographical solutions. It is a useful tool for your design solutions. Add personality to your website with special effects, typography, and out-of-the-box design. It's all in your hands now!