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

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.

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.

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.

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.

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

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.

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).

Zero Block allows users to create complex compositions from multiple elements such as texts, images, lines, panels and buttons.

This new fonts landing page created on Tilda consists of blocks featuring multiple elements.

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.

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.

Example of other block convert to Zero Block:

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.

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.

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.

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

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.

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 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.

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.

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.

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.

Discover many unexpected surprises with Zero Block. Here's a list of effects you could use on your site.

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.

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.

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.

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:

You can animate each element as it appears in Zero Block. We've provided six types of animations:

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.

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.

Elements appear and move when a user is scrolling up or down a page.

Animation on scroll examples:

Feel free to use these animation examples in your personal projects.

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

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.

Animation will start when a cursor is hovered over an element.

Animation will start when a user clicks on the element.

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.

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.

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).

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).

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.

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.

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.

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.

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.