El bloque HTML personalizado te permite agregar tu propio código a los correos electrónicos en el Editor de correos electrónicos de Omnisend. Úsalo para incrustar widgets de terceros, aplicar estilos personalizados o insertar elementos de contenido avanzados como temporizadores de cuenta regresiva.
Dos formas de usar HTML personalizado en Omnisend:
Bloque HTML (arrastrar y soltar en el Editor de correos electrónicos): Agrega fragmentos de código dentro de un correo electrónico. Utiliza para widgets, tablas o CSS personalizado.
Importar plantilla HTML (Configuración de la Tienda → Plantillas guardadas): Carga un diseño de correo electrónico completo codificado externamente. Aprende más: Importar Plantilla HTML
Este artículo cubre el flujo de bloques HTML para Campañas de Correo Electrónico y Flujos de Automatización.
Antes de empezar
Necesitarás conocimientos básicos de HTML y CSS en línea. El bloque HTML requiere escribir o editar código manualmente.
El bloque HTML solo admite contenido del cuerpo. Elimina
<!DOCTYPE><head><body>No todos los tags HTML son compatibles. Elementos como
<iframe><script><div><font>etiquetas soportadas a continuación.Siempre prueba tu correo electrónico enviándotelo a ti mismo antes de lanzar. La representación varía entre Gmail, Outlook, Apple Mail y otros clientes.
Antes de agregar HTML, verifica:
Elimina las etiquetas
<!DOCTYPE>,<head>y<body>– el bloque HTML solo admite contenido del cuerpoPega desde un editor de texto plano o usa 'Borrar formato' si copias desde Canva, Word o editores visuales
Mantén las etiquetas vacías
<p></p>incluso si no se usan – son requeridas para la validaciónAsegúrate de que las URL de las imágenes comiencen con
https://y sean accesibles públicamente
Agregar un Bloque HTML Personalizado
1. En el Editor de correos electrónicos, abre el menú Agregar elementos y arrastra el bloque HTML a tu contenido de correo electrónico.
2. Haz clic en el bloque HTML para abrir el editor HTML en la barra lateral derecha.
3. Pega o escribe tu código HTML en el editor.
4. Haz clic en Guardar.
El bloque HTML te permite agregar código personalizado como temporizadores de cuenta regresiva, tablas y widgets. Utiliza CSS en línea para el estilo y prueba tu correo electrónico antes de enviar.
💬 Aprende más sobre los Fundamentos del HTML de Correo Electrónico.
Etiquetas HTML Permitidas y Elementos CSS Soportados
Para asegurar que tus correos electrónicos sean compatibles con los principales clientes de correo electrónico, el bloque HTML solo admite un conjunto limitado de etiquetas HTML, atributos y estilos CSS.
⚠️ Nota: El bloque HTML solo admite la parte <body> del correo electrónico. La sección <head> debe ser omitida.
Etiquetas HTML Soportadas
<a><p><br><span><hr><ul><li><ol><u><strong><em><s><sub><sup><pre><h1><h2><h3><img><table><tr><td>
Ver la lista completa con atributos:
Etiqueta HTML | Soportado | Notas/limitaciones |
| ✅ Sí | Los enlaces son compatibles en todos los principales clientes de correo electrónico |
| ✅ Sí | Se muestra como texto en negrita |
| ✅ Sí | El mismo renderizado que |
| ✅ Sí | Se muestra como texto en cursiva |
| ✅ Sí | El mismo renderizado que |
| ✅ Sí | El soporte de subrayado varía ligeramente según el cliente |
| ✅ Sí | El soporte de tachado puede variar visualmente |
| ✅ Sí | El mismo comportamiento que |
| ✅ Sí | Estilos en línea solamente |
| ✅ Sí | El espaciado de párrafos puede diferir según el cliente |
| ✅ Sí | Se admiten saltos de línea |
| ✅ Sí | La indentación y el espaciado varían según el cliente |
| ✅ Sí | El tamaño de fuente y el espaciado pueden diferir según el cliente de correo electrónico |
| ✅ Sí | Las imágenes deben usar URLs absolutas |
| ✅ Sí | Recomendado para diseño |
| ✅ Sí | Estructura soportada; el estilo puede variar |
| ✅ Sí | Ampliamente soportado |
| ✅ Sí | Usar con precaución para el diseño |
| ✅ Sí | El estilo es limitado en algunos clientes |
Aunque estas etiquetas HTML son compatibles en los correos electrónicos de Omnisend, la representación puede variar entre los clientes de correo electrónico (como Gmail, Outlook, Apple Mail y aplicaciones móviles).
Elementos de enlace y estilo soportados
Soporte para el elemento HTML <link>
Uso | Soportado | Notas |
| ❌ No | Las hojas de estilo externas son ignoradas o eliminadas por la mayoría de los clientes de correo electrónico |
| ❌ No | No soportado en el HTML del correo electrónico |
Importante: Los clientes de correo electrónico no no soporta archivos CSS externos. Cualquier estilo añadido usando <link>
Mejor práctica: Siempre usa CSS en línea o, en casos limitados, un <style>
<style>
Uso | Soportado | Notas |
| ⚠️ Parcial | Soportado en muchos clientes, pero no en todos |
| ⚠️ Parcial | Puede ser eliminado o ignorado por algunos clientes |
Limitaciones importantes:
Outlook (Windows) tiene soporte CSS limitado incluso cuando
<style>está permitidoAlgunos clientes de correo electrónico mueven o reescriben bloques
<style>CSS dentro de
<style>bloques puede ser ignorado en partes
Mejor práctica:
Para el renderizado más confiable:
Usa CSS en línea siempre que sea posible
Usa
<style>bloques solo para reglas simples y no críticasEvita depender de
<style>bloques para diseño o comportamiento responsivo
Propiedades CSS soportadas
El bloque HTML admite solo CSS en línea (a través de atributos style=).
Categorías CSS soportadas:
Propiedades de fondo
Propiedades de caja y borde
Propiedades de texto
Propiedades de tabla
Consultas de medios
Propiedades de fondo CSS soportadas
Propiedad CSS | Soportado | Notas/limitaciones |
| ✅ Sí | Totalmente compatible en clientes de correo electrónico |
| ⚠️ Parcial | No soportado en Outlook (Windows). Usa colores de fondo de respaldo |
| ⚠️ Parcial | Ignorado por algunas versiones de Outlook |
| ⚠️ Parcial | Comportamiento inconsistente en Outlook |
| ⚠️ Parcial | No soportado en Outlook (Windows) |
Consejo: Siempre establece un background-color
Propiedades de caja y borde CSS
propiedad CSS | Compatible | Notas/limitaciones |
| ✅ Sí | Totalmente compatible |
| ⚠️ Parcial | No es compatible en Outlook (Windows) |
| ❌ No | No soportado de manera confiable |
| ❌ No | Ignorado en muchos clientes, especialmente Outlook |
| ✅ Sí | Totalmente soportado |
| ⚠️ Parcial | Puede comportarse de manera inconsistente en Outlook |
| ⚠️ Parcial | No es compatible en Outlook (Windows) |
| ⚠️ Parcial | No es compatible en Outlook (Windows) |
Consejo: Utiliza diseños basados en tablas con anchos fijos para obtener los resultados más consistentes.
consultas de medios CSS
característica CSS | Compatible | Notas/limitaciones |
| ⚠️ Parcial | No es compatible en Outlook (Windows) o Outlook.com |
| ⚠️ Parcial | Ignorado por Outlook (Windows) |
| ⚠️ Parcial | Ignorado por Outlook (Windows) |
| ⚠️ Parcial | No es compatible en Outlook |
Importante: El diseño responsivo funciona mejor en Apple Mail, aplicaciones móviles de Gmail y Yahoo Mail, pero no en Outlook (Windows).
propiedades de texto CSS
propiedad CSS | Compatible | Notas/limitaciones |
| ✅ Sí | Usa solo fuentes seguras para la web |
| ⚠️ Parcial | Outlook puede sobrescribir valores |
| ⚠️ Parcial | Algunos pesos pueden no renderizarse como se esperaba |
| ✅ Sí | Totalmente compatible |
| ⚠️ Parcial | Soporte limitado |
| ⚠️ Parcial | Puede ser ignorado en algunos clientes |
| ✅ Sí | Ampliamente soportado |
| ✅ Sí | Totalmente soportado |
| ⚠️ Parcial | Soporte inconsistente |
| ❌ No | No se soporta de manera confiable en todos los clientes |
Consejo: Usa fuentes del sistema como Arial, Helvetica, Georgia o Times New Roman.
Propiedades de tabla CSS
Propiedad CSS | Soportado | Notas/limitaciones |
| ⚠️ Parcial | Outlook tiene un comportamiento inconsistente |
| ⚠️ Parcial | No soportado en Outlook (Windows) |
| ⚠️ Parcial | Soporte limitado |
Mejor práctica: Usa atributos de tabla HTML (cellpaddingcellspacing
Notas adicionales
El soporte de Omnisend no puede ayudar con problemas de código personalizado. Si tu elemento personalizado no se muestra como se esperaba, contacta al proveedor del fragmento de código o consulta a un desarrollador.
Siempre prueba antes de enviar. La representación del correo electrónico varía entre clientes (Gmail, Outlook, Apple Mail, etc.).
Solución de problemas
Mi bloque HTML desaparece o no se guarda. ¿Qué está mal?
Tu código contiene etiquetas no soportadas o problemas de codificación.
Para corregir:
Copia tu HTML y pégalo en htmlcorrector.com, luego pega la versión limpia de nuevo en Omnisend.
Si copiaste de Word, Canva u otro editor, selecciona el texto en Omnisend y haz clic en Limpiar formato antes de guardar.
Verifica que no hayas eliminado las etiquetas envolventes requeridas
<p></p>– son necesarias para la validación incluso si están vacías.
Etiquetas no soportadas que causan errores:
<iframe><script><div><font><video><audio><object><embed>
La vista previa muestra en blanco aunque el código parece correcto en el constructor.
Las vistas previas en blanco suelen significar que las URL de las imágenes faltan https://, o has eliminado etiquetas envolventes requeridas.
Para solucionar:
Verifica que todas las URL de imágenes comiencen con
https://y sean accesibles públicamente.Verifica que las etiquetas
<p></p>estén presentes (incluso si están vacías).Prueba primero con HTML simple:
<p style="color:blue;">Test</p>. Si funciona, agrega tu código completo gradualmente para aislar el problema.
¿Puedo editar el código HTML completo de mi correo electrónico entero (no solo el bloque HTML)?
No. El Editor de correos electrónicos de Omnisend es visual y no proporciona un editor HTML en bruto para todo el correo electrónico.
Solo puedes editar HTML dentro de bloques HTML personalizados individuales.
Para editar el HTML completo del correo electrónico:
Abre tu correo electrónico en el Editor de correos electrónicos.
Usa el Inspeccionar del navegador → ver
#document→ copiar HTML completo.Edita el HTML externamente.
Reimportar a través de Ajustes de Tienda → Plantillas Guardadas → Importar Plantilla → Pegar Código HTML.
Estoy usando CSS !important para controlar los colores del modo oscuro, pero no está funcionando.
Los clientes de correo electrónico como Gmail, Outlook y Apple Mail anulan el CSS en modo oscuro independientemente de las declaraciones !important.
Recomendación:
Diseña tu correo electrónico para que se vea bien tanto en modos claro como oscuro. Prueba usando Vista previa → Modo oscuro antes de enviar.
⚠️ Nota: El comportamiento del modo oscuro es controlado por el cliente de correo electrónico del destinatario, no por tu código. Algunos clientes invierten los colores automáticamente; otros aplican ajustes selectivos.
Recibo un error que dice "Tu código HTML necesita ajustes." ¿Cómo encuentro el problema específico?
Omnisend no resalta la línea exacta que causa el error.
Para solucionar:
Usa htmlcorrector.com para corregir automáticamente problemas comunes.
Verifica manualmente si hay etiquetas no soportadas como
<iframe>,<script>,<div>,<font>,<!DOCTYPE>,<head>.Intenta pegar HTML de prueba simple (por ejemplo,
<p>Test</p>) para confirmar que el bloque funciona, luego agrega tu código completo en secciones.
Casos de uso
Temporizadores de cuenta regresiva
Puedes agregar temporizadores de cuenta regresiva a las Campañas de Correo electrónico o Flujos de trabajo de Automatización utilizando el bloque HTML personalizado.
Elige tu configuración:
Campañas de Correo Electrónico: Temporizador de cuenta regresiva estático (fecha/hora de finalización fija)
Flujos de Trabajo de Automatización: Temporizador de cuenta regresiva dinámico (calcula desde el tiempo de envío)
Temporizadores de Cuenta Regresiva en Campañas de Correo Electrónico
Paso 1: Arrastra y suelta el Bloque HTML en tu plantilla de correo electrónico.
Paso 2: Crea un temporizador de cuenta regresiva:
Ve a Sendtric y genera un temporizador de cuenta regresiva.
⚠️ Nota: Sendtric requiere un plan de pago para temporizadores de cuenta regresiva activos.Haz clic en Generar y copia el código.
Paso 3: Pega el código en el bloque HTML en Omnisend y haz clic en Guardar.
Para centrar el temporizador:
Encuentra
style="display: block;"Reemplaza con
style="display: block; margin-left: auto; margin-right: auto; width: 50%"
Para hacer que el temporizador sea dinámico (cuente desde el tiempo de envío):
Agrega [[ current_date | date: "%s" | plus: 86400 ]] a la URL de la imagen.
Esta función convierte la fecha/hora actual en segundos y añade 86400 segundos (1 día) al tiempo de envío.
Ejemplo:
<img src="http://gen.sendtric.com/countdown/vtkfdyi20u?to=[[ current_date | date: '%s' | plus: 86400 ]]" style="display: block;" />
Puedes cambiar 86400 a cualquier número de segundos. Por ejemplo:
86400 segundos = 1 día
172800 segundos = 2 días
604800 segundos = 7 días
💡 Alternativas gratuitas: NiftyImages ofrece temporizadores dinámicos gratuitos. También puedes usar nuestra integración de terceros: Temporizador de cuenta regresiva de Correo electrónico Esencial.
Temporizadores de cuenta regresiva en Flujos de Trabajo de Automatización
Para los flujos de trabajo de Automatización, necesitas un temporizador dinámico que calcule la fecha de expiración cada vez que se envía el correo electrónico.
Herramienta recomendada: NiftyImages (plan gratuito disponible)
💬 Mira la Guía de Video de NiftyImages para familiarizarte con los temporizadores dinámicos.
Ejemplo de caso de uso: Agrega un temporizador de cuenta regresiva dinámico que expire cuando un código de descuento expire (2 días después de que se envíe el correo electrónico).
¡Nota! Para hacer que el temporizador de cuenta regresiva sea dinámico, marca la casilla de 'Etiqueta de combinación de correo electrónico'.
💬 Recomendamos ver la Guía de Video de NiftyImages para familiarizarte con los temporizadores dinámicos y cómo funcionan.
Vamos a añadir nuestro temporizador basado en un caso de uso específico: imagina que quieres un temporizador dinámico que expire al final de la venta (usando un artículo con descuento).
Paso 1. Crea tu automatización en Omnisend → Abre el Editor de correos electrónicos y añade un bloque de descuento para tu venta. Establece la fecha de expiración de tu descuento, que será la misma que la fecha de expiración de tu temporizador.
¡Importante! En Shopify, el código de descuento expira a las 12:00 AM en la fecha que selecciones en Omnisend. Así que necesitas ajustar el temporizador de cuenta regresiva para que coincida con esa fecha de expiración.
Paso 2. Agrega un código HTML aquí con un temporizador de cuenta regresiva que muestre cuándo expira el código de descuento. Copia el Año-Mes-Día y Desfase Horario HTML de imágenes Nifty y agrégalo al Elemento HTML en Omnisend.
Ahora necesitas cambiar el formato de la fecha al formato de fecha de Omnisend. Encuentra la fecha en tu código. Verás que hay un guion entre cada etiqueta de personalización, que reemplazarás con las etiquetas de fecha dinámicas de Omnisend.
Elimina la parte de la fecha del código e inserta las etiquetas de personalización de Omnisend:[[current_date | date:'%Y']]-[[current_date | date:'%m']]-[[current_date | date:'%d']].
Una vez reemplazada, la fecha mostrará ceros, pero cuando se envíe el correo electrónico, se mostrará una fecha real aquí porque añadimos etiquetas de personalización.
Paso 3. Ajusta la zona horaria. En la personalización, verás una zona horaria establecida en hora de Greenwich. Necesitas cambiarla a la zona horaria de tu cuenta. Como se muestra en la captura de pantalla a continuación, cambia "T00:00:00-07" a "T00:00:00+2," etc., según tu zona horaria.
Paso 4. Tu temporizador está configurado para la fecha de hoy, pero también quieres que cuente dinámicamente hasta el final de tu venta (la expiración del descuento está establecida en 2 días).
Por ejemplo, si tu código de descuento expira en 2 días, necesitas que tu temporizador funcione dinámicamente por 72 (no cuenta hoy, así que necesitas añadir 24h a 2 días).
Para esto, ve a Niftyimages, copia este código, regresa al elemento HTML en Omnisend y colócalo justo después de la etiqueta de formato. Ten en cuenta que el número de horas debe ajustarse según la duración de tus ventas. Si tu descuento expira en 10 días, debes poner 264 (240h+24h).
Aquí tienes un ejemplo de código pegado en Omnisend:
Eso es todo; has configurado el temporizador para que funcione hasta el final de tu promoción. Por favor, recuerda que solo puedes probar la automatización activándola tú mismo.
⚠️ Pruebas: Solo puedes probar los Flujos de Trabajo de Automatización activándolos tú mismo (por ejemplo, realizando un pedido de prueba).
Importando HTML desde Canva
Si diseñaste tu correo electrónico en Canva y quieres importarlo como una plantilla completa:
Exporta tu diseño de Canva como HTML.
Abre el archivo HTML en un editor de texto (por ejemplo, Notepad, TextEdit).
Elimina la declaración
<!DOCTYPE>y toda la sección<head>.Copia el código restante y pégalo en htmlcorrector.com para limpiarlo.
En Omnisend, ve a Ajustes de Tienda → Plantillas Guardadas → Importar Plantilla → Pegar Código HTML.
Pega el HTML limpio y guarda.
¿Alguna pregunta general? No dudes en contactar a nuestro equipo de soporte. Estamos disponibles a través del chat en la aplicación y en [email protected]