Plantillas de email HTML gratis (con tablas y modo oscuro)
Plantillas de email HTML gratis
Plantillas de email HTML gratis: 8 con tablas y modo oscuro, listas para copiar | We.Inc
Ocho plantillas de email HTML gratis que puedes editar y previsualizar en la página: bienvenida, recibo, restablecer contraseña, newsletter, verificar email, pedido enviado, invitación a evento y opinión. Maquetación con tablas, botones a prueba de todo, soporte de modo oscuro y una lista de comprobación de pruebas.
Un email HTML fiable usa tablas anidadas para la maquetación, estilos en línea, un ancho de contenido de unos 600 píxeles, botones hechos con enlaces con padding en vez de imágenes, y texto alternativo en cada imagen. Las ocho plantillas de abajo siguen esas reglas, admiten el modo oscuro donde el cliente lo permite y se pueden editar y previsualizar en vivo antes de copiarlas.
Las ocho plantillas
Plantilla
Se envía cuando
Bienvenida
Alguien se registra
Recibo
Un pago se completa
Restablecer contraseña
Alguien pide restablecerla
Newsletter
Noticias periódicas
Verificar email
Después del registro
Pedido enviado
Un pedido sale
Invitación a evento
Invitas a tus clientes
Petición de opinión
Tras una visita o un pedido
Edita el código a la izquierda de cualquier plantilla y la vista previa de la derecha se actualiza. Las vistas previas las renderiza tu navegador, así que tómalas como orientación: los clientes de correo varían, y por eso importa la lista de comprobación del final.
Elige la plantilla que corresponde al email que necesitas.
Cambia el texto, los enlaces y los colores en el cuadro de código y mira la vista previa.
Copia el HTML en la opción de HTML personalizado de tu plataforma de email.
Envía pruebas a bandejas reales en móvil y escritorio, en modo claro y oscuro.
Mantén una sola acción principal por email; un segundo botón divide la atención a la mitad.
Escribe el preheader a propósito; si no, los clientes muestran el primer texto que encuentran.
Aloja las imágenes en tu propio dominio o en tu plataforma de email, con URLs https absolutas.
Usa nuestro creador de plantillas de email HTML si prefieres rellenar un formulario.
Preguntas frecuentes
¿Por qué los emails HTML siguen usando tablas?
Algunos clientes de correo, sobre todo los de escritorio más antiguos, renderizan con motores que ignoran la maquetación CSS moderna. Las tablas son el único método de maquetación que funciona en todos ellos.
¿Cómo hago que un email funcione en modo oscuro?
Añade las etiquetas meta color-scheme y una media query prefers-color-scheme con tus colores oscuros. Los clientes que lo admiten las usan; otros pueden invertir los colores por su cuenta, así que evita el texto incrustado en imágenes y prueba ambos modos.
¿Puedo usar estas plantillas con fines comerciales?
Sí. Las escribimos para esta página; cópialas, cámbialas y envíalas en cualquier proyecto.
¿Qué es un botón a prueba de todo?
Un botón hecho con un enlace con padding dentro de una celda de tabla con color, en lugar de una imagen. Se sigue viendo y funcionando cuando las imágenes están bloqueadas.
El texto plano también importa
Envía una versión en texto plano junto al HTML. La mayoría de las plataformas de email generan una; léela una vez, porque un recibo o un enlace de restablecimiento tiene que entenderse también sin formato.
Ocho plantillas, en vivo
Email de bienvenida
Da las gracias a la persona, explica qué pasa después y ofrece una acción clara.
Recibo
Una tabla anidada mantiene alineados los nombres de los artículos y los precios en todos los clientes, incluidos los de escritorio antiguos.
Restablecer contraseña
Breve, con el tiempo de caducidad y qué hacer si la persona no lo pidió. Incluye también el enlace como texto, para los clientes que bloquean botones.
Newsletter
Una noticia por bloque con un título, una frase y un enlace. La URL de la imagen es un marcador de posición, así que la vista previa muestra lo que ven los lectores con las imágenes bloqueadas: el texto alternativo en una caja del tamaño correcto.
Verificar dirección de email
Se usa tras el registro. Un código además del botón ayuda a quien abre el email en otro dispositivo.
Pedido enviado
Pone primero el enlace de seguimiento; es para lo que el lector abrió el email.
Invitación a evento
Fecha, hora y lugar en un bloque fácil de leer de un vistazo, y luego la única acción.
Petición de opinión
Una sola pregunta con respuestas de un toque consigue muchas más respuestas que un enlace a una encuesta larga.
Por qué el código es así
Reglas para que el email HTML se vea bien en todas partes
Regla
Por qué
Maqueta con tablas (role="presentation")
Algunos clientes de escritorio aún ignoran flexbox, grid y muchas reglas de posicionamiento
Pon en línea los estilos importantes
Algunos clientes y vistas de webmail eliminan o ignoran los bloques style
Mantén el ancho del contenido en unos 600px
Cabe en el panel de lectura de la mayoría de los clientes
Haz los botones con un enlace con padding dentro de una celda con color
Resiste a los clientes que bloquean imágenes e ignoran parte del CSS
Pon width, height y alt en cada imagen
Las imágenes suelen estar bloqueadas hasta que el lector las permite
Añade un preheader oculto
Controla el texto de vista previa que aparece tras el asunto
Usa la meta color-scheme y prefers-color-scheme
Los clientes con modo oscuro usan tus colores oscuros en lugar de invertirlos
Incluye un enlace para darse de baja en el email de marketing
Lo exigen las leyes antispam y los grandes proveedores de correo
Antes de enviar
Lista de comprobación de pruebas
Prueba
Cómo
Clientes reales
Envía a cuentas de los grandes servicios de webmail, a un cliente de escritorio y a un móvil
Sin imágenes
Desactiva la carga de imágenes y comprueba que el email sigue teniendo sentido
Modo oscuro
Pon el móvil y el cliente de escritorio en modo oscuro
Enlaces
Haz clic en todos los enlaces, incluido el de darse de baja
Parte en texto plano
Envía también una versión en texto; algunos lectores y filtros la usan
Control de spam
Autentica tu dominio (SPF, DKIM, DMARC) antes de enviar en volumen