Cómo usar: HTML y CSS a Webflow
- Pega tu HTML a la izquierda y el CSS correspondiente a la derecha, ya sea de una exportación de código, una plantilla, la salida de Tailwind compilada a CSS o código escrito por ChatGPT o Claude. Las etiquetas
<style>dentro del HTML se detectan automáticamente. - Revisa la vista previa y el informe de conversión: muestra cuántos elementos, clases, combo classes y estilos de breakpoint se crearon, y qué CSS no se pudo asignar.
- Elige Elementos nativos (Div Block, Heading, Paragraph, Link, Image, List…) o Custom Elements (cada etiqueta tal cual está escrita) y haz clic en Copiar a Webflow.
- En el Designer de Webflow selecciona un elemento padre y pulsa Ctrl/⌘+V. Las clases aparecen en el Style Manager, y los estilos de tablet y móvil en sus breakpoints.
¿Por qué convertir HTML en elementos nativos de Webflow?
La forma rápida de llevar código a Webflow es un Code Embed, pero un embed es una caja negra: los clientes no pueden editar el texto, no puedes cambiar su estilo en el panel Style y no aparece en el Navigator. Este convertidor transforma tu marcado en los mismos elementos que construirías a mano: Div Blocks, Sections, Headings, Paragraphs, Text Links, Link Blocks, Images y Lists, cada uno con sus clases. El texto sigue siendo editable en el Designer y en el Editor, y todos los estilos viven en el Style Manager de Webflow.
Cómo se asigna el CSS a las clases de Webflow
| Tu CSS | En Webflow |
|---|---|
.card { … } | Clase card con esos 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 | Móvil horizontal / Móvil vertical |
.button:hover, :focus, :active | Estados Hover, Focused y Pressed |
var(--brand) desde :root | Se resuelve a su valor |
margin: 0 auto, gap, border, flex: 1 | Se expande a las propiedades individuales de Webflow |
h1 { }, .card p { }, @keyframes | Se mantiene en un pequeño Code Embed (<style>), porque las clases de Webflow no pueden expresar selectores de etiqueta ni descendientes |
El CSS mobile-first también funciona: el convertidor calcula los estilos efectivos para cada breakpoint de Webflow (escritorio, tablet, móvil horizontal y móvil vertical) y escribe solo las diferencias, tal como Webflow aplica la cascada desde escritorio hacia abajo.
Elementos nativos frente a Custom Elements
Los elementos nativos ofrecen la mejor experiencia de edición para el contenido: headings, párrafos y enlaces se comportan exactamente igual que los elementos arrastrados desde el panel Add. Las etiquetas sin un equivalente nativo en Webflow, como button, form, input, video, svg en línea y otras, se convierten en Custom Elements con todos sus atributos. Elige Custom Elements (etiquetas exactas) si quieres conservar cada etiqueta 1:1, por ejemplo para marcado semántico o componentes que nunca editarás en el Editor. Los iconos SVG en línea funcionan mejor con la herramienta específica SVG a Webflow.
De dónde sale el HTML
- Secciones generadas con IA: pide a ChatGPT o Claude una sección en HTML y CSS con nombres de clase, y pégala aquí en lugar de reconstruirla a mano.
- Plantillas y kits de UI: plantillas de HTML/CSS o prototipos exportados.
- Tailwind: las clases utilitarias de Tailwind no se traducen bien a clases de Webflow; compílalo primero a CSS plano con nombres de clase semánticos, o usa el Generador de nombres de clase para obtener una estructura limpia.
- Sitios web antiguos: copia el marcado de una sección y su CSS para migrarlo a Webflow.
Consejos para un pegado limpio
- Usa un sistema de nombres, por ejemplo Client-First, antes de pegar. El Verificador de erratas en nombres de clase encuentra errores tipográficos y duplicados en tus clases.
- Las imágenes conservan su URL. Después súbelas al panel Assets de Webflow y cambia el origen, para que se sirvan desde el CDN de Webflow con tamaños responsive.
- Si ya existe en tu proyecto una clase con el mismo nombre, Webflow conserva ambas y añade un número a la pegada: renómbralas o fusionarlas en el Style Manager.
- Convierte espaciados fijos en valores fluidos con la Calculadora de clamp, y pasa los valores de diseño desde Figma con CSS de Figma a Webflow.
Cómo funciona “Copiar a Webflow”
Cuando copias elementos dentro del Designer, Webflow coloca en el portapapeles una descripción JSON de los elementos y sus clases. El convertidor genera los mismos datos (nodos, texto, clases, combo classes y variantes por breakpoint) y los pone en tu portapapeles para que el Designer pueda leerlos. Webflow no documenta oficialmente este formato. Si una pegada falla tras una actualización de Webflow, usa una vez el cuadro de calibración de la página SVG a Webflow; los Custom Elements creados aquí usan el mismo formato aprendido.
También se busca como: html a webflow, css a webflow, convertir html a webflow, pegar html en webflow, código a webflow, webflow importar html, chatgpt html a webflow, tailwind a webflow.
Herramientas que combinan con: HTML y CSS a Webflow
- HTML a Webflow Rich Text — Pega HTML desordenado, de un sitio antiguo, una exportación de WordPress, Google Docs o Word, y obtén un marcado semántico limpio que el elemento Rich Text de Webflow y la importación CMS aceptan sin basura.
- Redirecciones de WordPress a Webflow — Migrar un sitio de WordPress a Webflow cambia casi todas las URLs: rutas de blog con fecha, archivos /category/, barras finales y slugs de páginas.
- Webflow Clipboard Bridge — Webflow guarda los elementos en el portapapeles con un formato especial que no viaja entre navegadores (Firefox → Chrome, Safari → Edge…).
- Editor de componentes de Webflow — Mueve secciones y componentes entre proyectos de Webflow y modifícalos por el camino.
Preguntas frecuentes
¿Puedo pegar HTML directamente en Webflow?
¿Mantiene los estilos responsive y los efectos hover?
max-width se asignan a los breakpoints de Webflow de tablet (991px), móvil horizontal (767px) y móvil vertical (479px), y :hover, :focus y :active se convierten en los estados Hover, Focused y Pressed. El CSS con min-width (mobile-first) se recalcula para cada breakpoint.¿Qué pasa con el CSS que no es un selector de clase simple?
h1), los selectores descendientes (.card p), @keyframes, @font-face y similares no se pueden guardar como clases de Webflow. Por defecto se colocan en un pequeño Code Embed con una etiqueta <style> dentro de la sección pegada, así que el diseño sigue viéndose bien. Desmarca la opción para descartarlos.¿Funciona con HTML de Tailwind o Bootstrap?
px-4 o col-md-6) se convertiría en una clase de Webflow sin estilos, a menos que pegues el CSS correspondiente. Para Webflow es mucho mejor usar unas pocas clases semánticas: compila tu diseño a CSS plano o empieza con el Generador de nombres de clase.