Vector Editor In Tilda's Zero Block

Vector Editor In Zero Block

How to create your own vector images on Tilda

In Zero Block editor, you can create your own vector image in the built-in vector editor. To do this, click the plus button for adding new elements → Add Vector.

Go to Element Settings and click the "Edit Vector" button. You can also start working with the vector by double-clicking the element.

The vector image editor will open. There are 4 tools available: Select tool (S), Draw tool (D), Bend tool (B), and Edit tool (E) for anchor points.

Draw tool (D)

The Draw tool allows you to create a new vector by adding Bezier curves with anchor points (on click) and adjusting the curve handles. With this tool, you can create straight and curved lines.

If you hold down the Shift key, the next anchor point will be positioned horizontally, vertically, or diagonally at a 45-degree angle with respect to the previous point.

To close the path, add the last point over the first one. To keep the shape open, double-click the last point or use the ESC key.

Select tool (S)

The Select tool allows you to select, drag, scale, and rotate separate shapes you've created, as well as configure their settings—fill and stroke color and width.

There are four scaling modes:

Free. The element is freely resized, and the aspect ratio is not maintained.
Proportional (Shift key held down). The element is resized, and the aspect ratio is maintained.
Resize from center (Alt/Option key held down). The element keeps its position relative to the central point. The aspect ratio is not maintained.
Resize proportionally from center (Shift + Alt/Option keys held down). The element keeps its position relative to the central point. The aspect ratio is maintained.

Examples of the 4 scaling modes

There are two ways to rotate elements:

Free. The element can be rotated arbitrarily by moving the cursor over the corner of the element.
Rotation with a 15-degree step (Shift key held down).

To reset rotation, right-click to open the context menu of the element and select "Reset rotation."

To mirror the element vertically or horizontally, use the context menu options: Flip Horizontal, Flip Vertical.

Bend tool (B)

The Bend tool allows you to change separate curve segments and the angle of the curve handles for the anchor points after you've created a vector.

Edit tool (E)

The Edit tool allows you to edit anchor points (move them around and edit Bezier curves) and modify segments between two anchor points. To enable this tool, double-click the element you want to edit.

Several Shapes In One Vector Image

You can create several shapes within one vector image. To place them above or below each other (as layers), open the context menu with the right-click on the element and select the "Bring to front" or "Send to back" option. You can also use the ] or [ shortcuts.

To delete an element, hit the Backspace key or use the context menu.