Как пользоваться: HTML и CSS в Webflow
- Вставьте HTML слева, а соответствующий CSS справа. Это может быть экспорт из конструктора, шаблон, Tailwind, скомпилированный в CSS, или код, написанный в ChatGPT или Claude. Теги
<style>внутри HTML подхватываются автоматически. - Проверьте предпросмотр и отчёт о конвертации. В нём видно, сколько элементов, классов, комбо-классов и стилей для брейкпоинтов создано и какой CSS не удалось сопоставить.
- Выберите Нативные элементы (Div Block, Heading, Paragraph, Link, Image, List и др.) или Custom Elements (каждый тег ровно как написан), затем нажмите Скопировать в Webflow.
- В Webflow Designer выделите родительский элемент и нажмите Ctrl/⌘+V. Классы появятся в Style Manager, а стили для планшетов и телефонов окажутся на своих брейкпоинтах.
Зачем конвертировать HTML в нативные элементы Webflow?
Самый быстрый способ перенести код в Webflow — это Code Embed. Но embed работает как чёрный ящик: клиент не может редактировать текст, вы не можете поменять стили на панели Style, и он не отображается в Navigator. Этот конвертер превращает разметку в те же элементы, которые вы собрали бы вручную: Div Block, Section, Heading, Paragraph, Text Link, Link Block, Image и List, каждый со своими классами. Текст остаётся доступным для редактирования в Designer и Editor, а все стили хранятся в Style Manager Webflow.
Как CSS сопоставляется с классами Webflow
| Ваш CSS | В Webflow |
|---|---|
.card { … } | Класс card с этими стилями |
class="button is-secondary" + .button.is-secondary | Комбо-класс button is-secondary |
@media (max-width: 991px) | Брейкпоинт для планшета |
@media (max-width: 767px) / 479px | Mobile landscape / Mobile portrait |
.button:hover, :focus, :active | Состояния Hover, Focused и Pressed |
var(--brand) из :root | Заменяется на своё значение |
margin: 0 auto, gap, border, flex: 1 | Раскладывается на отдельные свойства Webflow |
h1 { }, .card p { }, @keyframes | Сохраняется в небольшом Code Embed (<style>), так как классы Webflow не поддерживают селекторы тегов и потомков |
CSS по принципу mobile-first тоже поддерживается: конвертер вычисляет итоговые стили для каждого брейкпоинта Webflow (desktop, tablet, mobile landscape, mobile portrait) и записывает только отличия, так же как Webflow каскадирует стили от desktop вниз.
Нативные элементы или Custom Elements
Нативные элементы дают лучший опыт редактирования контента: заголовки, абзацы и ссылки ведут себя так же, как элементы, перетащенные из панели Add. Теги без нативного аналога в Webflow, например button, form, input, video, встроенный svg и другие, становятся Custom Elements со всеми атрибутами. Выберите Custom Elements (точные теги), если нужно сохранить каждый тег один к одному, например для семантической разметки или компонентов, которые вы не будете редактировать в Editor. Встроенные SVG-иконки лучше всего переносить с помощью отдельного инструмента SVG в Webflow.
Откуда брать HTML
- Секции, созданные ИИ — попросите ChatGPT или Claude сделать секцию в HTML и CSS с именами классов и вставьте её сюда вместо ручной сборки.
- Шаблоны и UI-киты — HTML/CSS-шаблоны или экспортированные прототипы.
- Tailwind — утилитарные классы Tailwind плохо переходят в классы Webflow. Сначала скомпилируйте проект в простой CSS с осмысленными именами классов или воспользуйтесь генератором имён классов, чтобы получить чистую структуру.
- Старые сайты — скопируйте разметку секции и её CSS, чтобы перенести их в Webflow.
Советы для чистой вставки
- Перед вставкой выберите систему именования, например Client-First. Проверка опечаток в именах классов найдёт опечатки и дубликаты.
- Изображения сохраняют свои URL. После вставки загрузите их в панель Assets Webflow и замените источник, чтобы они раздавались из CDN Webflow с адаптивными размерами.
- Если класс с таким же именем уже есть в проекте, Webflow оставит оба и добавит число к вставленному. Переименуйте или объедините их в Style Manager.
- Чтобы заменить фиксированные отступы плавными значениями, используйте калькулятор clamp, а значения дизайна из Figma переносите с помощью Figma CSS в Webflow.
Как работает «Скопировать в Webflow»
Когда вы копируете элементы внутри Designer, Webflow помещает в буфер обмена JSON-описание элементов и их классов. Конвертер формирует те же данные — узлы, текст, классы, комбо-классы и варианты для брейкпоинтов — и кладёт их в буфер обмена, чтобы Designer мог их прочитать. Webflow официально не документирует этот формат. Если после обновления Webflow вставка перестала работать, один раз воспользуйтесь окном калибровки на странице SVG в Webflow. Custom Elements, созданные здесь, используют тот же изученный формат.
Также ищут как: html в webflow, css в webflow, код в webflow, вставить html в webflow, буфер обмена webflow, xscpdata, конвертер html в webflow, tailwind в webflow.
Инструменты, которые хорошо сочетаются с HTML и CSS в Webflow
- HTML в Webflow Rich Text — Вставьте «грязный» HTML со старого сайта, экспорта из WordPress, Google Docs или Word и получите чистую семантическую разметку, которую элемент Rich Text в Webflow и импорт CMS принимают без лишнего мусора.
- Редиректы с WordPress на Webflow — При переносе сайта с WordPress на Webflow меняется почти каждый URL: даты в путях блога, архивы /category/, закрывающие слэши и слаги страниц.
- Мост буфера Webflow — Webflow помещает элементы в буфер обмена в особом формате, который не переносится между браузерами (Firefox → Chrome, Safari → Edge и т.
- Редактор компонентов Webflow — Переносите секции и компоненты между проектами Webflow и меняйте их по пути.
Часто задаваемые вопросы
Можно ли вставить HTML прямо в Webflow?
Сохраняются ли адаптивные стили и hover-эффекты?
max-width сопоставляются с брейкпоинтами Webflow: планшет (991px), mobile landscape (767px) и mobile portrait (479px). А :hover, :focus и :active становятся состояниями Hover, Focused и Pressed. CSS с min-width (mobile-first) пересчитывается для каждого брейкпоинта.Что происходит с CSS, который не является простым селектором класса?
h1), селекторы потомков (.card p), @keyframes, @font-face и похожие правила нельзя сохранить как классы Webflow. По умолчанию они помещаются в небольшой Code Embed с тегом <style> внутри вставленной секции, поэтому дизайн выглядит правильно. Снимите галочку, если хотите их отбросить.Работает ли конвертер с HTML из Tailwind или Bootstrap?
px-4 или col-md-6) станет классом Webflow без стилей, если вы не вставите соответствующий CSS. Для Webflow гораздо лучше использовать несколько семантических классов: скомпилируйте дизайн в простой CSS или начните с генератора имён классов.