Как пользоваться: Редактор компонентов Webflow
- В Webflow Designer выберите секцию или компонент и нажмите Ctrl/⌘+C. Щёлкните по области вставки здесь и нажмите Ctrl/⌘+V.
- Щёлкните элемент в Navigator, чтобы изменить его текст, ссылку, изображение, тег, ID, пользовательские атрибуты и классы. Предпросмотр обновляется по мере ввода.
- В разделе Classes переименуйте класс, измените его стили, добавьте префикс ко всем классам или удалите классы, которые не используются ни одним элементом. Undo отменяет последнее действие.
- Чтобы переиспользовать компонент, нажмите Suggest props (или Make prop рядом с полем), назовите пропсы и нажмите Save to library. В следующий раз откройте его в разделе Your library, заполните пропсы и скопируйте.
- Нажмите Copy to Webflow, откройте другой проект, выберите место для вставки и нажмите Ctrl/⌘+V. Download .json сохраняет копию для повторного использования.
Копируйте компоненты между проектами Webflow — и меняйте их по пути
Webflow уже позволяет копировать элементы из одного проекта и вставлять их в другой в том же браузере. Но он не позволяет менять их по пути: переименовать классы, которые конфликтуют со стайлгайдом другого проекта, заменить текст, исправить ссылки на старый сайт или убрать ненужные части. Этот редактор работает посередине. Он читает данные буфера обмена Webflow, показывает их так же, как Designer, позволяет редактировать и возвращает обратно в буфер обмена в том же формате.
- Navigator и свойства — каждый элемент с его типом, классами и текстом. Редактируйте текст, URL ссылок и опцию «открывать в новой вкладке», источники изображений и alt-текст, уровни заголовков и теги секций, ID и пользовательские атрибуты или удаляйте элемент вместе со всем содержимым.
- Классы со стилями — переименовывайте любой класс, редактируйте его базовые стили, смотрите, какие элементы его используют, и удаляйте те, которые никто не использует. Стили для брейкпоинтов и hover переносятся вместе с классом.
- Префикс классов — добавьте
acme-(или любой другой префикс) ко всем классам сразу, чтобы вставленные классы не смешивались и не путались с уже существующими в другом проекте. - Пропсы и библиотека — отметьте текст, ссылки, изображения, иконки и переключатели показа/скрытия, которые меняются от использования к использованию, как пропсы, сохраните компонент в библиотеку в этом браузере, и в следующий раз просто заполните короткую форму. Пропсы сохраняются в скачанном .json; при копировании в Webflow они не переносятся, так как Webflow вставляет обычные элементы.
- Живой предпросмотр в ширине десктопа, планшета и телефона, построенный на основе стилей классов.
- Предупреждения о частях, которые переносятся не полностью: интеракции, компоненты, которые были отвязаны при копировании, удалённые привязки CMS и изображения, которые лежат в библиотеке ассетов старого проекта.
- Ничего не загружается на сервер — данные остаются в вашем браузере. Последний компонент сохраняется на этом устройстве, поэтому перезагрузка страницы его не удалит.
Webflow открыт в другом браузере? Webflow Clipboard Bridge переносит элементы между браузерами. Создаёте что-то новое из кода? Используйте HTML и CSS в Webflow или SVG в Webflow. Проверить имена классов можно с помощью проверки опечаток в именах классов.
Также ищут как: webflow components, class prefix.
Инструменты, которые хорошо сочетаются с Редактор компонентов Webflow
- Генератор имён классов Webflow — Опишите секцию обычными словами, например «герой с подзаголовком, заголовком, двумя кнопками и картинкой справа», и получите согласованную структуру классов в Client-First, BEM или простом kebab-case.
- Figma CSS в Webflow — Превратите результат «Copy as CSS» из Figma в аккуратные значения, которые можно сразу вводить в панель Style Webflow.
- Редиректы с WordPress на Webflow — При переносе сайта с WordPress на Webflow меняется почти каждый URL: даты в путях блога, архивы /category/, закрывающие слэши и слаги страниц.
- Markdown в Webflow Rich Text — Вставьте Markdown, проверьте предпросмотр и скопируйте его как форматированный текст.
Часто задаваемые вопросы
Как скопировать секцию из одного проекта Webflow в другой?
Выберите секцию в Designer и нажмите Ctrl/⌘+C, откройте другой проект в том же браузере, выберите место для вставки и нажмите Ctrl/⌘+V. Чтобы сначала что-то изменить, вставьте секцию в этот редактор, отредактируйте её и нажмите Copy to Webflow перед вставкой.
Что происходит с именами классов, которые уже есть в другом проекте?
Webflow сопоставляет вставленные классы с существующими по имени, поэтому вставленный класс «button» может подхватить стили кнопок другого проекта или конфликтовать с ними. Добавьте префикс здесь или переименуйте класс, чтобы они не пересекались.
Переносятся ли интеракции и компоненты?
Интеракции входят в данные буфера обмена и обычно вставляются вместе с элементами, но после вставки проверьте их триггеры. Компоненты при копировании отвязываются, поэтому вставляются как обычные элементы; редактор сообщает, сколько их было.
Переносятся ли изображения?
Изображения из библиотеки ассетов исходного проекта передаются по URL и обычно загружаются Webflow заново при вставке. Если изображение не загрузилось, укажите здесь источник с URL, который вы контролируете.
Можно ли перенести компонент вместе с его свойствами в другой проект?
Через буфер обмена — нет: Webflow отвязывает компоненты при копировании и не переносит их свойства. Здесь вы можете воссоздать их как пропсы devpack: заполните их, скопируйте, а затем выберите Create component в другом проекте, если хотите снова получить компонент Webflow. Функция Libraries в Webflow позволяет делиться настоящими компонентами между сайтами одного воркспейса на тарифах, где она доступна.
Где хранится моя библиотека компонентов?
В локальном хранилище этого браузера, только на этом устройстве. Используйте Download .json, чтобы сохранить резервную копию или перенести компонент на другой компьютер, а затем откройте файл здесь, чтобы продолжить работу.
Это официальный инструмент Webflow?
Нет. devpack независим. Инструмент работает с данными буфера обмена, которые Designer создаёт при копировании элементов, и Webflow может изменить их в любой момент.
Можно ли установить Редактор компонентов Webflow как веб-приложение и пользоваться им офлайн?
Да. Редактор компонентов Webflow — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.