Zero Block: creating your own blocks

Part one. Getting started.
Zero Block — is a prefessional editor within Tilda, that enables you to realize any idea by creating blocks according to your own design. It is similar to popular graphics programs. But it is in Tilda.
You are here!
Scroll down to read
1
How to add a Zero Block
To add a "zero block" to your page press Zero button in the bottom of the page. Or you can choose it from the Blocks Library which is located in the very bottom of the page, right after "Other" category.
Zero Block keeps main features of a regular block — it can be copied, removed, deleted and hidden. It has settings, but instead of "Content" button it has "Block editor" button. Press here if you want to start editing the block, and the editor will open.
2
General perception of interface
"Zero block" has two working spaces or two "containers": Grid Container and Window Container — conventional symbol of the boundaries of a browser screen.

Grid Container uses the same grid as Tilda, 12 columns (1200 px). If you turn on object binding to the Grid Contaner and locate elements inside the Grid Container, then they will always be within the boundaries of 12 columns regardless screen size.
Grid Container — is the main essential work space.
3
How to add and edit elements
Press "plus" in the upper left corner to add an element to your page. You can add a text, a picture, an object or a button.
A picture can also be added by dragging it from a folder to the block space.
How to edit elements with a mouse
Zero Block supports all main manipulations implemented with a mouse: objects can be moved, resized, copied (holding Alt key), several objects can be selected.
You can resize an element with a picture, but proportions of the original picture would remain.

In elements with text the height changes automatically depending on the text volume.

Button size and figures can be changed in all directions.
For operations with several object press Cmd+A (select all objects), or, holding Shift key select with a mouse those objects, that you are going to work with.
When several objects are selected, they can be aligned horizontally or vertically relative to each other or relative to container.
Editing keyboard elements
Editing your keyboard considerably speeds up work process, that is why we recommend to use 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
⌘+1...5
G
TAB
F
⌘+Z
⌘+S
⌘+C
⌘+V
(Shift+) ←↑→↓
Backspace
0...9
L
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
(Use Ctrl instead of ⌘ if you are Windows user)
The list of keyboard shortcuts you can also find in the context menu of Zero Block.
Editing through settings panel
(TAB key)
1
Text
Full settings of an element get opened when you press Settings button in the lower right corner of the screen.
Open/close settings panel through pressing Tab key.
Settings panel is always closed by default, in order to keep the work space free.
The upper button row serves for quick alignment of the element relative to the container vertically and horizontally.

Lower — you can see the coordinates of the element position. They can be given in pixels or percents. We will review this point in details below.

The origin is indicated with a blue cross.

Here you can also see the element's parameters: width and height. Units of measure — pixels.
To chanfe font size use –/+ keys
Cmd+up-down arrows change line spacing.
Cmd+left-right arrows change letter spacing.
To copy an element hold Alt and drag it.
Transparensy is easy to adjust with buttons:
1 — 10%
2 — 20%
...
0 — 100%
2
Picture
Downloaded picture takes the size of the frame that it was downloaded in. Choose "Original size" in the settings to recover the picture's original size.
If you want to make a picture in a circle, set the radius for the rounding of a picture.

To make an even circle, original photo should be of square shape and the rounding's radius should be equal to the half of the side. That is if a picture size is 100×100 px, set the radius equal to 50.
You can add shadow to a picture. Choose shadow color, transparency, x and y axial displacement, blur and diffusion degree.
Each picture can have alternative text (tag alt). Search systems perceive alternative text as key words and consider them during indexlinking. Write the text so that it is relevant to the site and picture contents in general.
Any picture can be made as a link — so that user goes to another page by clicking it. Put in the settings the link and the purpose whether to open it in a new window or in the same window.

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 control points.
Or specify values in the element settings.
Circle. To make a circle set the rounding radius equal to half of a square side length.
Line. Specify in the settings rectangular height as 1-5 px, thus you will make a line.
Shapes can have shadow, stroke and have a link to them.
4
Button
A button can change size, color, rounding radius. You cad add a stroke and a shadow.

The inscription on the button and a link are specified in the settings. There you can also cutomize typography: size, type, intensity and color of the font.
A button can also be customized with reaction: when you put the mouse on the button, it will change the background color, text or stroke.
4
Design adaptation for different screens
We have provided adaptation for basic screen types:
1200 – max (desktops)
980 – 1200 (horizontal tablet)
640 – 980 (vertical tablet)
480 – 640 (horizontal smartphone)
320 – 480 (vertical smartphone)

That is enough for your design to be shown correctly on all devices.

After you have created design on the main artboard, switch different screen types and make changes where necessary. You can adjust, for example, text column width, picture size, font size, artboard height or elements layout.
Settings that were changed for particular screen type would be highlighted in bright black. Those from the previous version would be in pale grey. It's always easy to see what settings are changed.

For example, text element settings below are all in grey. It means that for the current screen version they remain the same as for the previous version.
If we change font size and coordinates in the current screen version, then the values would no longer be pale grey. It means that they belong only to this screen.
5
Artboard settings
If you click on an empty space, then you will see artboard settings.

Grid Container Height. It is given in pixels from the keyboard. It can be changed by dragging the edge of the container. Grid Container width is fixed and equal to 1200 px.
Background color. You can customize background color of the whole block in the artboard settings.
Background picture. You can download picture and set as a block background in the artboard settings.
Here you can also customize background picture rendering (Filter Start / Filter End) and contents behaviour relative to background picture: If you put value Fixed, then the content (text, figures) would move during scrolling, while the picture would stay in place.
We have reviewed main, basic settings and functions of Zero Block editor. In the second part of the manual we will get acquainted with more complex settings related to responsive web design.
part two
Responsive design
Made on
Tilda