Como usar: HTML e CSS para Webflow
- Cole seu HTML à esquerda e o CSS correspondente à direita — de uma exportação de código, um template, saída do Tailwind compilada para CSS ou código escrito pelo ChatGPT ou Claude. As tags
<style>dentro do HTML são detectadas automaticamente. - Confira a prévia e o relatório de conversão: ele mostra quantos elementos, classes, combo classes e estilos de breakpoint foram criados, e quais CSS não puderam ser mapeados.
- Escolha Elementos nativos (Div Block, Heading, Paragraph, Link, Image, List…) ou Custom Elements (cada tag exatamente como escrita) e clique em Copy to Webflow.
- No Designer do Webflow, selecione um elemento pai e pressione Ctrl/⌘+V. As classes aparecem no Style Manager, e os estilos de tablet e mobile ficam nos seus breakpoints.
Por que converter HTML em elementos nativos do Webflow?
O jeito rápido de levar código para o Webflow é um Code Embed — mas um embed é uma caixa-preta: clientes não conseguem editar o texto, você não consegue reestilizar pelo painel de Style e ele não aparece no Navigator. Este conversor transforma seu markup nos mesmos elementos que você criaria à mão: Div Blocks, Sections, Headings, Paragraphs, Text Links, Link Blocks, Images e Lists, cada um com suas classes. O texto continua editável no Designer e no Editor, e todos os estilos ficam no Style Manager do Webflow.
Como o CSS é mapeado para classes do Webflow
| Seu CSS | No Webflow |
|---|---|
.card { … } | Classe card com esses estilos |
class="button is-secondary" + .button.is-secondary | Combo class button is-secondary |
@media (max-width: 991px) | Breakpoint de tablet |
@media (max-width: 767px) / 479px | Mobile landscape / Mobile portrait |
.button:hover, :focus, :active | Estados Hover, Focused e Pressed |
var(--brand) de :root | Resolvido para o seu valor |
margin: 0 auto, gap, border, flex: 1 | Expandido para as propriedades individuais do Webflow |
h1 { }, .card p { }, @keyframes | Mantido em um pequeno Code Embed (<style>) — classes do Webflow não expressam seletores de tag ou descendentes |
CSS mobile-first também funciona: o conversor calcula os estilos efetivos para cada breakpoint do Webflow (desktop, tablet, mobile landscape, mobile portrait) e grava apenas as diferenças, do jeito que o Webflow propaga do desktop para baixo.
Elementos nativos vs Custom Elements
Elementos nativos oferecem a melhor experiência de edição de conteúdo: headings, parágrafos e links se comportam exatamente como elementos arrastados do painel Add. Tags sem equivalente nativo no Webflow — button, form, input, video, svg inline e assim por diante — viram Custom Elements com todos os seus atributos. Escolha Custom Elements (tags exatas) se quiser cada tag preservada 1:1, por exemplo para markup semântico ou componentes que você nunca vai editar no Editor. Ícones SVG inline funcionam melhor com a ferramenta dedicada SVG para Webflow.
De onde vem o HTML
- Seções geradas por IA — peça ao ChatGPT ou Claude uma seção em HTML e CSS com nomes de classes e cole aqui, em vez de recriar à mão.
- Templates e UI kits — templates de HTML/CSS ou protótipos exportados.
- Tailwind — as classes utilitárias do Tailwind não se traduzem bem para classes do Webflow; compile para CSS puro com nomes de classes semânticos antes, ou deixe o Gerador de Nomes de Classes criar uma estrutura limpa.
- Sites antigos — copie o markup de uma seção e seu CSS para migrá-la ao Webflow.
Dicas para uma colagem limpa
- Use um sistema de nomenclatura — por exemplo Client-First — antes de colar. O Verificador de Erros em Nomes de Classes encontra erros de digitação e duplicatas nas suas classes.
- As imagens mantêm a URL. Depois, envie-as para o painel Assets do Webflow e troque a origem, assim elas são servidas pelo CDN do Webflow com tamanhos responsivos.
- Se já existir uma classe com o mesmo nome no seu projeto, o Webflow mantém as duas e adiciona um número à colada — renomeie ou mescle no Style Manager.
- Converta espaçamentos fixos em valores fluidos com a Calculadora de Clamp, e leve valores do Figma com o CSS do Figma para Webflow.
Como o “Copy to Webflow” funciona
Quando você copia elementos dentro do Designer, o Webflow coloca na área de transferência uma descrição em JSON dos elementos e das suas classes. O conversor monta os mesmos dados — nós, texto, classes, combo classes e variantes de breakpoint — e os coloca na sua área de transferência para que o Designer consiga lê-los. O Webflow não documenta oficialmente esse formato. Se alguma colagem falhar após uma atualização do Webflow, use uma vez a caixa de calibração na página SVG para Webflow; os Custom Elements criados aqui usam o mesmo formato aprendido.
Também pesquisado como: html para webflow, css para webflow, código para webflow, colar html no webflow, webflow clipboard, xscpdata, conversor html para webflow, tailwind para webflow.
Ferramentas que combinam com: HTML e CSS para Webflow
- HTML para Webflow Rich Text — Cole HTML bagunçado, de um site antigo, de uma exportação do WordPress, do Google Docs ou do Word, e receba marcação semântica limpa que o elemento Rich Text e a importação de CMS do Webflow aceitam sem lixo.
- Redirecionamentos WordPress para Webflow — Ao migrar um site do WordPress para o Webflow, quase todas as URLs mudam: caminhos de posts com data, arquivos /category/, barras no final e slugs de páginas.
- Webflow Clipboard Bridge — O Webflow coloca elementos na área de transferência em um formato especial que não funciona entre navegadores (Firefox → Chrome, Safari → Edge…).
- Editor de Componentes Webflow — Mova seções e componentes entre projetos do Webflow e altere tudo no caminho.
Perguntas frequentes
Posso colar HTML diretamente no Webflow?
Ele mantém estilos responsivos e efeitos hover?
max-width são mapeadas para os breakpoints do Webflow: tablet (991px), mobile landscape (767px) e mobile portrait (479px), e :hover, :focus e :active viram os estados Hover, Focused e Pressed. CSS com min-width (mobile-first) é recalculado para cada breakpoint.O que acontece com CSS que não é um seletor de classe simples?
h1), seletores descendentes (.card p), @keyframes, @font-face e similares não podem ser guardados como classes do Webflow. Por padrão, eles vão para um pequeno Code Embed com uma tag <style> dentro da seção colada, para que o design continue correto. Desmarque a opção para descartá-los.Funciona com HTML do Tailwind ou Bootstrap?
px-4 ou col-md-6) viraria uma classe do Webflow sem estilos, a menos que você cole o CSS correspondente. Para o Webflow, é muito melhor usar algumas classes semânticas; compile seu design para CSS puro ou comece pelo Gerador de Nomes de Classes.