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

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.

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.

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.

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

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.

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

Example of other block convert to Zero Block:

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.

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.

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.

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

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

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.

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.

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.

Discover many unexpected surprises with Zero Block. Here's a list of effects you could 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 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.

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.

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.

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:

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

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.

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.

Elements appear and move when the 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 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.

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.

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

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

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.

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.

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, 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!