devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Аудит сайта

Вставка SVG и HTML в Webflow — бесплатное расширение

Скопируйте SVG, HTML или фрагмент любой веб-страницы, нажмите Ctrl+V (⌘+V на Mac) в Webflow Designer, и они появятся в виде нативных элементов Webflow. Бесплатно, без регистрации, всё работает на вашем устройстве.

Установить в ChromeУстановить в Firefox

Edge, Brave, Opera, Vivaldi и Arc устанавливают расширение из Chrome Web Store.

SVG как настоящие элементыИконки из Figma («Copy as SVG»), сайтов с иконками, кода или файла .svg превращаются в элементы svg и path Custom Element, которые можно стилизовать, или в Code Embed.
HTML как нативные элементыКлассы сохраняются, а CSS из <style> становится классами Webflow с брейкпоинтами, состояниями при наведении и комбинированными классами.
Любая веб-страницаСкопированное содержимое страницы превращается в Headings, Paragraphs, Lists, Links и Images, без стилей исходной страницы.
Библиотека компонентовСохраняйте элементы, скопированные в Designer, и вставляйте их снова с новым текстом, ссылками и изображениями.
ПриватностьНикаких сетевых запросов и аналитики. Единственное разрешение — хранилище.
БесплатноБез регистрации, без ограничений и без рекламы.

Как пользоваться

  1. Добавьте расширение в браузер.
  2. Скопируйте SVG, HTML-код или фрагмент веб-страницы.
  3. В Webflow Designer выберите место для вставки и нажмите Ctrl+V (⌘+V на Mac).

Вставки в текстовые поля и редакторы кода, а также настоящие элементы Webflow и обычный текст не изменяются, поэтому обычное копирование и вставка продолжают работать.

Библиотека компонентов

Скопируйте элементы в Designer и нажмите Сохранить в devpack или откройте библиотеку сочетанием Alt+Shift+L. Выберите компонент, заполните его текст, ссылки, изображения и иконки и нажмите Вставить в Designer. Какие части можно редактировать, вы задаёте в Webflow Component Editor; обе части работают с одной и той же библиотекой.

Настройки

  • Включение и выключение расширения.
  • Выбор того, что преобразовывать: SVG, HTML-код, содержимое веб-страниц.
  • Для SVG: нативные элементы или Code Embed, имя класса, размер и currentColor.
  • Калибровка: вставьте скопированный Custom Element в настройки, чтобы расширение узнало актуальный формат Webflow.

Браузеры

БраузерГде установить
Chrome, Microsoft Edge, Brave, Opera, Vivaldi, ArcChrome Web Store
FirefoxFirefox Add-ons (нажмите Ctrl/⌘+V дважды: первая вставка помещает преобразованные элементы в буфер обмена)

Установка не нужна

Те же конвертеры работают на devpack.app: SVG в Webflow, HTML и CSS в Webflow и Webflow Clipboard Bridge. Преобразуйте, нажмите Copy и вставьте в Designer. Все инструменты для Webflow — по ссылке.

Конфиденциальность

Расширение работает только на страницах Webflow Designer и devpack.app. Оно читает буфер обмена при вставке в Designer, чтобы найти SVG или HTML, преобразует его на вашем устройстве и никуда не отправляет ваш буфер обмена, дизайны или историю просмотров. Подробнее — в политике конфиденциальности.

Вопросы

Расширение бесплатное? Да. Оно бесплатное, не требует регистрации и не имеет ограничений.

Почему в Firefox нужно вставлять дважды? Firefox не позволяет расширениям передавать преобразованный контент напрямую на страницу. Первое Ctrl+V помещает преобразованные элементы Webflow в буфер обмена, второе — вставляет их.

Можно ли пользоваться без установки? Да: используйте инструмент SVG в Webflow или HTML и CSS в Webflow, нажмите Copy и вставьте в Designer.