Plantilla de newsletter: cuatro ejemplos para descargar gratis
Una buena plantilla de newsletter es una sola columna de 600 píxeles de ancho como máximo, con su logotipo arriba, una jerarquía clara de títulos y texto, un botón principal, textos alternativos en cada imagen, su mensaje en texto real, un enlace de baja y la dirección del remitente al pie. Quien fije esos ocho elementos en una plantilla reutilizable solo tendrá que cambiar el contenido en cada edición.
Aquí abajo van primero las cuatro plantillas de inicio de 2Mail como ejemplo de plantilla de newsletter, cada una descargable gratis en HTML y con la situación para la que sirve el diseño. Después, qué debe llevar toda plantilla, dónde falla la cosa en modo oscuro, en el móvil y en Outlook, y cómo montar un modelo así en el editor de arrastrar y soltar de 2Mail.
Cuatro plantillas de newsletter en HTML
Estas son las cuatro plantillas de inicio con las que empieza en el editor de plantillas de 2Mail. Elija una, cambie el texto, los colores y las imágenes, y guarde el resultado como su propia plantilla. ¿Prefiere partir de cero? Entonces empiece con un lienzo en blanco.
Boletín ("Newsletter")
Título con una línea de color debajo, una breve introducción, dos artículos uno al lado del otro, un botón y un pie con enlace de baja. El diseño para una newsletter con un ritmo fijo.
Descargar en HTML
Anuncio ("Announcement")
Una imagen grande arriba, un título, un texto breve, tres puntos con una marca de verificación y un botón claro. Para un lanzamiento, un nuevo servicio o una oferta.
Descargar en HTML
Invitación ("Event Invitation")
Título, un bloque de fecha destacado, el nombre del evento y, debajo, el lugar y el programa uno al lado del otro. El botón lleva a la inscripción.
Descargar en HTML
Texto sencillo ("Simple Text")
Sin imágenes y sin botón: un saludo, su texto, una firma y un pie con enlace de baja. Se lee como un correo personal.
Descargar en HTMLLas imágenes son capturas de pantalla de las propias plantillas de inicio, y cada descarga es ese mismo archivo: el HTML que el editor de 2Mail genera para esa plantilla. El texto de ejemplo está en inglés; usted lo sustituye por su propio contenido. ¿Ya es cliente? Elija entonces "Start from template" en el editor: el mismo diseño, pero editable por bloques. Un archivo descargado se carga desde Templates → "Upload HTML" y se edita después en el editor de código.
¿Modelo, plantilla, diseño o formato?
Esas cuatro palabras se usan indistintamente y en la práctica significan lo mismo: la maquetación fija en la que vierte cada edición. "Plantilla" y "modelo" se refieren al archivo reutilizable; "diseño" y "formato", más bien a su distribución.
El diseño de una newsletter
El diseño es el orden y el ritmo de los bloques: qué va arriba, cuántos temas siguen y dónde se coloca el botón. Una sola columna es la opción segura; dos columnas valen para una cuadrícula de productos, siempre que en el móvil se coloquen una debajo de otra.
La cabecera de una newsletter
La cabecera es la franja que va encima del primer título: su logotipo, enlazado a su web, y si acaso un enlace para ver el correo en el navegador. Manténgala baja y sobria. Un menú de navegación con seis enlaces es cosa de una web, no de un correo, y empuja el contenido hacia abajo.
Formato y medidas
El formato habitual es de 600 píxeles de ancho, con imágenes que usted entrega al doble de ancho para que sigan nítidas en un teléfono. La longitud es libre, pero mantenga ligero el HTML: Gmail corta un mensaje en cuanto el código supera aproximadamente los 100 kB, y entonces también desaparece su enlace de baja.
Maquetación de una newsletter: los ocho elementos de una buena plantilla
No son preferencias de diseño, sino elementos que evitan cada uno un problema concreto: ilegibilidad, filtros antispam, quejas o una obligación legal que se le olvida.
Una columna de 600 píxeles de ancho
Una sola columna se lee igual en todas partes, de una pantalla ancha a un teléfono. 600 píxeles es el ancho que prácticamente todos los clientes de correo muestran sin barra de desplazamiento horizontal.
Su logotipo arriba
El destinatario debe ver de un vistazo de quién viene el correo. El logotipo enlaza a su web y va en la cabecera, encima del primer título, no como un gran banner que empuja el contenido hacia abajo.
Una jerarquía clara
Un título principal, subtítulos por tema y párrafos cortos. Quien escanea debe saber en cinco segundos de qué va el correo. Use tamaños de letra que sigan siendo legibles también en una pantalla pequeña.
Un botón principal
Toda newsletter tiene una cosa que usted quiere que haga el lector: comprar, inscribirse, leer. Dele a esa acción un botón maquetado como texto y no como imagen, para que siga siendo visible aunque no se carguen las imágenes.
Textos alternativos en cada imagen
Varios buzones no muestran las imágenes hasta que se pulsa. El texto alternativo es entonces lo que ve el lector. Sin textos alternativos, de una newsletter llena de imágenes solo queda espacio en blanco.
Su mensaje en texto real
Ponga lo que tiene que decir en bloques de texto, no en una sola imagen grande. Los filtros antispam desconfían de un correo que solo consta de imágenes, y quien tiene las imágenes bloqueadas no ve nada. El texto real siempre se puede leer.
Un enlace de baja
Obligatorio, y en su propio interés: quien no puede darse de baja pulsa 'spam', y eso pesa más que una baja. Ponga el enlace bien visible al pie, en lenguaje llano.
La dirección del remitente
El nombre de su empresa y su dirección postal al pie de cada newsletter. Es una obligación legal y, al mismo tiempo, una señal de confianza: una empresa real, en una dirección real.
Modo oscuro, móvil y Outlook
Una plantilla que se ve bien en su navegador todavía no está lista. Tres entornos dan la mayoría de las sorpresas.
Modo oscuro
Los clientes de correo en modo oscuro invierten o ajustan sus colores. Un logotipo oscuro sobre fondo transparente desaparece; el texto blanco dentro de un botón de color se vuelve ilegible. Use logotipos con fondo propio y pruebe en modo oscuro antes de enviar.
Móvil
Buena parte de sus destinatarios lee en el teléfono. Una sola columna se adapta sola, pero los botones tienen que ser lo bastante grandes como para pulsarlos con el pulgar, y los tamaños de letra por debajo de 14 píxeles se amplían o se ignoran en el móvil.
Outlook
La versión de escritorio de Outlook usa su propio motor de renderizado, que desconoce mucho CSS moderno: las imágenes de fondo, las esquinas redondeadas y algunos espaciados se pierden. Monte su plantilla sobre tablas, mantenga la maquetación sencilla y envíe una prueba a una cuenta de Outlook.
Por eso probar en buzones reales no es una formalidad. Cree en 2Mail un pequeño grupo de prueba con sus propias direcciones y envíe primero la campaña allí, a al menos tres buzones reales: un webmail, un teléfono y Outlook en un PC. Lo que se vea bien ahí, se verá bien casi en todas partes.
El editor de plantillas de 2Mail
No tiene que escribir HTML. El editor de plantillas de arrastrar y soltar del panel convierte los ocho elementos de arriba en bloques que usted arrastra, rellena y guarda.
Arrastrar bloques
Texto, imagen, botón, línea separadora y columnas: arrastra los bloques en el orden que quiera y los rellena. El editor mantiene en orden el ancho y la estructura y construye el HTML con tablas, con ajustes específicos para Outlook.
Plantillas reutilizables
Guarde su montaje como plantilla y reutilícela en cada edición. El logotipo, los colores, el pie y el enlace de baja quedan fijos; usted solo cambia el contenido. Así cada newsletter sigue siendo reconocible y no se olvida ningún elemento obligatorio.
Vista previa en vivo en escritorio y móvil
Mientras construye, ve el correo en una vista previa en vivo y cambia con un clic entre la vista de escritorio y la de móvil. Si quiere verlo en el buzón real, envíe primero la campaña a un pequeño grupo de prueba con sus propias direcciones y las de sus compañeros, y solo después a su lista.
Montar una plantilla en cinco pasos
Cuente con media jornada para la primera versión. Después, una nueva edición solo le costará el tiempo de escribir el contenido.
Elija la estructura
Empiece con una columna de 600 píxeles y decida el orden: logotipo, título principal, introducción, dos o tres temas, botón, pie. Esbócelo en papel antes de abrir el editor; se avanza más rápido que arrastrando y volviendo a arrastrar.
Coloque los elementos fijos
Ponga en el editor los bloques que se repiten en cada edición: el logotipo, los colores, el pie con el nombre de su empresa y su dirección postal, y el enlace de baja. Esta es la parte que ya no vuelve a tocar.
Rellene el contenido y el botón principal
Escriba por cada tema un título y dos o tres frases, añada una imagen con texto alternativo y ponga un solo botón claro. Compruebe en la vista previa en vivo cómo queda el conjunto en escritorio y en móvil.
Pruebe en buzones reales
Cree un pequeño grupo de prueba con sus propias direcciones y envíe primero la campaña allí: a un webmail, a un teléfono y a una cuenta de Outlook. Véalos también en modo oscuro. Corrija lo que se desplace o desaparezca y vuelva a probar.
Guárdela como plantilla
Guarde el montaje ya probado como plantilla reutilizable. La siguiente edición la empieza desde esa plantilla y solo cambia el contenido, de modo que el diseño y los elementos obligatorios quedan intactos.
Lista de comprobación antes de enviar
Repase estos seis puntos en cada edición. Cuestan dos minutos y evitan los errores que ya no puede deshacer una vez que la campaña ha salido.
