Plantillas de email marketing responsive: cómo crearlas, con 5 ejemplos

Una plantilla de email marketing es un diseño de email que reutilizas en cada envío: la estructura, los colores, las tipografías y los bloques (cabecera, contenido, botón y pie) ya están hechos, y tú solo cambias el contenido. Si además es responsive, se adapta sola al ancho de la pantalla y se lee bien en el ordenador, en la tableta y en el móvil.

En esta guía tienes qué debe llevar una plantilla, cinco estructuras de ejemplo que puedes copiar, las técnicas para que se vea bien en el móvil, una checklist antes de enviar y cómo crearla en NewsletterSoft sin escribir código.

Qué es una plantilla de email marketing responsive

El diseño responsive, o adaptable, consiste en ajustar un mismo email a cada dispositivo. Se consigue con estructuras e imágenes fluidas, que se estiran o se encogen según el espacio disponible, y con media queries: reglas de CSS que cambian el diseño a partir de cierto ancho de pantalla.

Una plantilla responsive no es una versión en miniatura del email de escritorio. En el móvil se lee de arriba abajo, con el pulgar y a menudo con prisa: las columnas se apilan, los botones deben poder pulsarse con el dedo y lo importante tiene que verse sin hacer scroll. Piensa en el ordenador, la tableta y el móvil como en tres lectores distintos, aunque el mensaje sea el mismo.

Con una buena plantilla ganas tres cosas: una lectura cómoda en cualquier pantalla, que cuida tu imagen de marca; control sobre lo que se ve en cada dispositivo, como un texto más corto o un botón más grande en el móvil, y rapidez, porque cada envío sale con el mismo estilo sin empezar de cero.

Qué debe llevar una plantilla de email marketing: formato y estructura

Las plantillas que funcionan comparten casi siempre el mismo esqueleto. De arriba abajo:

1. Asunto y preheader. No forman parte del diseño, pero son lo primero que se ve en la bandeja de entrada. El preheader es el texto corto que muchos programas de correo enseñan junto al asunto: úsalo para completarlo, no para repetirlo.
2. Cabecera. El logo y, como mucho, un enlace a tu web. Ligera: en el móvil cada centímetro cuenta.
3. Bloque principal. Un titular claro y, si aporta algo, una imagen, para entender de un vistazo de qué va el email.
4. Cuerpo. Párrafos cortos o bloques de contenido: artículos, productos, ventajas o un evento.
5. Llamada a la acción. Un botón principal con un texto que diga qué pasa al pulsarlo («Ver la oferta», «Reservar cita»), mejor que un genérico «Haz clic aquí».
6. Pie. Los datos de tu empresa, por qué recibe ese email y el enlace para darse de baja, que es obligatorio.

En cuanto al ancho, lo habitual es diseñar con un máximo de unos 600 píxeles, que cabe en el panel de lectura de los programas de correo de escritorio. En el móvil, el contenido pasa a ocupar todo el ancho de la pantalla en una sola columna.

5 plantillas de email marketing que toda empresa necesita

Estas cinco estructuras cubren la mayoría de los envíos de una empresa. Son también las cinco plantillas de serie de NewsletterSoft, listas para adaptar a tu marca.

1. Plantilla de bienvenida

Sale en cuanto alguien se suscribe, normalmente desde una automatización. El contacto lo está esperando: aprovéchalo.

• Un titular de bienvenida, con el nombre del contacto si lo tienes.
• Qué va a recibir y cada cuánto.
• Un único botón con el primer paso: ver el catálogo, descargar la guía o completar su perfil.

2. Plantilla de newsletter mensual

Para contar novedades con regularidad sin rehacer el diseño cada mes.

• Cabecera con el logo y la fecha o el número de edición.
• Una entradilla de dos o tres líneas.
• Entre tres y cinco bloques con imagen, titular, resumen y enlace «Leer más», que en el móvil se apilan en una columna.
• Un bloque destacado para un evento o una novedad, y tus redes sociales.

3. Plantilla de promoción

Para una oferta con fecha límite. Aquí manda el botón.

• Un titular con la oferta y la fecha límite.
• La imagen del producto o de la oferta, con texto alternativo por si no se cargan las imágenes.
• Dos o tres ventajas o productos, como mucho.
• Un botón grande, visible en el móvil sin hacer scroll, y las condiciones en el pie.

4. Plantilla de reactivación

Para quien lleva meses sin abrir tus emails o sin comprar.

• Un titular directo, del tipo «Hace tiempo que no sabemos de ti».
• Un recordatorio de lo que se pierde o un incentivo para volver.
• Un botón para volver y, a la vista, la opción de recibir menos emails o de darse de baja.

Si no responde, deja de escribirle: enviar a contactos que nunca abren perjudica la reputación de tu dominio.

5. Plantilla de agradecimiento tras la compra

Llega cuando la relación con el cliente está en su mejor momento: justo después de comprar.

• Un agradecimiento personal y el siguiente paso: qué pasa ahora con su pedido.
• Consejos para sacar partido a lo que ha comprado o un enlace a la ayuda.
• Una petición de opinión o una venta cruzada suave, mejor que las dos a la vez.

Cómo hacer un email responsive: las tres técnicas

El HTML de un email no se maqueta como el de una web: muchos programas de correo ignoran parte del CSS moderno, y las versiones clásicas de Outlook para Windows muestran los emails con el motor de Word. Por eso la base de casi todas las plantillas sigue siendo la tabla, y sobre ella hay tres formas de adaptarla al móvil.

Diseño fluido de una columna

La opción más sencilla y segura: una sola columna con anchos en porcentaje y un ancho máximo, e imágenes al 100 % del espacio. Se adapta a cualquier pantalla, aunque el diseño de escritorio queda más sobrio.

Diseño híbrido

Las columnas van una al lado de la otra en el ordenador y se apilan solas en el móvil cuando no caben. No depende de las media queries, así que funciona también donde no se aplican, a cambio de un código más laborioso.

Media queries

La plantilla detecta el ancho de la pantalla y, con media queries, aplicas estilos distintos para cada tamaño. Son condiciones del tipo:

• Si el ancho de la pantalla es menor que X, muestra este bloque y oculta este otro.
• Si el ancho es menor que X, la columna de la izquierda pasa a ocupar todo el ancho.
• Si el ancho es menor que X, las imágenes se muestran al 100 %.

Por ejemplo, para apilar las columnas y adaptar las imágenes en pantallas de hasta 600 píxeles:

@media only screen and (max-width: 600px) {
  .columna { display: block !important; width: 100% !important; }
  .boton a { display: block !important; }
  img { max-width: 100% !important; height: auto !important; }
}

Los principales programas de correo aceptan media queries, pero no todos, y algunos solo en parte. Antes de confiarles un diseño, consulta qué admite cada programa en Can I email y combínalas con un diseño fluido o híbrido: si un programa las ignora, el email seguirá leyéndose bien.

Desliza la tabla para ver todas las columnas →

Si no quieres pelearte con el código, un editor visual genera este HTML por ti. El de NewsletterSoft trabaja por dentro con MJML, un formato de código abierto pensado para que los emails se vean bien en los programas de correo y en el móvil.

Cuatro trucos de maquetación que siguen funcionando

Si programas tu propio HTML o revisas una maquetación a medida, estos detalles evitan sustos habituales en las plantillas para newsletter:

• Estilos en línea, además de en el <head>. Algunos programas de correo solo aplican en parte los estilos de la cabecera: la app de Gmail, por ejemplo, no los admite cuando la cuenta no es de Google, según Can I email (consultado el 28-10-2026). Deja en las media queries lo que cambia en el móvil y pon lo esencial (colores, tipografía y anchos) en el atributo style de cada elemento.
• Lo importante, en la primera columna. Cuando las columnas se apilan en el móvil, quedan en el orden del código: la de la izquierda arriba y la de la derecha debajo. Pon en la primera el contenido principal y deja los destacados para la segunda.
• Botones de texto, no de imagen. Un botón hecho con un enlace y un color de fondo se ve y se puede pulsar aunque el programa de correo bloquee las imágenes. Si le pones esquinas redondeadas y algún programa no las admite, saldrá con esquinas rectas, sin romper el diseño.
• Texto alternativo con estilo. Además de escribir el texto alternativo de cada imagen, dale color y tipo de letra: si la imagen no se carga, en los programas que lo admiten el hueco mostrará ese texto con el aspecto de tu marca en lugar de una caja vacía.

Checklist: tu plantilla, lista para el móvil

Repasa estos puntos antes de dar una plantilla por buena:

• Ancho máximo de unos 600 píxeles en escritorio y una sola columna en el móvil.
• Texto que se lee sin hacer zoom, con buen contraste entre la letra y el fondo.
• Botones grandes y separados entre sí, fáciles de pulsar con el dedo.
• El titular y el botón principal, visibles sin hacer scroll.
• Imágenes ligeras, con ancho adaptable y texto alternativo.
• Nada importante solo dentro de una imagen: si no se carga, el mensaje se pierde.
• Personalización con texto de respaldo, por si al contacto le falta el nombre.
• Revisión en modo oscuro: logos con fondo transparente y colores que no desaparecen.
• Un email que no sea demasiado largo ni pesado: Gmail recorta los mensajes muy extensos y esconde el final, enlace de baja incluido.
• Una prueba real, abierta en el móvil y en los programas de correo que más usan tus contactos.

¿Plantilla de serie, HTML propio o maquetación a medida?

Hay tres formas de conseguir una plantilla de email responsive. Elige según tu tiempo, tu equipo y el diseño que tengas:

Desliza la tabla para ver todas las columnas →

Si prefieres no hacerlo tú, nuestro servicio de maquetación de newsletters convierte tu diseño (PSD, AI o PDF) en una plantilla HTML responsive, con un test de compatibilidad en más de 40 programas de correo.

Cómo crear una plantilla de email responsive en NewsletterSoft

En NewsletterSoft, las plantillas forman parte del canal de email marketing de la plataforma, junto a tus contactos, tus segmentos y tus automatizaciones. Así se crea una:

1. Abre la biblioteca. En Plantillas → Email tienes las cinco de serie y las que guardes tú. Vista previa enseña cada una en escritorio y en móvil, con su asunto y su preheader.
2. Usa una plantilla. Usar plantilla crea un email nuevo a partir de ella y lo abre en el editor; la plantilla original no cambia.
3. Adáptala en el editor. El editor drag & drop de newsletters es visual: arrastras columnas, textos, botones, imágenes y redes sociales, y cambias colores, márgenes y enlaces pinchando en cada bloque. Con las vistas de escritorio, tableta y móvil compruebas cómo queda.
4. Personaliza y guarda. {{first_name|}} pone el nombre de cada contacto y, si no lo tiene, el texto que escribas tras la barra. El enlace de baja ({{unsubscribe_url}}) ya viene en el pie. Al pulsar Guardar, el diseño se convierte en el HTML que se envía.
5. Guárdala como plantilla propia. En Email → Campañas, Guardar como plantilla la deja en tu biblioteca. La plantilla guarda el diseño; el asunto y el preheader se escriben en cada envío.
6. Pruébala antes de enviar. Enviar prueba te la manda al buzón con «[Prueba]» delante del asunto y sin gastar cupo. La checklist de envío revisa siete puntos, como el enlace de baja, el dominio verificado y esa prueba, y no deja enviar hasta que todos están en verde.

¿Sin tiempo para diseñar? En el paso Contenido de una campaña, Generar con IA crea un primer diseño a partir de la URL de tu web y del objetivo del email, y lo retocas en el editor.

Y la plantilla no se queda en un envío puntual: un mismo diseño se usa en tus campañas y en los emails de tus automatizaciones de marketing, que pueden combinar email, SMS y WhatsApp en un mismo flujo.

¿Quieres ver las plantillas y el editor con tus propios envíos? Con más de 20 años de experiencia en email marketing, te enseñamos a montar tus plantillas y tus primeras campañas en una demo personalizada de NewsletterSoft.

Preguntas frecuentes

¿Qué ancho debe tener una plantilla de email marketing?

Lo habitual es un ancho máximo de unos 600 píxeles en escritorio, que cabe en el panel de lectura de los programas de correo. En el móvil, la plantilla debe pasar a una sola columna que ocupe todo el ancho de la pantalla, con imágenes que se adapten a ese espacio.

¿Dónde encuentro plantillas de email marketing gratis?

La mayoría de las plataformas de email marketing incluyen plantillas en su editor. En NewsletterSoft tienes cinco de serie (bienvenida, newsletter mensual, promoción, reactivación y agradecimiento tras la compra) y puedes guardar como plantilla cualquier diseño tuyo, sin coste aparte. Si descargas una plantilla HTML gratuita, comprueba que sea responsive y envíate una prueba antes de usarla.

¿Todos los programas de correo admiten media queries?

No. Los principales las aceptan, pero algunos las ignoran o las aplican solo en parte. Por eso conviene combinarlas con un diseño fluido o híbrido, que se lee bien aunque no se apliquen. El soporte de cada programa se puede consultar en Can I email.

¿Cómo compruebo que mi plantilla se ve bien en el móvil?

Primero, con la vista móvil del editor. Después, con una prueba real: envíatela y ábrela en tu teléfono y en los programas de correo que más usan tus contactos, también en modo oscuro. En NewsletterSoft, las pruebas no gastan cupo.

¿Puedo usar la misma plantilla en campañas y automatizaciones?

Sí. En NewsletterSoft, un mismo diseño de email sirve para tus envíos puntuales y para los emails de tus automatizaciones, como una bienvenida o un carrito abandonado. Así mantienes el mismo estilo en todo lo que envías.