Как пользоваться: Мост буфера Webflow
- Скопируйте элемент: в Webflow Designer выделите его и нажмите Ctrl/⌘+C или используйте кнопку «Copy to Webflow» из devpack.
- Откройте эту страницу в том браузере, где открыт Webflow Designer, щёлкните в области вставки и нажмите Ctrl/⌘+V.
- Проверьте сводку (найденные элементы, классы и ресурсы) и при необходимости отредактируйте JSON.
- Нажмите Copy to Webflow, затем вставьте элемент в Designer.
Почему копирование между браузерами не работает
При копировании элементов Webflow (и такие инструменты, как devpack) помещает их в буфер обмена как application/json в формате @webflow/XscpData. Между браузерами по стандарту передаются только обычный текст и HTML, а пользовательские типы данных хранятся в закрытом формате каждого браузера. Поэтому копия, сделанная в Firefox, в Chrome попадает как обычный текст, и Designer её игнорирует. В некоторых конфигурациях то же происходит между Safari, Edge, Arc, Brave и профилями Chrome.
При этом текстовая копия содержит все данные. Эта страница читает их, проверяет и записывает обратно в буфер как application/json в текущем браузере, что и требуется Designer.
Полезно знать
- Один браузер, один буфер: если devpack и Webflow открыты в одном браузере, мост не нужен: вставляйте элементы прямо в Designer.
- Между проектами Webflow: копирование элементов между сайтами работает и в одном браузере. Классы создаются заново, а изображения привязываются к ресурсам исходного сайта.
- Сохраняйте компоненты на потом: скачайте JSON и открывайте его в любое время. Это простая библиотека фрагментов для повторно используемых секций.
- Ничего не загружается на сервер: данные буфера остаются в вашем браузере.
Создавайте элементы Webflow с помощью HTML & CSS to Webflow, SVG to Webflow или HubSpot Form Styler.
Также ищут как: webflow paste not working, xscpdata, webflow копировать вставить chrome firefox, webflow clipboard json.
Инструменты, которые хорошо сочетаются с Мост буфера Webflow
- Генератор имён классов Webflow — Опишите секцию обычными словами, например «герой с подзаголовком, заголовком, двумя кнопками и картинкой справа», и получите согласованную структуру классов в Client-First, BEM или простом kebab-case.
- Проверка опечаток в классах — Вставьте HTML или укажите URL, чтобы проверить все имена классов: опечатки вроде hero_heding, дубликаты с разным написанием (hero-title и hero_title), автоматические имена Webflow вроде div-block-12 и нарушения правил Client-First или BEM.
- Markdown в Webflow Rich Text — Вставьте Markdown, проверьте предпросмотр и скопируйте его как форматированный текст.
- Редиректы с WordPress на Webflow — При переносе сайта с WordPress на Webflow меняется почти каждый URL: даты в путях блога, архивы /category/, закрывающие слэши и слаги страниц.