Probablemente te haya pasado esto. Copias un bloque con buen estilo — una tarjeta de título, un destacado de color — y lo pegas en el editor de WeChat o en un CMS. A veces llega viéndose exactamente bien. Otras veces aterriza como texto desnudo con todo el diseño arrancado. La misma acción, resultado distinto, y parece aleatorio. No lo es. La diferencia es si copiaste HTML en línea.
Entender esta única idea hace que pegar contenido con estilo sea predecible en lugar de una apuesta.
Qué es de verdad el HTML en línea
El estilo web puede vivir en dos sitios. En un sitio web normal, el estilo reside en una hoja de estilos separada, y el HTML solo la referencia por el nombre de la clase: <div class="title-card">. El div carece de sentido por sí solo — el diseño vive en un archivo CSS en otra parte.
El HTML en línea pone el estilo dentro del propio elemento: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Todo lo necesario para renderizar el bloque viaja con el bloque. No hay ningún archivo externo del que depender.
Esa distinción es toda la historia de por qué algunos pegados conservan su diseño y otros no. Cuando pegas en un editor, el editor no recibe la hoja de estilos del sitio web de origen. Si el diseño vivía en esa hoja de estilos, desaparece — obtienes la estructura pelada, es decir, texto de aspecto plano. Si el diseño era en línea, viene con él, y el bloque se renderiza correctamente.
Por qué WeChat y los editores enriquecidos lo necesitan
El editor de WeChat es estricto. Elimina las hojas de estilos externas y filtra mucho del estilo. Un bloque que dependía de una clase definida en otra parte no tiene nada a lo que recurrir una vez dentro de WeChat. Muchos editores de texto enriquecido y campos de pegado de CMS se comportan igual — sanean lo que pegas y conservan solo los atributos en línea.
Así que la forma fiable de mover un bloque con estilo a estos editores es copiarlo como HTML en línea, donde el estilo es autónomo. Entonces incluso un editor estricto tiene todo lo que necesita para mostrar el bloque como fue diseñado.
Cómo funciona copiar un bloque "con formato"
Los navegadores modernos tienen una API de portapapeles que puede colocar contenido enriquecido — HTML con formato — en el portapapeles, no solo texto plano. Cuando una herramienta copia un bloque "como HTML en línea", está usando esa API para poner el marcado autónomo del bloque en tu portapapeles. Luego pegas (Ctrl/Cmd+V) en el editor, y como el estilo era en línea y el portapapeles llevaba el HTML, el bloque aparece con estilo.
Dos cosas tienen que ser ciertas para que esto funcione:
- El marcado debe tener estilo en línea, para que no se necesite ningún archivo externo.
- El portapapeles debe llevarlo como HTML, no como un volcado de texto plano de corchetes angulares.
Acierta con ambas y el pegado "simplemente funciona". Falla en cualquiera y obtienes texto plano o un muro de código visible.
Hacerlo sin editar código a mano
Podrías, en principio, coger un bloque con estilo y poner manualmente en línea cada estilo — mover las reglas de cada clase a un atributo style="" en cada elemento. Para cualquier cosa más allá de un bloque trivial, eso es tedioso y propenso a errores, especialmente con tarjetas SVG donde el estilo está repartido por muchos nodos.
Una herramienta que se ocupa de esto es más fácil. El Extractor de módulos de maquetación de IMG.DIY extrae bloques con estilo del contenido de WeChat pegado y le da a cada uno un botón de copiar que lo pone en tu portapapeles como HTML en línea mediante la API de portapapeles. Haces clic en copiar, cambias al editor de WeChat (o a tu CMS, o a un campo de texto enriquecido), pegas, y el bloque conserva su formato. Sin poner en línea a mano, sin arreglar marcado roto.
Una lista rápida para pegar
Cuando un pegado con estilo sale mal, repasa esto:
- ¿Copiaste HTML en línea, o una captura de pantalla/texto plano? Solo el HTML en línea se pega como un bloque con estilo funcional.
- Pega en el cuerpo normal del editor, no en un modo de "código fuente" o "texto plano", que puede arrancar o escapar el marcado.
- Comprueba el bloque en la vista previa. La propia vista previa de WeChat muestra cómo se renderizará de verdad el bloque en un teléfono — confírmalo ahí antes de publicar.
- Si los colores se ven raros, recolorea antes de copiar. En el extractor puedes hacer clic en un color y cambiarlo en todo el bloque, así que lo copias ya en los colores de tu marca.
Un límite honesto que merece la pena repetir: una herramienta como esta copia y organiza bloques — es un extractor, no un diseñador de plantillas desde cero, y no puede traer un artículo por URL (los navegadores bloquean las descargas entre sitios de páginas de WeChat, así que pegas el contenido). Dentro de esos límites, el HTML en línea es lo que permite que un bloque con estilo sobreviva al viaje de un editor a otro con su diseño intacto.
Una vez que has visto un bloque pegarse a la perfección unas cuantas veces, la aleatoriedad anterior cobra sentido: nunca fue aleatorio. Siempre fue una cuestión de si el estilo viajaba dentro del bloque.