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 create your own 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. Individual adjustment of 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 its size and position on the page.

Adding HTML. Add any elements 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.

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.

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 drew 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 if you've done it all 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 that were created 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.
The Photobookfest's website is designed with columns. Split up your content into columns by using lines. If you disassemble this page into functional blocks, then the cover, the menu and the "about the project" will be located in sequence but in a single composition. The user's view is reading the blocks sequentially, but not from the bottom of the page up, but according to the scenario set by the designer
The Proryv design course is structured around images with captions. Zero Block allows you to place captions not strictly underneath the images but with the offsets, and add extra navigational elements such as thin lines.
The website for the W.D.i web design course describes its curriculum with with the help of columns. A number is both a text and an illustration at the same time.
2. Complex forms
Zero Block works great for collecting elements with uneven edges into a single composition by making all distances visually the same.
Zero Block allows you to assemble rectangular and cut-out images in the same layout. This how Fy:r Clothes did it.
Zero Block allows you to create a design out of characters and typography, regulating the distance between these elements – similar to creating a poster.
Wdi.design used Zero Block to create the home page and place buttons and links in unusual places and control the placement of a complicated shape on the background.
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.
This Platforma longread about the 20s fashion in Ukraine has three layers: images, texts and an image over the first two layers.
Pasta Naturale shop uses layers on its webpage to a great effect. Together with a shadow under the product cards, this gives the page depth.
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 on 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.
Do and Go used Zero Block to combine together lines, textures and text.
Each block about a font consists of multiple elements on this new fonts landing page created on Tilda.
5. Hover
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 the article

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

Perfect 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 the icons outside the information panels.
1
Add the desired block to the webpage.
2
In the page settings, click Convert to Zero Block.
3
Click Edit block.
4
Make the necessary 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.
7
The amount of text has changed; align the indentation and the length of cards for the balanced look.
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.
Examples of other blocks convert to Zero Block:
Proryv: The rates blocks was converted to Zero Block, with illustrations and a panel added to the background.
The About our project block on the website for Wave, a web design studio, was converted to Zero Block in order to add a frame with an offset towards the photograph and an image on the background.
Wave: The rates block featuring a panel with a shadow was replaced with a border, plus the button was rendered outside the frame.

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 designed based on our standard blocks.
Block TM301, used by InShow. Whole designs replace the images. Create similar designs in Zero Block or add to a regular block as an image.
Block FR201 used by Forsix icons are replaced with whole designs, each composed of a white circle, a number and illustrations.
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. In this case 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 other 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 in Zero Block.
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
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.
A longread by Platforma about the 20s fashion in Ukraine
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.

Animating the elements

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 can the delay be useful? 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.
Using Trigger Offset with an element in the article "10 reasons for a graphic designer to visit Helsinki"
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 results of Tilda Publishing
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.
An example of parallax scrolling in the article "10 reasons for a graphic designer to visit Helsinki"
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.
An example of parallax in the article "10 reasons for a graphic designer to visit Helsinki"
Making element 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 a scroll

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 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.
An example where decorative elements are removed at lower resolutions.
An example of an individual visual composition on each screen:

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