Cómo añadir una imagen de fondo a una plantillas de correo electrónico o sección
Objetivos de aprendizaje
Aprende a superponer texto, imágenes y otros contenidos de correo electrónico sobre imágenes de fondo. Puedes añadir una imagen de fondo a un correo electrónico completo o a una sola sección. Utilizando estas funciones/características, puedes superponer una imagen sobre otra, o añadir un botón o texto sobre una imagen.
Sobre las imágenes de fondo
Puedes añadir una imagen de fondo detrás de toda una plantilla de correo electrónico o detrás de una sección específica de la plantilla. Los fondos de plantilla se añaden mediante la pestaña Estilos de la plantilla, y generalmente abarcan toda la anchura y altura del correo electrónico.
Los fondos de sección, sin embargo, están aislados en áreas específicas del correo electrónico. Te permiten crear imágenes dinámicas, llamativas y llamadas a la acción. También puedes incluir varios llamados a la acción sobre 1 imagen (por ejemplo, "Comprar zapatos" y "Comprar accesorios"). Estas imágenes de fondo específicas de cada sección pueden añadirse a través de la pestaña Estilos de una sección.
Utilizar una imagen de fondo con texto y otros contenidos superpuestos 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 imágenes con poco texto, los destinatarios que utilicen lectores de pantalla y otros dispositivos de accesibilidad que no muestren imágenes se basarán en el texto alternativo para comprender el contenido del mensaje.
Además, los destinatarios que utilicen bandejas de entrada de texto sin formato o configuren sus bandejas de entrada para ocultar las imágenes por defecto no podrán entender fácilmente tu mensaje. Cuando utilizas bloques de texto estándar con una imagen detrás, es más fácil que los destinatarios con necesidades de accesibilidad o dispositivos alternativos entiendan tu mensaje.
Seleccionar imágenes de fondo
Cuando selecciones una imagen para utilizarla como fondo de sección o de plantilla, elige una imagen que tenga una resolución suficientemente alta para que aparezca nítida y profesional en la bandeja de entrada. Sin embargo, asegúrate de no utilizar un archivo innecesariamente grande, ya que esto puede provocar tiempos de carga lentos para tu correo electrónico. En general, utiliza imágenes de 1 MB o menos como fondos de sección.
Establecer una imagen de fondo de sección
Una vez que hayas elegido la imagen que quieres utilizar, añade una nueva sección a tus plantillas de correo electrónico.
- En la pestaña Estilos de la sección, localiza la sección Fondo.
- Haz clic en + para añadir una imagen.
- Haz clic en Examinar biblioteca de imágenes y, a continuación, sube tu imagen.
- Una vez que hayas dado estilo a la imagen de fondo, añade contenido a la sección. Puedes añadir cualquier tipo de bloque (por ejemplo, bloque de texto, bloque de botón, bloque de tabla) y cualquier número de bloques a tu sección.
Después de establecer una imagen de fondo, elige también un color de fondo. Este color aparecerá si la imagen de fondo no puede cargarse por cualquier motivo.
- Abre la pestaña Estilos de la sección.
- Activa el color de la sección.
- Elige un color que se acerque al color de la imagen que elegiste.
Opciones de estilo de fondo de sección
Para elegir si la imagen ocupa todo el ancho de tu correo electrónico o si está dentro del contenido del correo electrónico, 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 verá limitada de ninguna manera. - Ajustar
Tu imagen se ajustará por completo al área de la sección, y puede dejar al descubierto el color de fondo de debajo si no tiene el tamaño exacto del área de la sección. - Rellenar
Tu imagen rellenará completamente el área de la sección, y parte de la imagen puede recortarse. - Mosaico
La imagen se repetirá para llenar toda el área de la sección, y puedes cambiar el tamaño del Mosaico para elegir la escala.
Establecer una imagen de fondo para la plantilla
Para añadir una imagen de fondo a una plantilla de correo electrónico:
- Ve a la pestaña Estilos de la plantilla.
- Haz clic en + para añadir una imagen.
- Elige una imagen de tu biblioteca de imágenes o sube una nueva.
Una vez que hayas añadido tu imagen, puedes cambiar su posición y si debe o no repetirse (o colocarse en mosaico) horizontal y verticalmente.
Las imágenes establecidas como imágenes de fondo para una plantilla pueden cubrir todo el ancho del área de la plantilla. Puede que quieras establecer una plantilla Color de fondo en un tono similar al de tu imagen, ya que el color de fondo puede aparecer mientras se carga la imagen o si un destinatario tiene imágenes en correo electrónico desactivar/inhabilitar.
Inbox equipo de asistencia para imágenes de fondo
Aunque la mayoría de las bandejas de entrada tienen imágenes de fondo del equipo de asistencia, hay ciertas situaciones en las que puede que no se muestren. En estos casos, se mostrará en su lugar el color de fondo.
Las siguientes bandejas de entrada no tienen imágenes de fondo de equipo de asistencia:
- Outlook para Windows
- Yahoo! Mail (equipo parcial de asistencia)
- AOL (equipo parcial de asistencia)
Además, si un destinatario tiene un acceso a Internet limitado o lento, la imagen de fondo puede cargarse lentamente o no cargarse en absoluto, mostrando en su lugar el color de fondo.
Recursos adicionales
- Acerca de las mejores prácticas para las imágenes de correo electrónico
Infórmate sobre las mejores prácticas al utilizar imágenes en Klaviyo Email, incluyendo recomendaciones de tamaño y cómo añadir imágenes.
- Mejores prácticas de diseño de correo electrónico en modo oscuro
Infórmate sobre el modo oscuro, un ajuste del dispositivo que algunos usuarios activan para oscurecer sus pantallas. Este ajuste afecta a cómo se muestra el correo electrónico. El modo oscuro es un ajuste del usuario final 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