Справочный центр
Импорт через расширение для браузера
В инструкции рассказываем, как импортировать дизайн страницы, отдельной секции или элемента в Zero Block с помощью расширения для Google Chrome.
Вы узнаете, как установить расширение, скопировать нужный контент и настроить параметры импорта в редакторе.
Вы узнаете, как установить расширение, скопировать нужный контент и настроить параметры импорта в редакторе.
Важно: Расширение доступно для браузера Google Chrome. Версия для других браузеров будет доступна позднее.
Как подключить расширение
Чтобы подключить расширение для Google Chrome, перейдите по ссылке в Chrome Web Store и нажмите «Установить».
Как импортировать страницу, секцию или элемент в Zero Block
С помощью расширения можно импортировать в Zero Block всю страницу, отдельную секцию или один элемент.
Импорт страницы
Откройте в браузере страницу, которую хотите импортировать в Zero Block. Нажмите значок расширения в верхней панели браузера. В открывшемся окне нажмите «Скопировать всю страницу».
Дождитесь, когда расширение скопирует страницу. Когда контент будет готов к импорту, в окне появится галочка и соответствующее сообщение.
Вернитесь в Zero Block на Тильде и вставьте скопированный контент: нажмите Cmd + V на Mac или Ctrl + V на Windows. Также можно нажать «Вставить» в контекстном меню.
После этого появится окно импорта. В нем можно выбрать способ переноса, настроить брейкпоинты и уменьшить вложенность групп. Подробнее о каждой настройке рассказываем ниже.
Импорт элемента
Чтобы скопировать отдельный элемент, нажмите «Выбрать элемент» в окне расширения. Затем выберите нужный элемент на странице и нажмите «Скопировать».
После этого элемент можно вставить на артборд в Zero Block.
После этого элемент можно вставить на артборд в Zero Block.
Импорт секции
Чтобы скопировать секцию страницы, нажмите значок расширения в браузере и выберите «Выбрать элемент».
Нажмите на элемент внутри нужной секции. Он будет выделен на странице, а в окне расширения появится кнопка «Скопировать».
Рядом с выделенным элементом появится значок стрелки. Нажмите на него, чтобы расширить область выбора и захватить больше элементов из текущей секции.
Когда нужная секция будет выделена полностью, нажмите «Скопировать». После этого секцию можно перенести в Zero Block.
Как задать настройки импорта в Zero Block
После вставки страницы, элемента или секции в Zero Block автоматически откроется окно «Как импортировать?». В нем нужно выбрать настройки переноса.
Важно: При импорте как группы элементы размещаются с координатами 0, 0, поэтому их положение может отличаться от оригинала. На адаптивных экранах расположение может совпадать.
Способы импорта
Добавить как новую группу. Скопированные элементы будут перенесены в Zero Block как отдельная группа или слои. Уже добавленный контент в блоке сохранится. Настройки артборда не изменятся.
Важно: Этот вариант подходит для импорта отдельных элементов или секций, если нужно дополнить текущий дизайн блока.
Добавить как новую группу и заменить все элементы. В блоке останутся только скопированные элементы или группы. Старый контент будет удален. Настройки артборда не изменятся.
Применить настройку к артборду. В блок будут перенесены не только элементы и группы, но и настройки артборда: цвет фона, Auto Layout и другие параметры.
Добавление брейкпоинтов
В окне импорта можно настроить брейкпоинты, которые нужно перенести.
Чтобы добавить дополнительный брейкпоинт, нажмите «Добавить».
Чтобы добавить дополнительный брейкпоинт, нажмите «Добавить».
Чтобы использовать брейкпоинты со страницы, которую вы импортируете, нажмите «Взять брейкпоинты со страницы».
Чтобы вернуть брейкпоинты по умолчанию, нажмите «Сбросить».
Чтобы удалить брейкпоинт, нажмите крестик рядом с ним.
Вложенность групп
По умолчанию элементы, которые находятся в группах, импортируются вместе с этими группами. Чтобы изменить это поведение, включите опцию «Уменьшить вложенность групп». В этом случае количество групп будет меньше или элементы будут перенесены как отдельные слои.
Важно: Для более корректного переноса и уменьшения количества лишних групп рекомендуем включить эту опцию.
В Zero Block есть ограничение на количество вложенных групп. Если вложенность выше лимита, при импорте могут возникнуть ошибки.
В Zero Block есть ограничение на количество вложенных групп. Если вложенность выше лимита, при импорте могут возникнуть ошибки.
Опция «Уменьшить вложенность групп» сокращает вложенность до трех уровней.
Нюансы импорта в Zero Block
Шрифт в макете и проекте на Тильде должен совпадать.
Перед импортом добавьте в проект на Тильде шрифт, который используется на странице с исходным дизайном. Так элементы перенесутся корректнее, а размеры и отступы с большей вероятностью не придется редактировать вручную.
Перед импортом добавьте в проект на Тильде шрифт, который используется на странице с исходным дизайном. Так элементы перенесутся корректнее, а размеры и отступы с большей вероятностью не придется редактировать вручную.
Форма со страницы переносится как форма в Zero Block.
Однако некоторым полям может потребоваться дополнительная настройка.
Это может произойти, если на исходной странице форма была нестандартного размера, содержала неподдерживаемые поля или расширение не смогло распознать часть элементов.
Однако некоторым полям может потребоваться дополнительная настройка.
Это может произойти, если на исходной странице форма была нестандартного размера, содержала неподдерживаемые поля или расширение не смогло распознать часть элементов.
Другие способы импорта
