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. Read this guide to learn about how to import a page, an individual 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 popup or upload a file.
Important: CSS styles must be written in the HTML file. You cannot upload a separate CSS file.
Important: The HTML import feature does not support JavaScript. If you need to include JavaScript code on the page, add it separately by using the T123 block. Learn more about using the block in the dedicated guide.
Important: Do not import containers with infinite scrolling and automated loading of elements.
Click "Prepare to Import".
Once the file is prepared, the settings window will open. Check the settings and click "Import."
Done. The HTML code and CSS styles will be converted into Zero Block elements.
Below is an example of what HTML code imported in Zero Block looks like after publishing.
How to Import an Individual Element or Section
To import only an individual element or section, click "Selected", hold down Shift, and select the content you need. 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 Options
HTML code can be imported using one of three options:
Apply settings to the Artboard. The Artboard settings from the HTML 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 be kept unchanged.
Important: Use this option to add an individual element or section to existing content in Zero Block.
Add as a group and replace existing content. The imported elements will be added to the block, and the content created before will be deleted.
Breakpoint Settings
By default, imported content will use the breakpoints already configured in Zero Block.
In the import window, you can add custom breakpoints, use values from the file being imported, or reset the settings to default.
In the import window, you can add custom breakpoints, use values from the file being imported, 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 within groups are imported together with these groups.
To reduce the number of nested groups, enable "Reduce group nesting." This will simplify 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 will simplify the structure: Some groups will be removed, and some elements will be imported 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.
Other Import Options
