Tamaño perfecto de banner de correo electrónico para sus plantillas

Los banners son una herramienta increíble para que sus correos parezcan más sistematizados, llamar la atención de los destinatarios sobre los elementos críticos de su mensaje y permitirle destacar en las saturadas bandejas de entrada de sus lectores. Sin embargo, un tamaño inexacto del banner de correo puede destrozar la estructura de tu contenido y degradar todos los esfuerzos que ha hecho.

En este artículo, aprenderá más sobre el ancho y la altura perfectos de una imagen de banner y los aspectos fundamentales a tener en cuenta al crear una para sus campañas de email marketing. También le daremos consejos útiles para crear banners pegadizos con Stripo en cuestión de minutos.

¿Qué es un banner de correo electrónico?

Es una imagen de alta calidad situada en la parte superior de su mensaje para resaltar su propósito principal y tono. Las imágenes de los banners pueden ir acompañadas del nombre de su marca, el logotipo de la empresa, la llamada a la acción, su oferta y fotos del producto. Puede equipar su banner con copias breves y sencillas como "15% de descuento en artículos seleccionados" o "Rebaja flash para el fin de semana" para que la idea de su correo sea lo más clara posible.

(Fuente: Plantilla de Stripo)

La importancia del tamaño del banner de correo electrónico

Una imagen de banner entrega su UVP (propuesta de valor única) y componentes asociados a la marca, como el logotipo de su marca, CTA (llamada a la acción), esquemas de colores corporativos y gráficos. Estas características lo diferencian de cientos de correos promocionales que inundan las bandejas de entrada de sus destinatarios y motivan a los suscriptores a abrir y leer sus mensajes. 

Un tamaño inapropiado de un banner de correo electrónico puede arruinar toda la estructura de su contenido. Un banner demasiado ancho obligará a su cliente de correo a activar la función de desplazamiento horizontal, mientras que un banner pequeño hará que los destinatarios entrecerren los ojos para percibir su contenido. 

Las dimensiones perfectas de la plantilla de correo electrónico

El tamaño de banner de correo electrónico más utilizado  es de 600-700 px de ancho para dispositivos de escritorio, lo que garantiza una visualización adecuada en todos los dispositivos. Mientras tanto, las dimensiones de altura suelen estar entre 350-500 px. 

Seguir las dimensiones del banner de correo que compartimos a continuación te ayuda a crear diseños visualmente atractivos y responsivos para pantallas de escritorio y móviles, evitando crear el tamaño incorrecto del banner del correo.

Puede usar varios tipos de banners de correo electrónico dentro de su boletín para alcanzar distintos objetivos. Ahora discutiremos el tamaño perfecto de banner para el cuerpo  de su correo responsivo, encabezados y pies.

Tamaño del banner del encabezado del correo  electrónico

Una imagen de encabezado vibrante y pegadiza motivará a sus lectores a seguir desplazándose. Puede equipar este encabezado con el logotipo de su empresa, una breve copia que explique el propósito principal de su correo electrónico y un CTA. Recomendamos limitar el tamaño del banner del correo electrónico a 600-700px y la altura a 90-200px para ordenadores. 

En dispositivos móviles, debería usar editores de correo modernos que soporten imágenes responsivas al crear banners de correo. Un enfoque responsivo permite que la imagen ajuste su tamaño automáticamente según el tamaño de pantalla en el que se muestre. Las imágenes responsivas le liberarán del dolor de cabeza, ya que no puede saber con certeza en qué dispositivo móvil se abrirá su correo, así que su objetivo principal es ofrecer una experiencia de correo consistente, y las imágenes responsivas son la herramienta adecuada para esta tarea.

En otros casos, puede seguir el consejo del romano anterior.

Aquí tiene un ejemplo de encabezado de correo electrónico de 650px (ancho) y 200px (altura):

Tamaño del banner del cuerpo del correo  electrónico

Un banner llamativo dentro del cuerpo de su correo puede transmitir la idea central de su mensaje sin saturar a los lectores con largos párrafos de texto. Aquí puede revelar más detalles sobre su oferta y explicar qué problemas puede resolver un cliente usándola. 

Para pantallas de escritorio, le sugerimos hacer un banner corporal de 650-700px de ancho y 350-500px de alto. En dispositivos móviles, la situación es la misma. Considere tamaños de pantalla populares, como mencionamos antes, o use editores de correo modernos con funciones que le permitan crear imágenes dinámicas que se ajustan automáticamente.

(Fuente: Plantilla Stripo)

Tamaño del banner del pie de página del correo  electrónico

Situado al final de su boletín, un pie de página puede incluir los datos de contacto de su organización para cualquier consulta, cuentas en redes sociales y la opción "Cancelar suscripción". Estos detalles permiten que su contenido evite la carpeta de spam y llegue a las bandejas de entrada de sus destinatarios.

Mantenga los pies de página de su correo de 650-700px de ancho y hasta 150px de altura para pantallas de escritorio. En móvil, sugerimos seguir nuestro consejo sobre tamaños de imagen predefinidos que coincidan con los tamaños de pantalla más populares o crear correos electrónicos con editores que apoyen imágenes responsive para facilitarte la vida como especialista en email marketing. Eche un vistazo a nuestro  ejemplo de pie de página de correo electrónico (700px de ancho y 150px de alto):

(Fuente: Plantilla de Stripo)

Tamaño del banner de firma de correo electrónico

Las firmas también suelen colocarse al final de los correos electrónicos y pueden hacerse usando banners de correo. Las dimensiones de la firma de su banner son prácticamente las mismas que para el pie de página normal, así que puede ajustarlas entre 650px y 700px de ancho y hasta 150px de altura para su versión de escritorio.

(Fuente: Plantilla Stripo)

En cuanto al móvil, utilice tamaños de imagen predefinidos o un enfoque de imagen responsive si su editor de correo soporta funciones similares que le permitan crear partes de correo con imágenes dinámicas.

Qué considerar al crear un banner de correo electrónico

Ahora que ya sabe todo sobre las dimensiones ideales para los distintos tipos de banners de correo electrónico, echemos un vistazo a algunos aspectos más esenciales a tener en cuenta durante el proceso de diseño para que sus banners sean atractivos:

Tamaño de botón

Los botones en los banners de correo electrónico deberían ser lo suficientemente visibles, por lo que es fundamental asegurarse de que no se mezclen con la imagen de fondo ni con otros elementos de su mensaje.

(Fuente: Plantilla de Stripo)

Texto sobre imágenes de banner 

Un banner típico de correo electrónico consiste en una imagen y texto superpuestos. Aquí, es fundamental definir las fuentes y combinaciones de colores adecuadas para que su texto sea legible y vibrante. Por ejemplo, sería difícil notar su copia hecha en texto marrón sobre una imagen negra. Lo mismo ocurre con los colores claros: el texto blanco sobre un fondo gris claro es una mala idea.

Le recomendamos que experimente con las fuentes, colores, tamaños y la posición de su texto para que sea visible y legible. En las imágenes de abajo, puede ver que un banner con una fuente ilegible y texto gris sobre un fondo marrón  parece desordenado, mientras que la primera opción, con una fuente más legible y un color contrastante, es mucho más fácil de notar.

Tamaño de imagen

También es crucial tener una buena velocidad de carga. Cuanto menos tarde en cargar su correo, mejor. Asegúrese de comprimir las imágenes de sus banners antes de añadirlas a sus correos para evitar aumentar el tamaño del archivo de su banner. 

Cuando trabaja con Stripo, puede comprimir automáticamente todas las imágenes que añade. Solo tiene que activar la compresión de imagen y elegir el porcentaje de compresión necesario en la configuración de su espacio de trabajo.

Optimización de dispositivos

Los banners de correo electrónico con imágenes temáticas de fiestas requieren optimización del dispositivo para garantizar que su plantilla sea accesible y eficaz en todos los dispositivos. Durante la temporada navideña, cuando la gente tiene prisa, utiliza principalmente sus dispositivos móviles o tabletas. Y aquí es donde es crucial asegurarse de que su plantilla esté optimizada junto con todos los botones de CTA e ilustraciones.

Branding

Al crear un banner navideño para el correo electrónico con imágenes de marca, puede aumentar el reconocimiento de la marca y atraer a nuevos clientes, algo esencial para el negocio. Asegúrese de que el banner navideño sea coherente con otros materiales de la marca; Añada la plantilla de marca y personalice el diseño de la pancarta para que se ajuste a la identidad visual de su marca. Sus campañas de correo navideño  serán fácilmente identificables como resultado de esto. Un logotipo, una tipografía y una combinación de colores ayudan a consumidores y empresas a generar confianza y fidelidad, lo que conduce a un aumento de la interacción, las ventas y el retorno del retorno de la inversión.

Construcción de enlaces

¡Asegúrese de que la imagen de su banner navideño  enlaza con la página de destino necesaria! Es muy fácil añadir un enlace a cualquier imagen que necesite; Por ejemplo, una referencia a la página del producto puede ser una gran opción si está promocionando un producto en particular. Los destinatarios hacen clic e interactúan directamente con su contenido. De este modo, aumenta su CTR y genera conversiones directamente en el mismo banner navideño.

Montando un banner con Stripo

Usando nuestro editor, puede empezar a crear banners de correo electrónico en cuestión de minutos. Hemos seleccionado algunos consejos para que este proceso sea más fácil para usted:

Preparando su pancarta

En primer lugar, necesita añadir un banner a su plantilla de correo electrónico. Tenemos un bloque de banner dedicado que tiene que arrastrar y soltar en su plantilla.

Después de eso, haga clic en el banner añadido para abrir este menú. Antes de poder ajustar las dimensiones y otros parámetros, necesita adjuntar una imagen de banner de correo electrónico. Tiene varias opciones, desde simplemente subir una imagen desde su dispositivo o usar imágenes de stock, hasta generar una imagen única usando nuestra función de Imágenes con IA.

Para nuestro ejemplo, hemos elegido una opción de Photostock. Solo tiene que hacer clic en la imagen que necesita (introducir una búsqueda en el campo correspondiente si no ve imágenes adecuadas para sus ideas de diseño de inmediato), y se adjuntará automáticamente al banner.

Una vez terminado, puedes empezar a ajustar los parámetros del banner del correo.

Cambiar el ancho y la altura para el ordenador de escritorio

Para establecer el tamaño correcto del banner del correo, vaya a la pestaña de Configuración. La sección de Tamaño es todo lo que necesita para establecer las dimensiones necesarias.

Hay varios botones que tendrá que ajustar para el tamaño adecuado de su banner (de izquierda a derecha):

• hace que la imagen encaje al tamaño del contenedor;
• restaura el tamaño real de la imagen;
• modo de ajuste de ancho;
• modo de ajuste de altura;
• botones para ajustar el tamaño (funcionan por separado para los modos de ajuste de ancho y alto).

Solo tiene que ajustar las dimensiones correctas usando estos botones y listo.

También puede establecer una forma de recorte en la sección correspondiente eligiendo entre orientaciones predefinidas (tanto vertical como horizontal).

Cambio de ancho y altura para pantallas móviles

Para que su banner de correo electrónico se muestre correctamente en las pantallas móviles, haga clic en la opción Vista móvil para abrir la configuración de la versión móvil en Stripo.

Tenemos la opción de imagen Responsive activada por defecto, así que en la mayoría de los casos no tiene que hacer nada, ya que esta opción garantiza que la imagen del banner se ajuste automáticamente a las dimensiones de pantalla.

Puede desactivar esta opción, pero no la recomendamos, ya que una vez desactivada, su imagen banner  permanecerá estática, independientemente de la resolución de pantalla en la que se muestre. Esto puede provocar una mala visualización de imágenes y contenido en su banner.

Cambiar la forma del recorte es igual que en la versión de escritorio.

Añadir imágenes y enlaces

Para añadir un botón a su banner, tenemos una opción que le permite añadir otra imagen encima de su banner. Puede combinar su imagen de fondo relevante con otra, creando diseños únicos para su correo electrónico o llamando la atención sobre su banner.

Para ello, haga clic en la opción Imagen mientras está en la configuración de bloques de banner.

Verá el mismo menú para añadir una imagen que antes vió para todo el banner. Solo elija la opción correcta para añadir una imagen y así seguir adelante.

Una vez añadida, su imagen aparecerá en el centro del banner, y verá un pequeño menú con opciones para ajustar la opacidad de esta imagen, su rotación, darle la vuelta como necesite y aplicar filtros visuales encima.

Para cambiar el tamaño de esta imagen adicional, tendrá que arrastrar las esquinas del fotograma, y su imagen cambiará de tamaño. También puede arrastrar la imagen dentro de los bordes del banner haciendo clic y arrastrando la imagen, así como rotarla manualmente tocando el punto encima del marco.

Ha añadido su imagen de CTA para llamar la atención. Ahora, ¿cómo hacer que su banner sea clicable? Solo tiene que poner el enlace en el campo correspondiente y, una vez que lo añade, todo su banner se convertirá en un gran botón de CTA que transfiere al destinatario a la página que necesita.

Añadir textos y ajustarlos

Si necesita más opciones para decorar la imagen de su banner, puede añadir texto encima. Haga clic en la opción Texto encima de su banner.

El nodo de texto aparecerá automáticamente en el centro de su banner y verá una pestaña con diferentes opciones de texto.

Para escribir su texto, solo tiene que hacer doble clic en el nodo de texto para seleccionar el texto predeterminado y escribir el nuevo.

En cuanto a las opciones de ajuste, tiene toda una variedad de ellas. Puede cambiar la posición, tamaño y rotación manualmente arrastrando las esquinas del fotograma del nodo de texto o arrastrando todo el nodo de la misma manera que hizo con su imagen.

En cuanto al texto en sí, puede:

• seleccionar la fuente del texto, su tamaño y color;
• elegir alineación de texto;
• ajustar estilos como negrita, cursiva, subrayado o tachado;
• cambiar el caso de letras a superior o inferior;
• configurar la opacidad, rota y cambia el texto como necesite.

Así es como queda nuestro nodo de texto después de aplicar la mayoría de las opciones. Ajuste los textos para adaptarlos fácilmente a sus necesidades de diseño de correo.

Resumen

El tamaño adecuado del banner mantendrá su mensaje estructurado y atraerá la atención de los suscriptores hacia los elementos centrales de su mensaje. Ahora, cuando sepa el ancho y la altura perfectos de un banner de correo electrónico y entiende cómo crear uno con Stripo, ¡está listo para que su próxima campaña sea un éxito!