Limpador de 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.

Atualizado em
Pré-visualização limpa

HTML limpo (importação CSV / API)

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

devpack.app é uma ferramenta independente e não é afiliada, patrocinada ou endossada pela Webflow, Inc. ou pela Figma, Inc. Webflow e Figma são marcas de seus respectivos donos.

Como usar: HTML para Webflow Rich Text

  1. Cole o código HTML ou copie o texto formatado do Google Docs, do Word ou de uma página web e cole direto na caixa (a formatação é capturada como HTML).
  2. A ferramenta remove classes, IDs, estilos inline, atributos data e wrappers de layout, e transforma negrito/itálico em <strong>/<em>.
  3. Clique em Copiar rich text e cole em um elemento Rich Text ou campo CMS do Webflow, ou copie o HTML limpo para uma importação CSV.

Por que limpar o HTML antes de importar no Webflow?

O elemento Rich Text do Webflow aceita um conjunto focado de tags: títulos, parágrafos, links, negrito, itálico, listas, citações, imagens, figuras e quebras de linha. Conteúdo migrado do WordPress ou de outro CMS, ou copiado do Google Docs e do Word, chega envolvido em <div>s e <span>s com classes, estilos inline (font-family, color, font-size), atributos data-* e parágrafos vazios. Importado assim, esse lixo sobrescreve a tipografia do seu Webflow, cria espaçamentos inconsistentes e incha o CMS.

O que o limpador faz

  • Remove todas as classes, ids, estilos e atributos data (mantém href/target/rel nos links e src/alt nas imagens).
  • Remove os wrappers div, span, section, font e similares; transforma divs só com texto em parágrafos.
  • Converte o estilo do Google Docs/Word (font-weight:700, font-style:italic) em <strong> e <em> semânticos.
  • Remove scripts, iframes, formulários e SVGs; opcionalmente converte H1 em H2 (o título da página geralmente é o H1) e remove parágrafos vazios e &nbsp;.

Migrações em massa

Para um blog inteiro, limpe o corpo de cada post e importe pela importação CSV de CMS ou pela API do Webflow. Ambas aceitam HTML para campos Rich Text. Escrevendo conteúdo novo em Markdown? Use o Markdown para Webflow Rich Text.

Também pesquisado como: webflow rich text, limpar html, remover classes html, remover estilos inline, importar cms webflow, google docs para webflow, wordpress para webflow, html para webflow.

Ferramentas que combinam com: HTML para Webflow Rich Text

  • HTML para Markdown — Cole o HTML — ou copie texto formatado direto de uma página web, Google Doc ou e-mail — e receba um Markdown organizado para usar em um README, wiki ou site estático.
  • Formatador HTML — Cole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os blocos <style> e <script> embutidos.
  • SVG para Webflow — Cole um SVG do Figma e copie para o Webflow como Custom Elements de verdade.
  • Corrigir Aspas Curvas para Retas — Código copiado do Slack, Notion, Word ou de um blog não roda?

Perguntas frequentes

Por que o texto colado no Webflow mantém a fonte errada?
Conteúdo copiado de Docs, Word ou outros sites costuma trazer estilos inline. Limpe aqui primeiro para que os estilos próprios do Rich Text do Webflow sejam aplicados.
O Webflow Rich Text suporta tabelas?
Não nativamente. Por padrão, as tabelas são substituídas por uma nota. Para incluí-las, adicione um elemento Embed dentro do rich text.
As imagens são mantidas?
As tags de imagem são mantidas (somente src e alt). Para melhores resultados, envie as imagens para os Assets do Webflow para que recebam tamanhos responsivos.
Posso usar o HTML na API do Webflow ou na importação CSV?
Sim. Copie a saída do HTML limpo e coloque na coluna do campo Rich Text ou no payload da API.
Posso instalar o HTML para Webflow Rich Text como um aplicativo da web e usá-lo offline?
Sim. O HTML para Webflow Rich Text é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas