Чтобы подключить расширение для Google Chrome, перейдите по ссылке в Chrome Web Store и нажмите «Установить».

С помощью расширения можно импортировать в Zero Block всю страницу, отдельную секцию или один элемент.

Откройте в браузере страницу, которую хотите импортировать в Zero Block. Нажмите значок расширения в верхней панели браузера. В открывшемся окне нажмите «Скопировать всю страницу».

Дождитесь, когда расширение скопирует страницу. Когда контент будет готов к импорту, в окне появится галочка и соответствующее сообщение.

Вернитесь в Zero Block на Тильде и вставьте скопированный контент: нажмите Cmd + V на Mac или Ctrl + V на Windows. Также можно нажать «Вставить» в контекстном меню.

После этого появится окно импорта. В нем можно выбрать способ переноса, настроить брейкпоинты и уменьшить вложенность групп. Подробнее о каждой настройке рассказываем ниже.

Чтобы скопировать отдельный элемент, нажмите «Выбрать элемент» в окне расширения. Затем выберите нужный элемент на странице и нажмите «Скопировать».

После этого элемент можно вставить на артборд в Zero Block.

Чтобы скопировать секцию страницы, нажмите значок расширения в браузере и выберите «Выбрать элемент».

Нажмите на элемент внутри нужной секции. Он будет выделен на странице, а в окне расширения появится кнопка «Скопировать».

Рядом с выделенным элементом появится значок стрелки. Нажмите на него, чтобы расширить область выбора и захватить больше элементов из текущей секции.

Когда нужная секция будет выделена полностью, нажмите «Скопировать». После этого секцию можно перенести в Zero Block.

После вставки страницы, элемента или секции в Zero Block автоматически откроется окно «Как импортировать?». В нем нужно выбрать настройки переноса.

Добавить как новую группу. Скопированные элементы будут перенесены в Zero Block как отдельная группа или слои. Уже добавленный контент в блоке сохранится. Настройки артборда не изменятся.

Добавить как новую группу и заменить все элементы. В блоке останутся только скопированные элементы или группы. Старый контент будет удален. Настройки артборда не изменятся.

Применить настройку к артборду. В блок будут перенесены не только элементы и группы, но и настройки артборда: цвет фона, Auto Layout и другие параметры.

В окне импорта можно настроить брейкпоинты, которые нужно перенести.

Чтобы добавить дополнительный брейкпоинт, нажмите «Добавить».

Чтобы использовать брейкпоинты со страницы, которую вы импортируете, нажмите «Взять брейкпоинты со страницы».

Чтобы вернуть брейкпоинты по умолчанию, нажмите «Сбросить».

Чтобы удалить брейкпоинт, нажмите крестик рядом с ним.

По умолчанию элементы, которые находятся в группах, импортируются вместе с этими группами. Чтобы изменить это поведение, включите опцию «Уменьшить вложенность групп». В этом случае количество групп будет меньше или элементы будут перенесены как отдельные слои.

Шрифт в макете и проекте на Тильде должен совпадать.

Перед импортом добавьте в проект на Тильде шрифт, который используется на странице с исходным дизайном. Так элементы перенесутся корректнее, а размеры и отступы с большей вероятностью не придется редактировать вручную.

Форма со страницы переносится как форма в Zero Block.

Однако некоторым полям может потребоваться дополнительная настройка.
Это может произойти, если на исходной странице форма была нестандартного размера, содержала неподдерживаемые поля или расширение не смогло распознать часть элементов.