Ir al contenido principal
¿Cómo añadir contenido HTML?

Conoce cómo agregar y personaliza tu código HTML desde el editor.

Actualizado hace más de 2 años

El bloque de contenido HTML personalizado te permite agregar fácilmente tu propio código HTML a un mensaje de correo electrónico que está diseñando con el editor de Woowup. Es tan simple de usar como un bloque de texto.

¿Por qué utilizar un código personalizado?

Existen muchos escenarios en los que tiene sentido agregar tu propio código HTML:

  • Agregar más contenido personalizado
    No está limitado por un conjunto de parámetros predefinidos y, por lo tanto, puedes tener un control más granular de los estilos aplicados.

  • Agregar video HTML 5, enlaces de anclaje, etc.
    Puedes agregar contenido que no está disponible como elemento de contenido estándar en el editor (video HTML 5, enlaces de anclaje, etc.).

  • Agregar efectos avanzados con CSS
    ¡Sé creativo con las animaciones! Los clientes de correo electrónico no admiten ampliamente los efectos de animación, pero si los administras correctamente, pueden ayudar a que tu mensaje se vuelva viral.

  • Agregar contenido en vivo de proveedores externos
    Recomendaciones de productos, anuncios dinámicos, mapas personalizados, cuentas regresivas, todo este contenido avanzado puede ser incluido fácilmente en un mensaje creado con el editor de Woowup. Simplemente deberás copiar y pegar el código proporcionado por tu proveedor.


Sólo expertos en HTML

Utilizar tu propio código puede afectar la forma en que se procesa el mensaje en los clientes de correo electrónico, evitando que se ajuste al tamaño de la pantalla (es decir, la "capacidad de respuesta" del mensaje). Asegúrate de utilizar HTML que sea compatible con el correo electrónico y receptivo.



¿Cuáles son los pasos para añadirlo?

Simplemente deberás arrastrar un bloque de contenido HTML hacia la plantilla. Se puede colocar solo, con otros elementos de contenido HTML o mezclado con otros tipos de contenido.

Una vez insertado mostrará un texto de marcador de posición predeterminado. Haz click en él y el panel de propiedades del lado derecho mostrará el panel de edición del código HTML. Allí encontrarás un código de marcador de posición dentro del área de edición:

Pega tu propio código HTML o escríbelo directamente en el área de edición. El sistema resaltará tu sintaxis e insertará tu código para que sea más legible: 

¿Qué etiquetas HTML están permitidas?

El contenido HTML corregirá automáticamente algunos problemas (como las etiquetas HTML que se dejan abiertas), y eliminará el código que no se puede usar (como las etiquetas de script o iframe, estas etiquetas de código no están permitidas por la mayoría de los clientes de correo electrónico, pueden causar problemas de entregabilidad o riesgos de seguridad para el editor y las aplicaciones que lo ejecutan).


 
Lista de etiquetas permitidas:

a, abbr, acrónimo, dirección, área, b, bdo, grande, blockquote, botón, título, centro, citar, código, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, fuente, formulario, h1, h2, h3, h4, h5, h6, i, ins, kbd, etiqueta, leyenda, li, mapa, menú, ol, optgroup, opción, p, pre, q, s, samp, seleccionar, pequeño, span, strike, fuerte, sub, sup, mesa, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var
Lista de atributos permitidos:
atributos generales: estilo, id, clase, data- *, título
a: href, nombre, objetivo
img: alinear, alt, altura del borde, hspace, src, vspace, ancho, usemap
table: align, bgcolor, border, cellpadding, cellspacing, ancho
tbody: alinear, valign
td: alinear, bgcolor, colspan, altura, rowspan, valign, ancho
tr: alinear, bgcolor, valign
tfoot: alinear, valign
th: alinear, bicolor, colspan, altura, rowspan, valign, ancho
thead: alinear, valign
li: tipo
mapa: nombre
área: alt, coords, href, forma, objetivo


¿Has creado toda tu plantilla en HTML y deseas importarla dentro del editor? en el siguiente artículo verás cómo lograrlo: Cómo puedes importar un archivo HTML

¿Ha quedado contestada tu pregunta?