timer ~ 17 min. leídos
112574 vistas
valóralo
03 agosto

16 Mejores Prácticas para Diseño de Encabezado de Email

Stripo / Blog / 16 Mejores Prácticas para Diseño de Encabezado de Email

El encabezado del email es el elemento que usas regularmente en tus emails de boletines. Pero muy a menudo olvidamos que es más complejo que solo un logo y un menú.

El encabezado de boletín completo consiste de tres partes esenciales:

  1. Información sobre el remitente;
  2. La línea de asunto, y el preencabezado;
  3. El encabezado en sí.

En esta publicación te mostraremos cómo hacer la línea de asunto y el preencabezado. Y te mostraremos 16 ideas de encabezado para que tus emails sean más efectivos.

Encabezado HTML receptivo para sus correos electrónicos

(Fuente: Plantilla Stripo)

1. Información sobre el remitente

Esta parte del encabezado por lo general tiene:

  • nombre del remitente;
  • nombre del lector;
  • dirección “de”;
  • dirección “responder a”;
  • fecha;
  • logo de marca (opcional).

Cómo crear un encabezado de correo electrónico _ Información del remitente

Si usas un ESP para enviar emails masivos, entonces deberás colocar los siguientes datos: El nombre del remitente, el logo de la empresa, la dirección “responder a”. Normalmente no se cambia de campaña a campaña, así que solo lo haces una vez. Mientras que la línea de asunto y texto de preencabezado siempre cambian. Así que necesitarás hacerlo cada vez que comiences una nueva campaña.

2. La línea de asunto, y el preencabezado

Un preencabezado, también conocido como texto de vista previa, algunos lo llaman fragmento, es el elemento más pequeño pero altamente esencial del email.

Un preencabezado informativo notifica a los lectores del propósito del email. En dispositivos de escritorio, va después del guion “-” en la línea de asunto, en dispositivos móviles, va en la línea debajo del asunto. Cuando recibes el email, según el estudio de Litmus, 24% de los lectores juzgan por encabezado si abrir o no el mensaje.

Cada vez que recibo un email de MailChimp, SimilarWeb, o Netflix, sin abrirlo ya sé de qué tratará.

Ideas de encabezado para su mensaje de correo electrónico _ Preencabezados

Algunas empresas insertan sus ofertas en el preencabezado para que la gente haga clic.

Una de las mejores prácticas con preencabezado de email es hacer historias, cuando el texto del preencabezado es una continuación de la línea de asunto.

Chubbies: “He cambiado, ok, estaba siendo tacaño, pero ahora he cambiado por las ofertas del día festivo”.

Brighton: “Ella ama el ROJO para las Fiestas, Y Tú También”.

D’Artagnan: “¡Envíales Un Filete!” 15% de Descuento en Filetes y Cortes — La Oferta Termina el Domingo”.

Cómo colocar un texto de preencabezado con Stripo:

  • arriba de la plantilla, haz clic en el botón “ajustes”;
  • ingresa una línea de asunto y un texto de preencabezado.

Ejemplos de encabezados de correo electrónico _ Introducción de una línea de asunto y un texto de preencabezado

Nota importante:

Cuando no hay preencabezado en tu email, los lectores verán la primera parte del texto del email. No estará completo ni terminado. Podría ser algo como “Ver online”, “Mi cuenta”.

Entonces, si no quieres que tus lectores lo vean, podrías elegir no mostrar nada como preencabezado.

En Stripo, solo necesitas activar la opción “Completar con Espacio en Blanco”.

Anadir espacio en blanco es

Una vez que lo hagas, la vista previa de tu email se verá como en la bandeja de entrada de estos usuarios:

Preencabezados deshabilitados _ Stripo

Coloca línea de asunto y texto de vista previa en tus emails

Utiliza Anotaciones de Promoción de Gmail

Como el nombre sugiere, puedes anotar la duración de tu oferta, la cantidad de descuento, y acompañarlo todo con una insignia de oferta en la bandeja de entrada del usuario sin que tengan que abrir sus emails. 

Esta información va justo en la línea de asunto del email, y un texto de preencabezado. 

Imagen de encabezado de correo electrónico _ Anotación de promociones de Gmail

Funciona en dispositivos móviles en Gmail, pero no distorsiona tu apariencia en otros clientes de email. 

Mira nuestro video corto para aprender a crear anotaciones promocionales para tu boletín con Stripo.

Cómo crear anotaciones promocionales para tu boletín con Stripo

Usa anotaciones para destacarte en la bandeja de entrada de tus usuarios.

Para ver los requerimientos para las insignias de anotaciones, por favor, mira nuestra publicación con la "Guía de Nuevas Promociones de Gmail".

3. Encabezado de email

No existe una regla respecto a cómo debe verse un encabezado profesional. Todo depende... Pero te proporcionaremos algunas ideas y ejemplos.

Antes de ir a las ideas creativas, déjanos decir unas palabras sobre los elementos de encabezado de email tradicionales, que son el nombre de la empresa, logo y menú.

Nombre y logo de la empresa

Como regla, el logo de la empresa incluye el nombre.

Si tu empresa es muy nueva en el mercado, y la gente está conociendo tu marca y tus productos, entonces no olvides agregar el nombre de tu empresa. Ya que el nombre de tu empresa es lo que los clientes reconocerán. Insértalo en todos los emails, no importa si es un desencadenante o y uno promocional.

Encabezado con el nombre de la empresa para expresar la personalidad de tu marca _ Stripo

(Fuente: Plantilla Stripo)

Pero cuando tu empresa es reconocida, y estás seguro de que todos están familiarizados con tu logo, puedes omitir el nombre de la empresa y tan solo insertar el logo.

Logo sin nombre de la empresa _ Stripo

(Fuente: Email de Airbnb)

Nota: el fondo del logo debería ser transparente para poder coincidir con el color del tema.

El logo se inserta como imagen, así que no tendrás que preocuparte por la fuente. Se mostrará correctamente en todos los clientes de email y en todos los dispositivos.

Menú

El menú es otro elemento tradicional de los emails porque ayuda a los clientes a navegar y que vayan a tu sitio web. El menú es funcional.

Puedes seleccionar un menú regular o interactivo.

Todos los menús regulares que agregues con Stripo, son completamente adaptable.

Encabezado receptivo para su campaña de marketing por correo electrónico _ Diseño de pestañas de menú

(Fuente: Email de Gap)

Por favor, para información más detallada sobre cómo agregar menús, por favor mira nuestra publicación "Agregar Menú en Email con Stripo".

Mejores prácticas de diseño de encabezado de email

Hemos seleccionado los mejores ejemplos de marcas reales.

1. Agregar la opción “Ver en el Navegador”/“Versión web”

Por supuesto, puedes colocar enlaces en un pie de página, lo cual está bien. Pero si tu email contiene GIF, que podrían no cargar rápido o no cargarse directamente, si tu email contiene elementos interactivos o de gamificación que podrían no visualizarse correctamente en algunos clientes, entonces sería mejor agregar una opción “Ver online” en el encabezado de tus emails. Esto aumenta las chances de que los usuarios lo vean y hagan clic.

Encabezado de correo electrónico _ La vista en el vínculo de la bandeja de entrada del navegador

(Fuente: Email de Banana Republic)

2. Agregar un buscador de tiendas

Junto con el logo y el menú, Adidas agregó un Buscador de Tiendas en el encabezado. Brillante idea. Yo elijo los zapatos que necesito directo en los emails de Adidas y luego en el Buscador de Tiendas, ellos me dan la dirección de una tienda física cercana para probarme el calzado. Excelente servicio. ¡Gracias!

Buscador de tiendas en Menú _ Stripo

(Fuente: Email de Adidas)

3. Colocar información sobre el descuento

Este es uno de los mejores ejemplos de encabezado de email, la empresa de cosmética, Anabel, colocó su valiosa propuesta en el encabezado. Interesante decisión. No me lo podía perder. Para información más detallada tenía que hacer clic en el link.

Diseño de encabezado de correo electrónico _ Colocación de información importante en los encabezados

(Fuente: Email de Brighton)

4. Promocionar productos

La empresa Filmmaker promociona una suscripción paga para su revista en vivo directo en su encabezado. 

Una buena manera de promocionar tu producto es si el boletín es solo informativo.

Preheader informativo _ Stripo

(Fuente: Email de Filmmaker)

5. Agregar una opción de “Mi cuenta” en el encabezado de email

El mapa de clics del reporte de eSputnik (nuestro ESP) sobre las campañas de boletines muestran que muchos lectores hacen clic en el logo o en el botón de iniciar sesión para ingresar a sus cuentas.

Ejemplos de diseño de encabezado de correo electrónico _ Poner el logotipo y los enlaces de mi cuenta en el encabezado

Una vez que algunos lectores terminan de leer el boletín, podrían querer seguir trabajando con Stripo/tu herramienta haciendo clic en el botón “Mi cuenta”.

Como podemos ver, el 12.8% de nuestros lectores utilizaron esta opción.

6. Íconos de redes sociales

¿Por qué no ir contra el sistema? Si deseas resaltar, coloca los links a tus cuentas de redes sociales en el encabezado. Algo inusual, pero muy llamativo. Especialmente, si tu meta principal es ganar suscripciones en tus cuentas de redes sociales donde compartes todos los detalles de los próximos eventos.

Encabezado de correo electrónico _ Iconos de redes sociales en encabezados de correo electrónico

(Fuente: Email de Ukrainian Hub)

7. Usar GIF o logos animados

¿Quieres tener un encabezado animado? Hazlo. Asegúrate de mantener el tamaño de este encabezado de email menor de 1 Mb porque al menos la mitad de tus lectores lo verán en dispositivos móviles. Si un email tarda mucho en abrir, la gente lo cierra.

GIF en el encabezado para captar la atención del lector

(Fuente: Email de Banana Republic)

8. Trabajar en los fondos del encabezado de email

Si no quieres hacer muchos cambios a tus encabezados de emails, entonces podrías jugar con los colores.

Uso de colores de marca en el diseño de marketing por correo electrónico

Cabecera Feliz Navidad Diseño _ Stripo

(Fuente: Email de Tienda Online de Scuderia Ferrari)

9. Decorar los encabezados para las fiestas

Cuando llegan las fiestas, hacemos lo posible para que el email sea festivo. Hace un tiempo, la mayoría de las empresas dejaban el diseño del encabezado sin cambios. Pero es muy aburrido. Dale vida a tu encabezado con copos de nieve, decoraciones, etc.

Imagen de encabezado de correo electrónico _ Animaciones para destacar en la bandeja de entrada de los usuarios

(Fuente: Email de GrowthHackers)

A primera vista, los lectores estaban bien al tanto del objetivo de toda la campaña. A mi parecer, este es un gran ejemplo de diseño de encabezado de email para las festividades.

10. Aplicar fuentes personalizadas a los menús

Una buena fuente decorativa enriquecerá tu diseño de encabezado de email. Usa tu imaginación y ponte creativo.

Es importante hacer que todas las fuentes sean legibles, las fuentes cursivas requieren de un mayor tamaño.

Ejemplos de diseño de encabezado de correo electrónico _ Fuentes decorativas para su identidad de marca

(Email abierto en Gmail, MacOS, y Windows 10)

Queremos recordarte que Stripo te permite agregar y usar fuentes personalizadas en tu diseño de encabezado de email HTML.

8 min. leídos

86788 vistas 4.2

Cómo añadir y utilizar fuentes personalizadas con Stripo Leer

Nota importante:

Si la fuente seleccionada no es soportada por un cliente de email, será reemplazada por la fuente predeterminada del cliente.

11. Especificar la fecha de emisión

Mirando el email de Apple News, uno puede decir con facilidad qué día lo recibió. ¿Cómo? Esta empresa agrega una fecha al encabezado de email. En mi opinión, esta es una de las mejores ideas de diseño de encabezado de email.

Encabezado de correo electrónico _ Colocación de datos en encabezados de correo electrónico

(Fuente: Email de Apple News)

12. No usar encabezado

Todas las marcas famosas tienen algo en común, todas tienen su propio estilo. Así, los emails de Nike son constantes. Nunca notarás cuándo termina un encabezado y cuándo comienza un banner.

Cabecera con Logo para Expresar Identidad de Marca _ Stripo

(Fuente: Email de Nike)

De hecho, Nike no utiliza ningún encabezado, siempre colocan sus logos sobre los banners.

Una decisión interesante si no quieres agregar un menú al encabezado.

13. Agregar un enlace “Actualizar preferencias”

Todos queremos que nuestros boletines sean altamente efectivos. Entonces, necesitamos presentar solamente información relevante. Las preferencias de los clientes cambian a menudo. Los lectores necesitan tener la oportunidad de actualizar su información siempre que quieran.

El restaurante D’artagnan tiene s botón “Actualizar preferencias” abajo a la derecha en el encabezado.

Preferencias de actualización de encabezado _ Stripo

(Fuente: Email de D'Artagnan)

Nota importante:

Normalmente, los dispositivos móviles muestran solo 4 pestañas de menú en pantalla. Más de 5 pestañas en un menú puede provocar desplazamiento horizontal. Para evitar eso, podrías tener que desactivar algunas pestañas para dispositivos móviles.

Si estás creando tu encabezado de email con Stripo, tienes que:

  • hacer clic en la pestaña de menú que vas a desactivar;
  • en el panel de ajustes, haz clic en el botón “Ocultar en dispositivos móviles” al lado del elemento elegido;

Diseño de correo electrónico _ Deshabilitar ciertas pestañas de menú en dispositivos móviles

  • haz lo mismo para todos los demás elementos que quieras desactivar para dispositivos móviles;
  • listo.
Haz que los menús de los encabezados de email sean completamente adaptables con 1 clic

14. Especificar ID de membresía

Si ofreces una membresía a tus clientes, su ID debería estar a mano. Ciertamente, puedes colocar esta información en alguna parte en sus ajustes de cuenta. Pero Decathlon especifica el número de ID en el encabezado. Es bastante notable. De esta manera, los lectores siempre sabrán dónde encontrar su número de miembro.

ID de membresía de encabezado _ Stripo

(Fuente: Email de Decathlon)

15. Agregar una foto del remitente

Este es uno de los encabezados más informativos. Contiene botones de “compartir”, íconos de redes sociales, fechas, nombre de autores, y su foto.

Siempre es bueno saber quién es el autor, sobre todo cuando se trata de las últimas noticias de economía y política.

Cabecera Con Foto Mejor Ejemplo _ Stripo

(Fuente: Email de CNN Reliable Sources)

16. Poner la opción “Hazlo ahora”

Podrías si quisieras agregar enlaces de “Mostrar ahora” en tus encabezados. Algunas marcas lo ponen arriba del logo, otras a la derecha del logo. Queda totalmente a discreción.

Maybelline, por ejemplo, agrega links de “Registrarse Ahora” en sus encabezados de email HTML cuando están promocionando sus próximos eventos, webinars, para ser exacto.

Mejores prácticas de encabezado de correo electrónico _ Registrarse para un evento

(Fuente: Email de Maybelline New York)

Ahora que con suerte estos ejemplos de diseño de encabezado de email te inspiraron, estás listo para crear un nuevo encabezado para tus próximas campañas.

Cómo crear un encabezado email con Stripo, guía

Hay dos formas de diseñar encabezado de email con nuestro editor:

1. Personalizar encabezados en plantillas

Esta opción es la mejor para quienes no tienen tiempo de crear encabezados de email desde cero.

Todas las plantillas de correo electrónico HTML de Stripo ya contienen encabezados. Tan solo elige el que te gusta, reemplaza nuestros enlaces con el tuyo, reemplaza el logo existente con el tuyo.

Entre nuestros diseños de plantillas de encabezado de email, encontrarás el que mejor se adapte a tus necesidades de campaña.
Buscar

2. Crear un nuevo encabezado de email desde cero

Quiero crear un encabezado con mi logo ubicado entre las pestañas de menú. Como este:

Encabezado de correo electrónico con pestañas de menú _ Stripo

Es fácil y solo llevará unos pocos pasos:

Creación de encabezados de correo electrónico con Stripo desde cero

Entonces, esto es en detalle lo que necesito hacer:

  • arrastra una estructura de 3 columna a tu plantilla HTML;

Encabezado Agregando una Nueva Estructura _ Stripo

Si deseas que el encabezado de email contenga unas pocas franjas, entonces tendrás que arrastrar el número de estructuras en tus plantillas;

  • para agregar un logo, hago clic en el ícono “imagen”;

Encabezado Insertando Logo _ Stripo

  • elijo mi tamaño de logo;

Configuración de encabezado Tamaño del logotipo _ Stripo

Asegúrate de hacer clic en el botón “Imagen adaptable” para dispositivos móviles;

  • arrastro el bloque de menú en la primera columna de la plantilla;

Bloque de menú de arrastre de encabezado _ Stripo

  • quito la tercera pestaña de menú, ya que solo necesito 2 en cada columna (por defecto, el bloque de menú tiene tres pestañas);
  • le doy nombres: “plantillas” y “notas de lanzamiento”;
  • selecciono el color de fuente, en nuestro editor, se llama “color de links”;

Encabezado Menú de correo electrónico _ Stripo

  • hago lo mismo para la tercera columna;
  • para toda la franja, elijo Blanco como color de fondo;
  • igualo los contenedores, en mi caso tienen 250/250 y el que tiene el logo solo tiene 30;

Apariencia del menú de encabezado _ Stripo

Si deseas poner una imagen de fondo, tendrás que hacer clic en el botón “Imagen de Fondo”;

  • Recomiendo establecer el tamaño de fuente cuando el encabezado esté completo y tenga todos los contenedores, así podrás tener una visión general.

Yo uso Tahoma 18;

Nota: queremos recordarte que Stripo te permite agregar fuentes personalizadas y aplicarlas a los menús y otros textos en las plantillas de email.

  • activo el botón “Estructura adaptable”, asegúrate de que tu menú se muestre correctamente en dispositivos móviles también;

Prácticas recomendadas para encabezados de correo electrónico _ Hacer que respondan

  • ajusto el relleno. Podrías tener que hacer esto para alinear todos los contenedores. Hago clic en el botón “más”;

Relleno de encabezado _ Stripo

Nota importante:

Normalmente, un encabezado de email es algo que creas una vez y lo usas para muchas campañas. Así que no tengas miedo de pasar más tiempo en el diseño del encabezado del boletín.

Guárdalo en tu Almacenamiento de Módulo personal, y arrástralo cuando crees una nueva campaña de email.

Guardar encabezados de correo electrónico en el almacenamiento del módulo

Crea tu encabezado de email HTML una sola vez y úsalo en las campañas futuras.

Palabras finales

Como puedes ver por el número de diferentes ejemplos de diseño de encabezado de email dados aquí, no existe tal cosa como “mejor diseño de encabezado de email”. No dudes en ser creativo.

Nuestras plantillas de email ya contienen varios encabezados creados profesionalmente, elige cualquiera de ellos y personalízalo.

¡Te deseo la mejor de las suertes en todos tus futuros proyectos!

Crea encabezado de email efectivos para tus emails una vez que los reutilices en todas tus campañas

Дмитрий Головцов hace 1 año

Почему в письме вы пишите в анонсе статьи про геймификацию, а сама статья совершенно о другом? Заманить для перехода на сайт? Но вы же должны понимать, что это вызывает негатив, когда ожидания не совпадают с реальностью. Грустно.

Hanna Kuznietsova comentado en Дмитрий Головцов hace 1 año

Дмитрий, Добрый день. Спасибо большое, что обратили наше внимание на это. Мы в рассылку по ошибке вставили неверную ссылку. Приносим свои извинения за это. Статья про геймификацию у нас есть. Ее писал наш СЕО. Вот ссылка: https://stripo.email/blog/gamification-in-email-marketing/ И именно этой статьей мы хотели поделиться в письме. В следующий раз будем тщательнее проверять все ссылки, которыми делимся в письмах.

Te podría interesar

anterior siguiente
banner9
06 junio · 15 min. leídos
Los 10 mejores creadores de plantillas de correo electrónico para 2022

¿Todos los creadores de plantillas de correo electrónico parecen iguales? Ahora estás confundido sobre cuál elegir para tus campañas de correo electrónico, ¿no es así? No es de extrañar, ya que hay muchos. Vamos a hacer un estudio de los constructores más populares para encontrar sus características distintivas para ayudarle a encontrar el mejor constructor de correo electrónico HTML para sus necesidades actuales. Intentaré crear una plantilla en todos estos editores con los mismos archivos multimedia para ver si los...

Diseño Marketing Plantillas
24 mayo · 18 min. leídos
Los mejores tipos de letra para el correo electrónico: Consejos y trucos de uso

Una de las preocupaciones más llamativas en el proceso de producción del correo electrónico es la elección del tipo de letra adecuado. El peso, la altura, la anchura, el color, la forma, el espaciado... ¿Todo es importante? Sí, lo es, pero también una de las cosas más cruciales es elegir la fuente que sea legible. En este post, vamos a mostrarle cómo elegir la mejor fuente profesional para el correo electrónico. Diseñe elegantes correos electrónicos con Stripo en un abrir...

Diseño Plantillas
Greatest Examples of GIF animations in Emails_Cover Image
27 octubre 2021 · 10 min. leídos
16 grandes ejemplos de GIFs animados en correos electrónicos

Los GIFs en los correos electrónicos serán de gran utilidad si quieres mostrar tu producto, llamar la atención de los usuarios sobre ciertos elementos, o simplemente decorar ligeramente tu texto. En este artículo, hemos proporcionado algunos de los mejores ejemplos de animación gif en correos electrónicos. Ejemplos de GIFs animados en correos electrónicos Aquí tienes una recopilación de los mejores ejemplos con GIFs en correos electrónicos. Cada GIF cumple su misión. 1. Adidas (Fuente: Correo electrónico de Adidas) Adidas utilizó...

Diseño Marketing
08 abril 2021 · 17 min. leídos
Los 14 mejores ejemplos de diseño de firmas de correo electrónico

Las buenas firmas de correo electrónico nos ayudan a construir nuestro negocio y a causar una buena impresión a los clientes. Dado que es el último elemento que la gente ve en los correos electrónicos, debemos hacer que nuestras firmas personales sean creativas y memorables. Examinemos los mejores ejemplos de firmas de correo electrónico y su uso apropiado en correos electrónicos y plantillas de boletines para correo electrónico. Cabe mencionar que todos los tipos de negocios requieren firmas de correo electrónico...

Diseño Marketing Plantillas
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones