Zero Block: How to Create a Custom Block

Part one. Getting started.
Zero Block. Design Editor for Professionals
Watch this tutorial on how to use Zero Block, or read the guide below.
Zero Block is a built-in professional editor that enables you to realize any idea by creating custom-designed blocks according to your own preferences. It is similar to popular graphic design editors but on Tilda.
Overview article on the main features
Working with containers and creating responsive elements
A list of all shortcuts for speeding up your workflow
Element fixing, parallax, and fade-in animation
Complex multi-step animation: Basic principles, settings, and examples

How to set up an element animation that runs when you click or hover over another element

How you can automatically import a layout from Figma into Zero Block

1
How to add a Zero Block
To add a Zero Block to the page, click on Zero at the very bottom of the page. You can also find it at the bottom of the Block Library, right below the "Other" category.
A Zero Block keeps all regular block features—it can be copied, removed, deleted, and hidden. It has settings, but instead of a "Content" button, it has a "Block Editor" button. Click it if you want to edit the block, and the Block Editor will open.
2
Introduction to the interface
A Zero Block has two workspaces, or containers: the Grid Container and Window Container, which indicate a browser screen's boundaries.

The Grid Container supports the same grid as Tilda—12 columns (1200 px). If you align objects to the grid and locate elements inside the Grid Container, they will always remain within the boundaries of 12 columns regardless of the screen size.
The Grid Container is the main workspace in the Block Editor.
3
How to add and edit elements
Click the plus button in the top left corner of the Block Editor to add an element to the page. You can add a text, image, shape, button, video, tooltip, HTML, form, or gallery.
You can also add an image by dragging it from a folder to the block space.
How to edit elements using a mouse
A Zero Block supports all basic mouse manipulations: elements can be moved, resized, copied (by holding down the Alt key), and multiple elements can be selected.
You can resize an image element without changing its proportions.

The height of the text elements changes automatically depending on the text volume.

The sizes of buttons and shapes can be changed in all directions.
For operations with multiple elements, press Cmd+A to select all elements, or select multiple elements with the mouse while holding down the Shift key.
When several elements are selected, they can be aligned horizontally or vertically to each other or to the container.
How to edit elements using a keyboard
Editing block elements using a keyboard considerably speeds up the work process, which is why we recommend using hotkeys.
Change screen type
Hide grid
Hide settings
Hide managing elements
Undo the last action
Save
Copy
Paste
Move
Delete
Change opacity
Lock the element
Change font size
Change line spacing
Change letter spacing
Select all
Layers: Hide/Show
Guides: Add Horizontal
Guides: Add Vertical
⌘+1...5
G
TAB
F
⌘+Z
⌘+S
⌘+C
⌘+V
(Shift+) ←↑→↓
Backspace
0...9
L
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
⌘+L
⌘+H
⌘+Shift+L
(Use Ctrl instead of ⌘ if you are a Windows user)
You can also access the list of keyboard shortcuts from the context menu in the Block Editor.
How to edit elements using the Settings panel
(TAB key)
1
Text
You can access the full settings of any element by clicking on Settings in the bottom right corner of the screen.
You can open or close the Settings panel by pressing the Tab key.
By default, the Settings panel is hidden to keep the workspace clear.
Use the upper button row to align an element vertically or horizontally to the container quickly.

You can see the element's coordinates below. They can be given in pixels or percent. Below we are reviewing this feature in detail.

The origin is indicated with a blue cross.

You can also view the element's parameters: width and height, measured in pixels.
To change the font size, use the –/+ keys.
You can change the line spacing by pressing Cmd+up/down arrow keys.
You can change the letter spacing by pressing
Cmd+left/right arrow keys.
To copy an element, drag it while holding the Alt key.
Opacity is easy to adjust using a keyboard:
1—10%
2—20%
...
0— 00%
2
Image
When you upload an image, it takes the size of the frame in which it is uploaded. Click on Original size in the Settings panel of the element to reset the image to its original size.
If you want to crop the image in a circle shape, set the rounding radius.

To make an even circle, the original image should be of a square shape, and the rounding radius should be equal to half of the side. For example, if the image's size is 100×100 px, set a radius equal to 50.
You can add a shadow to the image. To do this, select the shadow color, opacity, x and y offset, degree of blurring and spreading in the Settings panel of the element.
Each image can have an alternative text (alt tag). Search engines interpret the alternative text as keywords and use them to index the page, so make sure that the alternative text is relevant to your website's content in general and reflects the content of the image.
Any image can be turned into a link so that when the user clicks on it, they will be taken to another page. Go to the Settings panel of the element and specify the link and whether it should be opened in the same window or a new one.
3
Shape
When you add a shape, a square appears on the page, which can be transformed into a rectangle, a circle, or a line.

Rectangle: change side lengths by dragging the control points.
Or specify the values in the element settings.
Circle. To make a circle, set a rounding radius equal to half of the square side length.
Line. Set the rectangle's height to 1-5 px in the element settings; thus, you will make a line.
Shapes can have a shadow, a border, and a link assigned to them.
4
Button
You can change the button's size, color, and rounding radius. You can also add a shadow and a border to it.

You can set the button's caption and link in the Settings panel of the element. There you can also set its size, type, opacity, and font color.
You can set the button's behavior. For example, the background color, text color, and border color will change when the button is hovered over.
5
Tooltip
Tooltip is an interactive block element that displays a text hint and/or an image when you hover the pointer over it.

You can adjust the tooltip's color, shadow, size, set the icon displayed inside the circle, upload the image that will pop up when you hover the pointer over it, and create an animation.

Be sure to check the tooltip's location on all screen resolutions after arranging the elements in the block so that the tooltip is not cut off at the edges of the block.
Using a tooltip to show product features. Photo by SPERA.de.
6
Form
You can add a horizontal or vertical form to a Zero Block. You will have access to all the basic form settings, like adding input fields, connecting data capture services, setting up success and error messages, changing its design, and creating an animation.
To edit the input fields, go to the Settings panel of the element and click on Input fields. Here you can customize the input fields like in a regular form block.
To connect data capture services to the form, go to the Settings panel of the element and click on Services. There you can connect the data capture services to the form.
4
How to Create a Responsive Design
Tilda supports responsive design for all the basic screen types:
1200—max (desktops)
980—1200 (horizontal tablet)
640—980 (vertical tablet)
480—640 (horizontal smartphone)
320—480 (vertical smartphone)

This is enough for your design to display correctly on all devices.

After you have customized a Zero Block on the main artboard, switch the screen types and make adjustments where necessary, such as text column width, image size, font size, artboard height, or element layout.
Those settings that have been changed for a given screen type are highlighted. The settings that mirror those of another screen type are gray. This way, it is easy to see which settings have been changed.

In the example below, the text element has all its settings in gray. It means that they are the same for the current screen type as for the previous one.
If we change the font size and element coordinates for a given screen type, the values will no longer be colored in gray. It will mean that the new settings are unique for this screen type.
5
Artboard Settings
If you click on an empty space, you will see the Artboard Settings.

You can specify the Grid Container height in pixels using your keyboard. You can change the value by dragging the edge of the container. The Grid Container width is fixed at 1200px.
You can customize the background color of the entire block in the Artboard Settings.
You can upload a background image for the entire block in the Artboard Settings.
You can also customize background image rendering (Filter Start/Filter End) and content behavior regarding the background image: If you set a "Fixed" value, the content (text and shapes) will move during scrolling, while the image will stay in place.
Using Zero Block as a pop-up window
For a block to pop up by clicking on a button or link, add the T1093 modifier block from the "Other" category.
In the Content tab of the block, specify the ID of the Zero Block you need (or choose it manually by clicking the "Choose Zero Block" link). By default, the link to pop-up is the #zeropopup link, you can change this for any name you like, but should keep the hash sign at the beginning. Then the block will work like a usual pop-up and will be hidden on the page.

Read more on how pop-up blocks work in the "Pop-ups" article.
In the settings of the T1093 block, you can select the parameters for the background (color, opacity), the close icon color, animation speed,
your own Z-index, and other parameters.
The z-index defines the order of overlapping blocks on the page. Use custom numeric values (e.g., a block with a z-index of 10 will overlap a block with a z-index of 5).
We've covered the basic settings and features of Zero Block. In the second part of the tutorial, we'll review the advanced settings regarding responsive design.
part two
Responsive Design
Made on
Tilda