Help Center
Import Using the Browser Extension
Read this guide to learn about how to import the design of an entire page, an individual section, or an element into Zero Block using the 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 allows you to import an entire page, an individual section, or an element into Zero Block.
Importing a Page
In your browser, open the page you want to import into Zero Block. Click the extension icon in the browser toolbar. In the popup that opens, click "Copy Full Page".
Wait until the extension completes copying the page. When the content is ready to be imported, a checkmark and a corresponding message will appear in the popup.
Go back 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.
After you complete this, the import popup will open. There you can select an import option, 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 popup. Then select the element you need on the page and click "Copy to Clipboard".
You can then paste the element in the artboard in Zero Block.
You can then paste the element in 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 within the section you need. The element will be highlighted on the page, and the "Copy to Clipboard" button will appear in the extension popup.
An arrow icon will appear near the selected element. Click it to expand the selection and include more elements from the current section.
When the entire section is selected, click "Copy to Clipboard". 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 do you want to import?" popup will open automatically. Select the import settings in this popup.
Important: When importing elements as a group, they are positioned at the 0, 0 coordinates, so their position may differ from the original. Their position may match on responsive screens.
Import Options
Add as a new group. The copied elements will be imported into Zero Block as a separate group or as layers. The content already added to the block will be kept unchanged. Artboard settings will not change.
Important: Use this option for importing individual elements or sections if you need to add them to the current block design.
Add as a new group and replace all elements. Only the copied elements or groups will be kept in the block. All existing content will be deleted. Artboard settings will not change.
Apply settings to the artboard. The elements and groups will be imported to the block along with the Artboard settings: the background color, Auto Layout, and other parameters.
Adding Breakpoints
In the import popup, you can configure the breakpoints that should be imported.
To add another breakpoint, click "Add Breakpoint."
To add another breakpoint, click "Add Breakpoint."
To keep the breakpoints from the page that you are importing, click "Use Imported Breakpoints".
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 that are included within groups are imported together with these groups. To change this behavior, enable the "Reduce Group Nesting" option. This option will reduce the number of groups or import elements as separate layers.
Important: We recommend enabling this option for a more accurate import and fewer unnecessary groups.
Zero Block has a limit on group nesting. If the nesting exceeds the limit, errors may occur during import.
Zero Block has a limit on group nesting. If the nesting exceeds the limit, errors may occur during import.
The "Reduce group nesting" option reduces nesting to three levels.
Specific Features of Importing for Zero Block
The font in the source design and the Tilda project must match.
Before importing, add the font that is used in the source design page to the project on Tilda. This will help you import the elements using correct sizes and spacing and they are more likely to involve no manual adjustments. Or, you can replace the font exactly after the importing.
Before importing, add the font that is used in the source design page to the project on Tilda. This will help you import the elements using correct sizes and spacing and they are more likely to involve no 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 Options
