Zero Block: How to Create a Custom 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.

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.

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, gallery, or vector.

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.

When several elements are selected, they can be aligned horizontally or vertically to each other or to the container.

Editing block elements using a keyboard considerably speeds up the work process, which is why we recommend using hotkeys.

You can also access the list of keyboard shortcuts from the context menu in the Block Editor.

You can access the full settings of any element by clicking on Settings in the bottom right corner of the screen.

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.

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.

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.

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.

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.

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.

In Zero Block, you can add an image gallery. You can change the gallery's width and height just like for the Shape element.

Let's check the gallery settings:

Stretch: It has two parameters: Cover and Contain.

For Cover, the images will fill the gallery area completely, so they may be cropped if their format is different from that of the gallery.

For Contain, the images in the gallery will be in their original format, so they won't be cropped on galleries of any format.

Position. It defines the image's position with respect to the gallery area. For example, if the Left Top parameter is selected, the image will be positioned with respect to the left top corner of the gallery.

Loop. This setting loops the slides (images) in the gallery. It has two parameters: Loop and None.

For Loop, slides in the gallery will be looped infinitely, that is the first slide will appear after the last slide.

For the None option, there is no looping and the gallery will stop at the last slide.

Slide Speed defines the animation type for changing slides. It has three parameters: None, Slow, and Fast.

For the None option, no animation is used when you switch slides.

For the Slow option, slides are switched slowly.

For the Fast option, slides are switched fast.

Autoplay defines the speed of automatic slide change in seconds.
If you haven't specified the value in seconds, there is no automatic slide change.

The Zoomable option allows zooming in the gallery images on click. It has two parameters: Zoom on click and None.

For Zoom on click, the images will be zoomed in on click.

For the None option, the images won't be zoomed in on click.

The Arrows tab includes settings that define what arrows (buttons) look like.

The Dots tab includes settings that define what the dots below the gallery look like. The dots display the number of slides.

Each slide (image) has its own settings:

Here you can add an image caption, Alt tag for SEO, include a YouTube or Vimeo video, as well as a link to jump to when you click on this slide.

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.

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.

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.