A complete guide to Zero Block

How to create your own design using our Zero Block web design editor

Zero Block is a tool for creating uniquely designed blocks on Tilda. Position each element, change its parameters depending on your screen size and design a new block for your website.
Contents

So, what's so good about Zero Block?

Control each element. You can control every element of the block such as text, image, button or background. Decide on 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. Each element of the website can be positioned relative to the grid or the edges of a screen.

Complex typography. Designers have complete freedom in creating unique typographic solutions.

Transparency. Set a transparency level on any element and shadow effects below them, adjust adaptability. Change every parameter such as composition, set of visible elements, depending on the screen resolution.
Panels. Add colourful panels, content cards or upload images inside geometric shapes.

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

Adding HTML. Add any element to Zero Block by inserting HTML code (use either your own code or IFrame widgets that allow you to insert content from third-party providers). Adjust the positioning of these elements on each screen.

Tooltip. Use this interactive tool to add short pop-up prompts. You can alter the settings such as colour, shadow, size, upload an icon inside a circle or an image above text.

Feeback form. Add input fields, data capture integrations, set the style for the form and animate it.

Animating web page elements. Add animation when web elements appear on a page: opacity, scaling up, when elements come into view from the below, above, left or right.

Step-by-step animation. Make your page more dynamic and engaging. Animate on click, on scroll, on hover and when the element appears on screen.


Parallax scrolling. Use parallax scrolling or create the parallax effect from mouse move.

Fixed elements when scrolling. Specify the distance for which the element should remain fixed and its location.

When you should choose Zero Block

Zero Block is a convenient multi-functional tool. Here's a few scenarios when it may come in handy.
1. Use it when you draw a layout in a graphics editor and want to transfer it to a page
If you draw layouts in a graphics editor before doing anything use, use Zero Block to transfer it to your website as it is. For this, Zero Block offers a 12 column grid and customisable specifications for each element, such as 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.
2. Use it when you are creating a website and the existing blocks are not enough
If you are creating a web page or a landing page and can't find the right block in the Tilda library, use Zero Block. Here's a few concrete examples.
1. Unconventional design
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 information on your website, Zero Block is a great tool for that.
Risum Studio uses Zero Block to show a team unusually
Quantum Attorneys. Law firm website
2. Complex forms
Zero Block works great for collecting elements with uneven edges into a single composition by making all distances visually the same.
A complex of elements on Tilda step-by-step animation landing page
Zero Block allows you to create a design out of characters and typography, regulating the distance between these elements, similar to creating a poster
3. Layers
Zero Block works well with layers, such as overlapping images, texts over a panel, buttons on top of images. Create additional effects by playing around with their positioning.
E2 PRO video production studio
To keep things simple when it comes to multiple elements, use Layers. This great tool allows you to manage each element — change its position, hide or lock it.

To open Layers, use these keyboard shortcuts: ⌘+ L or Ctrl + L (for Macs) or Ctrl + L (for Windows).
4. Multiple elements collected together
Zero Block allows users to create complex compositions from multiple elements such as texts, images, lines, panels and buttons.
Designer of Tilda Icons landing page used Zero Block to add big-sized numbers, a caption, description, a large number of icons and an uneven edge to a website cover.
UNIT.City used Zero Block to combine a few text columns in a fresh way
This new fonts landing page created on Tilda consists of blocks featuring multiple elements.
5. Hover effect
The hover effect changes the appearance of an element when the user points a mouse over it. Use it as an additional design elements or as a functional element of an article or infographics.
Hovers are used in order to better illustrate the "bones" of a longread. When the reader clicks on each one, they are taken to the appropriate section of an article.

3. How to convert an existing Tilda block into Zero Block

Perfect for when you want to change something in a regular block but it's not possible to achieve by changing the settings.

If you've selected a general Tilda block and want to make some changes to it, simply 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 tariffs block by positioning icons outside information panels.
1
Add the desired block to the webpage.
2
In the page settings, click Convert to Zero Block.
3
Click Block editor.
4
Make changes. In this case we want to cut the panel to the middle of the icons. This is why we are using Zero Block.
5
Now the distance from the header to tariffs is visually bigger. Highlight all tariff cards and move them closer to the header. Let's also reduce the height of the whole block so that the space below would stay the same.
6
Add your content: icons and texts.
8
After making changes on the biggest screen, the position of the elements on all other screens will stay fixed. Only the content that you've added will change. This way you can manipulate every element on the webpage and create different designs on all screens.

Adjust the display for the other screens from the biggest to the smallest. Always check the display across all screens if you change the text.
Example of other block convert to Zero Block:
E2 PRO video production studio. This block was converted to Zero Block, with a shape added to the background. Also a button color changed and a small text near button added.

When you should avoid using Zero Block

1. When a regular pre-designed block will do
Our standard blocks have lots of settings. Add the most appropriate block from the library, open the settings tab and just check whether you can adjust the template to suit your goal. It's possible that you won't need Zero Block at all.

Examples below are designes based on our standard blocks.
Radario. Complete designs replace images. Create similar designs in Zero Block or add to a regular block as an image.
2. If you wish to create flexible indents
If previously you had to convert a regular block to Zero Block, you no longer need to do this. Tilda now has an option of defining the indents separately for computers and mobile devices.
3. If you need to change spacing in our regular blocks when Zero Block is made off-grid
Our regular blocks are arranged on a grid of 12 columns. You can define the indents for each header 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 regular blocks (you'll need to convert them to Zero Block).

For example, you are alternating regular and Zero Blocks in your website design. While you can place elements wherever you want in Zero Block, this won't be possible to repeat in a regular block. So it's good to keep in mind that our regular blocks can be positioned only on the grid.

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

How to use Zero Block

Let's take a look at the basic capabilities of Zero Block. Read about advanced Zero Block features in our comprehensive guide to designing your own blocks.
Elements
In Zero Block you can add elements that are more complex than texts, images, panels and buttons.
Video
You may add or edit videos from YouTube and Vimeo. Change the size and aspect ratio of the video, as well as 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.
Video in Zero Block
Adding the HTML
Add any element with the help of the HTML. This can be your own code or you can embed the iFrame of a third party widget. For example, these could be interactive elements, online recording, music players, calendars, calculators, social media posts. You can adjust the position of these elements on each screen.
Tooltip
Tooltip is a small interactive prompt which appears when a mouse cursor is positioned over over an element of a website. It could be useful if you are describing a complex subject and would like to describe its parts on a photo. For example, if you are selling houses in a housing development, you can draw a map and mark each building on this map.

The tooltip has many handy settings: change the colour, shadow, size or choose and upload an icon that will appear inside a circle or a text 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 on screens of all resolutions, otherwise the prompt will run the risk of being cut off from above, below or the edges of the block.
Using a tooltip to describe product details. Photo: SPERA.de
Feedback form
Add a horizontal or vertical feedback form to Zero Block and change every setting, such as adding input fields or data capture integrations, success or error messages, form styles or animations.
A form designed in Zero Block in Tilda blog
Elements' location
Each element can be assigned the coordinates relative to the four sides of a screen or a grid, change the opacity and shadow; you can rotate the element or give it a link on a click.
Elements' size
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 a half of the screen regardless its size. In this case, set up its width and height in %, not pixels.
Effects
Discover many unexpected surprises with Zero Block. Here's a list of effects you could use on your site.
Hover effects
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 to for it to be visible only when it's hovering? Make it transparent. And while you are at it, choose 30% opacity and any colour for the hover button.
Position the button over elements that you want to be covered by the hover effect. These could be images or text. If needed, turn the button into a link.
The numbers inside circles are black buttons with text and orange colour when hovered over. The effect on the diagram is several rectangular buttons on top of the image.
Fixing background image when scrolling
To fix an element during the scroll, change settings for the image to Behavior — Fixed. This feature is available for background images inside a shape. If you apply this to the image inside a panel, the image size will stretch to a full screen, but it will visible only within the shape. If you use several such shapes in the block, the image inside them will be the continuation of the same image.

You can combine fixed images and static images to create additional effects and unusual combinations.
Long scrolling
To create long scrolling, set the Window container height as a percentage of the height of the screen. For example, if you want the container to be twice the height of the screen height, set the value at 200 and the background image to fixed.

If you want the text and other elements to appear on the bottom of the page, set Window container and Axis Y — Bottom for each Container element. Now the elements are oriented towards the lower border of the image. Raise each of them as much as you want to make them higher than this boundary.
To create long scrolling, set the window container height as a percentage of the height of the screen. For example, if you want the container to be twice the height of the screen height, set the value at 200.
Set the background image to fixed.
If you want the text and other elements to appear on the bottom of the page, set window container and Axis Y — Bottom for each Container element. Now the elements are oriented towards the lower border of the image. Raise each of them as much as you want to make them higher than this boundary.
Displaying elements outside Zero Block
If you'd like for some elements to be displayed outside Zero Block and superimposed over adjacent blocks, choose the Overflow option. Find it in the block's settings.
When to use this option:
1
When you'd like to superimpose an element over a regular block. This will save you time – you won't need to change it into a Zero Block and adjust its adaptability.

To layer an element over an adjacent block, create a narrow Zero Block next to it, position the element so that it extends beyond the white area, and enable Overflow. Remember to check how the element appears on mobile.
2
When you want to fix an element outside a Zero Block. It could be especially useful when it comes to step-by-step animation.

Configuring adaptability

Zero Block designs can be adapted for five most common types of screens. Your block will always look good on any device.

Do remember to check how your Zero Block is looking across all screens. Just press the button depicting the device you need in Zero Block.
Each elements on each screen is customisable in Zero Block, so if you changing the composition or content on one of the screens, a block in lower resolution could look different due to the difference in the length of the line or the size of the elements.

Creating a Zero Block from scratch, configure adaptability for each device individually. It is important to keep this in mind before you publish your website.

If you are designing your entire site in Zero Block, it is more convenient to split it into separate blocks. This will allow you to switch off blocks for low-resolution screens or temporarily turn them off for the entire website.

If you are using a lot of details on a big screen, simplify your design for screens with lower resolution to make it easier on the eye.
Here's an example of an individual visual composition on each screen:

Animation in Zero Block

The types of animation that may be used in Zero Block include animation on appearance, step-by-step animation, as well as parallax and fixing elements on scroll.

Animating elements as they appear

You can animate each element as it appears in Zero Block. We've provided six types of animations:
Fade In — when elements appear through opacity.
Fade In Up — when elements appear from the bottom of the page up through opacity.
Fade In Down — when elements appear from the top of the page through opacity.
Fade In Left — when elements appear through opacity from the right.
Fade In Right — when elements appear through opacity from the left.
Zoom In — when elements appear through zooming in or zooming out.
Each type of animation has its own parameters. Let's take a look at what they mean.

Duration — the length of an animation in seconds. The higher the value, the slower the animation.
Distance — the space between an initial position of an animation and its final location. It is specified only for the animations where objects appear from the sides.
Scale — the size of an element at the beginning of an 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 — the delay of animation playback, in seconds. If the value is zero, the animation will start as soon as the block appears on the page.

When should you use it? It can be useful if another object overlaps with or crosses out a significant element. If one screen shows several animated objects, assign different delay function to each element. This allows you to direct the viewer's eye, leading him from one element to the next.
Trigger Offset is the distance, measured in pixels from the bottom edge of the screen at which elements appears on the page. By default, animation begins as soon as the element enters the page. If you'd like to delay the animation until the object is visible to the viewer (and not in 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 further.
Once you've set the necessary parameters, check the animation without leaving the editor. Activate the element that you've animated, click Play element for a single element and Play all if you've animated several elements and want to see how they are working together.
Animated elements as they appear on the cover of the 2017 Tilda Year in Review
Step-by-step animation
If you'd like to see interactive elements on your page that users will want to engage with, highlight the element you'd like to animate, and go to step-by-step animation in the element settings.
Animation launches when a user performs an action on the page. Zero Block has four such events:

  • On scroll
  • On screen
  • On hover
  • On click
Animation launches when a user performs an action on the page. Zero Block has four such events:

  • On scroll
  • On screen
  • On hover
  • On click
    Animation on scroll
    Elements appear and move when a user is scrolling up or down a page.
    * Чтобы посмотреть пример пошаговой анимации в нулевом блоке, пожалуйста, откройте статью на экране больше 1200 px
    Animation on scroll examples:

    Feel free to use these animation examples in your personal projects.
    Animation when element appears on screen
    This type of animation is triggered when an element appears on screen.
    * To view this example of step-by-step animation in Zero Block, please open on the screen larger than 1200 px.
    Element on screen — animation is triggered when an element crosses the bottom of the browser and appears on the webpage.

    Block on Screen — animation is triggered when a zero block containing the element crosses the bottom of the browser and appears on the webpage.
    Examples:
    Animation on hover
    Animation will start when a cursor is hovered over an element.
    Place your cursor on the elements
    * To view this example of step-by-step animation in Zero Block, please open on the screen larger than 1200 px.
    Example of animation playing when the element appears on screen
    Animation on click
    Animation will start when a user clicks on the element.
    Click on this element
    * To view this example of step-by-step animation in Zero Block, please open on the screen larger than 1200 px.
    Each type of animation has these additional settings:

    Start Trigger —an event that triggers animation. Choose from Window Top, Window Centre 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 trigger that starts the animation.

    Animation loop is a parameter that controls the animation repeating in perpetuity.

    You may test the animation with the help of Play Element / Play All button. This option is available for all types of animation except for animation on scroll.

    For your convenience, you may use two browser tabs: one for editing in Zero Block, and the other for opening the page preview. This way you can check your result without leaving Zero Block. Make sure to save all changes and refresh preview page before testing your webpage.
    Steps
    When you choose step-by-step animation, you may add steps and customise the properties of each step that will trigger changes in parameters of each selected element on your webpage. Create a trajectory and movements of your elements on the page based on a number of steps.
    Each step has a set duration, meaning the length of time each step is played.

    The shorter the duration of this step, the faster the parameters of the element change.

    In on scroll animation, the length of each step is measures in pixels. In all other types of animation, each step is measured in seconds.
    Each step has a set duration, meaning the length of time each step is played.

    The shorter the duration of this step, the faster the parameters of the element change.

    In on scroll animation, the length of each step is measures in pixels. In all other types of animation, each step is measured in seconds.
    To change the initial state of an element – if you what it to be invisible in the beginning, for example, set the opacity to zero and duration to 0 seconds or 0 pixels (for animation on scroll).
    Properties
    With the help of the step settings, you may change the properties of the element you're animating.

    You can set its position (Move), size (Scale), transparency (Opacity) and rotation angle (Scale).
    You can also fix the element in a particular place on the page during a given step (Fix). With this setting, the element will be fixed while the user is scrolling up or down the page.

    Just like with the animation when an element appears on screen, you may set a Delay for the start of a step.
    You can also fix the element in a particular place on the page during a given step (Fix). With this setting, the element will be fixed while the user is scrolling up or down the page.

    Just like with the animation when an element appears on screen, you may set a Delay for the start of a step.
    Parallax
    Parallax scrolling. When you apply this animation to an element, the speed at which it moves will differ from the speed of movement of the other elements when you are scrolling a page. You can set the speed of its movement in the page settings: at a slow speed from 0 to 100 the element will move slower than the scroll, at a high speed from 100 to 200 it will move much faster.
    Parallax when moving your mouse pointer. An element with this type of animation moves in the opposite direction relative to the movement of the pointer. You set the area of its vertical or horizontal motion in the page settings.
    Making elements fixed on scroll
    This type of animation allows you to fix the elements during the scroll. In the settings, you can specify the distance within which the element will remain fixed in one place (this is always within the block). The distance is fixed in pixels. After a scroll to the specified distance, the element is no longer fixed and will continue scrolling along with the page.

    You can set the scroll triggers in settings: top, bottom or center of the window. Trigger Offset allows you to control the margin between the edge of the window and the element. It is also useful when you want to fix several elements at the same time at a certain distance from each other.
    Fixing elements on scroll

    The most common mistakes in using Zero Block

    1. Not paying attention to its adaptability
    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 a text in Zero Block and simply changing it, check it works in Zero Block 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 other screens.
    2. Different positioning of the elements that should be together
    If you'd like to have two elements remain in the same position relative to one another, set the positioning of the elements as Grid Container or Window Container.
    A headline is positioned relative to the edge of a screen. Distance on the left will remain fixed for any size of the regardless of the size of the browser's window. A subhead is positioned relative to the grid. This is why both texts will be positioned differently relative to each other.
    3. Container with text is breaking beyond grid boundaries
    If you are positioning the text relative to the grid and want for it to always remain within the screen, take care that its container does not go over the grid area. Creating a neat layout is a good habit to have; this way you will avoid any unpleasant surprises when the block is published.
    Use Zero Block for creating impressive sites and innovative typographical solutions. It will become a useful tool for your designs. Add personality to your website with special effects, typography and out-of-the box page design. It's all in your hands now!

    Text, design, illustration and layout: Masha Belaya
    Editing: Varya Gurova, Julia Zass
    Translation: Svetlana Graudt
    If you like this article, please, share it with your friends. Thanks!
    Made on
    Tilda