Help Center
Import from an HTML File
Import HTML code or an HTML file into Zero Block to quickly transfer an existing design and continue editing it on Tilda. This guide explains how to import a page, a section, or an element and configure the import settings.
How to Import a Page from an HTML File
To import an HTML file into Zero Block, open the block and click the three dots in the top menu.
In the context menu, select "Import from HTML."
Add the HTML code to the import window or upload a file.
Important: CSS styles must be included in the HTML file. You cannot upload a separate CSS file.
Important: HTML import does not support JavaScript. If the page requires JavaScript code, add it separately using the T123 block. Learn more about using the block in the dedicated guide.
Important: Do not import containers with infinite scrolling or automatic loading of additional elements.
Click "Prepare for Import."
Once the file is prepared, the settings window will open. Check the settings and click "Import."
Done. The HTML code and CSS styles are converted into Zero Block elements.
Below is an example of imported HTML code in Zero Block after publishing.
How to Import an Element or Section
To import only an element or section, click "Select," hold down Shift, and select the required content. Then click "Import."
Only the selected object or section will be imported into Zero Block.
How to Configure HTML Import
In the import window, you can choose an import method, configure breakpoints, and reduce group nesting.
Import Methods
HTML code can be imported in one of three ways:
Apply settings to the Artboard. Artboard settings will be imported along with the elements.
Below is an example of HTML code imported with the settings applied to the Artboard.
Below is an example of HTML code imported with the settings applied to the Artboard.
Add as a group. The imported content will be added to Zero Block as a separate group, while the existing elements will remain unchanged.
Important: Use this option to add an individual element or section to existing content in Zero Block.
Add as a group and replace current content. The imported elements will be added to the block, and the existing content will be deleted.
Breakpoint Settings
By default, imported content uses the breakpoints already configured in Zero Block.
In the import window, you can add custom breakpoints, use values from the imported file, or reset the settings to default.
In the import window, you can add custom breakpoints, use values from the imported file, or reset the settings to default.
In the adjacent field, you can select a breakpoint and preview how the imported page will appear at the corresponding screen size.
Group Nesting
By default, elements inside groups are imported together with their groups.
To reduce the number of nested groups, enable "Reduce group nesting." This simplifies the structure: Some groups will be removed, and some elements will be imported as separate layers.
To reduce the number of nested groups, enable "Reduce group nesting." This simplifies the structure: Some groups will be removed, and some elements will be imported as separate layers.
Important: For a more accurate import and fewer unnecessary groups, we recommend enabling this option.
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 limits nesting to three levels.
Other Import Methods
