Cómo añadir una imagen de fondo a una plantilla de correo electrónico o sección
Objetivos del artículo
Descubre cómo superponer texto, imágenes y otro contenido del correo electrónico sobre imágenes de fondo. Puedes agregar una imagen de fondo a todo el correo electrónico o a una sola sección. Al usar estas funciones, puedes superponer una imagen sobre otra o agregar un botón o texto sobre una imagen.
Acerca de las imágenes de fondo
Puedes agregar una imagen de fondo detrás de una plantilla de correo electrónico completa o detrás de una sección específica de la plantilla. Los fondos de la plantilla se agregan con la pestaña Estilos de la plantilla y, por lo general, abarcan todo el ancho y el alto del correo electrónico.
Sin embargo, los fondos de sección están aislados en áreas específicas del correo electrónico. Te permiten crear imágenes dinámicas y llamativas, así como llamados a la acción. También puedes incluir múltiples llamados a la acción en 1 imagen (p. ej., “Comprar zapatos” y “Comprar accesorios”). Estas imágenes de fondo específicas de la sección se pueden agregar desde la pestaña Estilos de una sección.
Usar una imagen de fondo con texto y otro contenido superpuesto puede aumentar la accesibilidad de tu correo electrónico, en comparación con insertar una sola imagen que contenga texto. Si tu mensaje contiene principalmente contenido de imagen con poco texto, los destinatarios que usan lectores de pantalla y otros dispositivos de accesibilidad que no muestran imágenes dependen del texto alternativo para comprender el contenido del mensaje.
Además, los destinatarios que usan bandejas de entrada de texto sin formato o configuran sus bandejas de entrada para ocultar imágenes de forma predeterminada no podrán entender fácilmente tu mensaje. Cuando usas bloques de texto estándar con una imagen detrás, es más fácil para quienes tienen necesidades de accesibilidad o usan dispositivos alternativos entender tu mensaje.
Seleccionar imágenes de fondo
Al seleccionar una imagen para usarla como fondo de una sección o plantilla, elige una imagen con una resolución lo suficientemente alta para que se vea nítida y profesional en la bandeja de entrada. Sin embargo, asegúrate de no usar un archivo innecesariamente grande, ya que esto puede provocar tiempos de carga lentos en los correos electrónicos. En general, usa imágenes de 1 MB o menos como fondos de sección.
Establece una imagen de fondo de la sección
Una vez que hayas elegido una imagen para usar, agrega una nueva sección a la plantilla de correo electrónico.
- En la pestaña Estilos de la sección, busca la sección Fondo.
- Haz clic en + para agregar una imagen.
- Haz clic en Explorar biblioteca de imágenes y luego sube tu imagen.
- Una vez que hayas aplicado estilo a la imagen de fondo, agrega contenido a la sección. Puedes agregar cualquier tipo de bloque (p. ej., bloque de texto, bloque de botón, bloque de tabla) y cualquier cantidad de bloques a la sección.
Después de configurar una imagen de fondo, elige también un color de fondo. Este color aparecerá si, por cualquier motivo, la imagen de fondo no se puede cargar.
- Abre la pestaña Estilos de la sección.
- Activa Color de la sección.
- Elige un color que coincida lo más posible con el color de la imagen que seleccionaste.
Opciones de estilo de fondo de la sección
Para elegir si la imagen abarca todo el ancho del correo o se contiene dentro del contenido del correo, elige entre Contenido o Sección en la configuración Mostrar en.
En la sección Formato, elige entre las siguientes opciones:
- Tamaño original
Tu imagen se mostrará en su tamaño original y no se ajustará de ninguna manera. - Ajuste
La imagen se ajustará por completo dentro del área de la sección y puede dejar ver el color de fondo debajo si no tiene el tamaño exacto del área de la sección. - Rellenar
La imagen llenará el área de la sección por completo, y es posible que se recorte parte de la imagen. - Mosaico
La imagen se repetirá para llenar toda el área de la sección, y puedes alternar el Tamaño del mosaico para elegir la escala.
Establece una imagen de fondo de la plantilla
Para agregar una imagen de fondo a una plantilla de correo electrónico:
- Navega hasta la pestaña Estilos de la plantilla.
- Haz clic en + para agregar una imagen.
- Elige una imagen de tu biblioteca de imágenes o carga una nueva.
Una vez que hayas agregado la imagen, puedes cambiar cómo se posiciona y si debe repetirse (o en mosaico) horizontal y verticalmente.
Las imágenes configuradas como imágenes de fondo para una plantilla pueden cubrir el ancho completo del área de la plantilla. Tal vez quieras configurar un color Fondo de plantilla en un tono similar al de la imagen, ya que el color de fondo puede mostrarse mientras se carga la imagen o si un destinatario tiene las imágenes en el correo electrónico deshabilitadas.
Soporte de bandeja de entrada para imágenes de fondo
Aunque la mayoría de las bandejas de entrada sí admiten imágenes de fondo, hay ciertas situaciones en las que es posible que no se muestren. En estos escenarios, se mostrará el color de fondo en su lugar.
Las siguientes bandejas de entrada no admiten imágenes de fondo:
- Outlook para Windows
- Yahoo! Mail (compatibilidad parcial)
- AOL (compatibilidad parcial)
Además, si un destinatario tiene acceso a internet limitado o lento, la imagen de fondo puede cargarse lentamente o no cargarse en absoluto, lo que revelará el color de fondo en su lugar.
Recursos adicionales
- Acerca de las prácticas recomendadas para imágenes de correo electrónico
Conoce las mejores prácticas al usar imágenes en Klaviyo Email, incluidas las recomendaciones de tamaño y cómo agregar imágenes.
- Mejores prácticas de diseño de correos electrónicos en modo oscuro
Conoce el modo oscuro, un ajuste del dispositivo que algunos usuarios activan para oscurecer sus pantallas. Esta configuración afecta cómo se muestran los correos electrónicos. El modo oscuro es un ajuste para usuarios finales que se selecciona a nivel de dispositivo, y Klaviyo no tiene control directo sobre cómo se implementa el modo oscuro en cada dispositivo.
- Codificación de fondos de correo electrónico HTML