Help Center
Import Using a Browser Extension
This guide explains how to import the design of an entire page, a section, or an individual element into Zero Block using a Google Chrome extension.
You’ll learn how to install the extension, copy the content you need, and configure import settings in the editor.
You’ll learn how to install the extension, copy the content you need, and configure import settings in the editor.
Important: The extension is available for Google Chrome. Support for other browsers will be available later.
How to Install the Extension
To install the Google Chrome extension, open it in the Chrome Web Store and click "Add to Chrome."
How to Import a Page, Section, or Element into Zero Block
The extension lets you import an entire page, a section, or an individual element into Zero Block.
Importing a Page
Open the page you want to import into Zero Block in your browser. Click the extension icon in the browser toolbar. Then, click "Copy Entire Page."
Wait until the extension finishes copying the page. When the content is ready to import, a checkmark and a confirmation message will appear in the extension widget.
Return to Zero Block on Tilda and paste the copied content: press Cmd + V on Mac or Ctrl + V on Windows. You can also select "Paste" from the context menu.
The import window will open. There you can choose how to import the content, configure breakpoints, and reduce group nesting. Learn more about each setting below.
Importing an Element
To copy an individual element, click "Select Element" in the extension window. Then select the element on the page and click "Copy."
You can then paste the element onto the artboard in Zero Block.
You can then paste the element onto the artboard in Zero Block.
Importing a Section
To copy a page section, click the extension icon in your browser and select "Select Element."
Click an element inside the section you want to copy. The element will be highlighted on the page, and the "Copy" button will appear in the extension widget.
An arrow icon will appear next to the selected element. Click it to expand the selection and include more elements from the current section.
Once the entire section is selected, click "Copy." You can then import the section into Zero Block.
How to Configure Import Settings in Zero Block
After you paste a page, element, or section into Zero Block, the "How to Import?" window will open automatically. Select the import settings in this window.
Important: When content is imported as a group, elements are positioned at coordinates 0, 0, so their position may differ from the original. Their position may match on responsive screens.
Import Methods
Add as a new group. The copied elements will be imported into Zero Block as a separate group or as layers. Content already added to the block will remain unchanged. Artboard settings will not change.
Important: Use this option when importing individual elements or sections to add them to the current block design.
Add as a new group and replace all elements. Only the copied elements or groups will remain in the block. Existing content will be deleted. Artboard settings will not change.
Apply settings to the artboard. The elements and groups will be imported along with the artboard settings, including the background color, Auto Layout, and other parameters.
Adding Breakpoints
In the import window, you can configure which breakpoints to import.
To add another breakpoint, click "Add Breakpoint."
To add another breakpoint, click "Add Breakpoint."
To use the breakpoints from the page you are importing, click "Use Breakpoints from Page."
To restore the default breakpoints, click "Reset to default."
To delete a breakpoint, click the cross icon next to it.
Group Nesting
By default, elements inside groups are imported together with their groups. To change this behavior, enable "Reduce Group Nesting." This reduces the number of groups or imports elements as separate layers.
Important: For a more accurate import and fewer unnecessary groups, enable this option.
Zero Block has a limit on the number of nested group levels. If the nesting exceeds the limit, import errors may occur.
Zero Block has a limit on the number of nested group levels. If the nesting exceeds the limit, import errors may occur.
The "Reduce Group Nesting" option reduces nesting to three levels.
Import Notes for Zero Block
The font in the source design and the Tilda project must match.
Before importing, add the font used in the source design to your project on Tilda. This helps preserve element sizes and spacing and reduces the need for manual adjustments. Or, you can replace the font exactly after the importing.
Before importing, add the font used in the source design to your project on Tilda. This helps preserve element sizes and spacing and reduces the need for manual adjustments. Or, you can replace the font exactly after the importing.
A form on the page is imported as a form in Zero Block.
However, some fields may require additional configuration. This can happen if the form on the source page has non-standard dimensions, contains unsupported fields, or the extension cannot recognize some of its elements.
However, some fields may require additional configuration. This can happen if the form on the source page has non-standard dimensions, contains unsupported fields, or the extension cannot recognize some of its elements.
Other Import Methods
