(Go: >> BACK << -|- >> HOME <<)

 
A Complete Guide To Zero Block

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

Zero Block is a tool for creating uniquely designed blocks on Tilda. You can position each element, adjust its parameters to 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 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. Each element of the website can be positioned relative to the grid or the edges of a screen.

Complex typography. Designers have complete freedom to create 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 colorful 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. These include color, shadow, size, upload an icon inside a circle or an image above text.

Feedback form. Add input fields and 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, scroll, 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 Zero Block to transfer it to your website as it is. For this, Zero Block offers a 12-column grid and customizable specifications 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.
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, you'll find the Zero Block useful. Here are 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 the 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, including overlapping images, texts over a panel, and buttons on top of images. Create additional effects by playing around with their positioning.
Cyber Crime Conference landing page
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. You can use it as an additional design element 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 in situations where it's impossible to effect changes in a regular block by just modifying 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 plans block by positioning icons outside information panels.
1
Add the desired block to the web page.
2
In the Settings panel of the block, 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 pricing plans is visually bigger. Highlight all tariff cards and move them closer to the header. It also lets you reduce the height of the whole block so that space below remains constant.
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 web page 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 was changed and a small text near the button was added.

When you should avoid using Zero Block

1. When a regular pre-designed block will do
Tilda's standard blocks have lots of settings. Add the most appropriate block 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 designs based on Tilda's 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 you had to convert a regular block to Zero Block previously, 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 Tilda's regular blocks when Zero Block is made off-grid
On Tilda, regular blocks are arranged on a 12-column grid. You can define the indents for each header 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 regular blocks (you'll need to convert them to Zero Block).

For example, assuming 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. Also, its opacity, create shadows and apply animation.

In the video settings, you can set automatic playback, enable and disable looping. Also, you can set the start and end time for each video and upload your own cover.
Video in Zero Block
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 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 homes in housing development, you can draw a map and mark each building on this map.

The tooltip has many handy settings: change the color, shadow, and size. 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. Next, 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 with 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 half of the screen regardless of 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 website.
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 it to be visible only when it's hovering? Then make it transparent. And while you are at it, choose 30% opacity and any color 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.
Fixing background image while scrolling
To fix an element while scrolling, 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. However, it will only be visible within the shape. If you use several of 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 behavior 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 behavior 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 some elements displayed outside Zero Block and superimposed over adjacent blocks, choose the Overflow option. Find it in the Settings panel in Zero Block.
When to use this option:
1
When you'd like to superimpose an element over a regular block. This will save your time—you won't need to change it into a Zero Block or 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 to the five most common types of screens. Your block will always look good on any device.

Remember to check how your Zero Block is looking across all screens. Just click the icon depicting the device you need in Zero Block.
Each element on each screen is customizable in Zero Block. So, if you're 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 website 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 reveal on scroll effect, 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. There are six types of animations:
Fade In — when elements appear through opacity.
Fade In Up — when elements appear from the bottom of the page 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 is the length of the animation in seconds. The higher the value, the slower the animation.
Distance is the space between an initial position of an animated element and its final location. 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 it? It can be useful if another object overlaps with or crosses out a significant element. If there are several animated objects on one page, assign different delay functions 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 appear on the page. By default, the animation begins as soon as the element enters 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 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 2019 end of year recap from Tilda
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. After that, 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 Slick
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 the user is scrolling up or down a page.
* To see the step-by-step animation example, please open this article on the screen that is 1200px or wider.
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 see the step-by-step animation example, please open this article on the screen that is 1200px or wider.
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 see the step-by-step animation example, please open this article on the screen that is 1200px or wider.
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 see the step-by-step animation example, please open this article on the screen that is 1200px or wider.
Each type of animation has these additional settings:

Start Trigger is an event that triggers the animation. Choose from 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 trigger that starts the animation.

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

You can test the animation with the help of the "Play Element" / "Play All" buttons. 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 the preview page before testing your web page.
Steps
When you choose the step-by-step animation, you may add steps and customize the properties of each step. 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 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 measured 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 measured in pixels. In all other types of animation, each step is measured in seconds.
To change the initial state of an element—if you want it to be invisible in the beginning, you can set the opacity to 0 and the 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 Settings panel: 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 can set the area of its vertical or horizontal motion in the Settings.
Making elements fixed on scroll
This type of animation allows you to fix the elements while scrolling. In the Settings, you can specify the distance in which the elements stay fixed at a specific position (this is always within the block). After scrolling to the specified distance, the element will no longer be fixed and the scrolling can continue within the page.

You can set the scroll triggers in the Settings: top, bottom, or centre 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 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 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.
The heading is positioned relative to the edge of a screen (Window Container). The distance on the left will remain fixed for any size regardless of the size of the browser's window. The subheading is positioned relative to the grid (Grid Container). This is why two text elements are 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, ensure that its content 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 websites 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 design. It's all in your hands now!

Text, design, illustration, and layout: Masha Belaya
Editing: Varya Gurova, Julia Zass, Svetlana Graudt
If you enjoyed this article, please share it with your friends! Thanks ✌️
See also:
Free coursebook on how to design, set up, and run
high-conversion landing pages

Free practical guide to web animation with examples, techniques,

and tips on how to use them