| Table of Contents |
|---|
Panorámica
En el editor BEE encontrarás el contenido "bloque HTML", que te permite añadir a tus mensajes un bloque de HTML customizado. Para usarlo, arrastra el bloque de HTML disponible en la pestaña "Contenido", y suéltalo en el cuerpo del mensaje:
...
Todo lo que tienes que hacer es pegar tu HTML en el área de texto bajo "Propiedades de contenido" (aparecerá seleccionando el bloque). El sistema mostrará la sintaxis y formateará el código para que sea más fácil de leer.
Ventajas
Hay muchos casos donde un bloque de HTML customizado te puede ser útil:
- Contenidos personalizados: no teniendo la limitación de unos parámetros predefinidos, tienes más control granular
- Contenidos no disponibles en BEE: puedes insertar contenidos que no son nativamente están disponibles en BEE (por ejemplo, videos en HTML5, enlaces "anchor" y una tabla que los contenga, y más)
- Efectos gráficos avanzados con CSS: elementos de animación CSS no son soportados por todos los clientes de correo, pero si se gestionan correctamente pueden hacer tu mensaje viral
- Contenidos en tiempo real de terceras partes: recomendaciones de productos, anuncios dinámicos, mapas personalizados, cuentas regresivas., etc...
Limitaciones
Al usar esta funcionalidad de BEE, recuerda que añadir tu código HTML puede afectar la correcta visualización del mensaje en algunos clientes de correo, impactando la responsividad, es decir la capacidad de adaptarse al tamaño de la pantalla. Algunas recomendaciones:
- asegúrate que estés usando código HTML responsivo
- haz pruebas de envío adicionales para estar seguro que todo se visualice correctamente
- no uses algunos tags de HTML como "script" o "iframe" porque los clientes de correo los bloquean por razones de seguridad.
Tags y atributos HTML permitidos
Para los expertos de código HTML, he aquí un listado de los tags permitidos:
| Info | ||
|---|---|---|
| ||
a, abbr, acronym, address, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4,h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var |
Este es el listadi listado de los atributos permitidos:
...
| general attributes | style, id, class, data-*, title |
| a | href, name, target |
| img | align, alt, border height, hspace, src, vspace, width |
| table | align, bgcolor, border, cellpadding, cellspacing, width |
| tbody | align, valign |
| td | align, bgcolor, colspan, height, rowspan, valign, width |
| tr | align, bgcolor, valign |
tfoot | align, valign |
| th | align, bicolor, colspan, height, rowspan, valign, width |
| thead | align, valign |
| li | type |
Ejemplo: insertar una cuenta regresiva en un email
Las cuentas regresivas son dinámicas, fáciles de usar y captan la atención del destinatario. Las marcas las usan para presentar una oferta last-minute, una inscripción a un curso, el inicio de un evento, etc.
...