Cómo añadir una imagen de fondo a una plantilla de email o una sección
Qué aprenderás
Descubre cómo superponer texto, imágenes y otro contenido de email sobre imágenes de fondo. Puedes añadir una imagen de fondo a un email completo o a una sola sección. Al usar estas funciones, puedes superponer una imagen encima de otra o añadir un botón o texto sobre una imagen.
Acerca de las imágenes de fondo
Puedes añadir una imagen de fondo detrás de una plantilla de email completa o detrás de una sección específica de la plantilla. Los fondos de las plantillas se añaden desde la pestaña Estilos de la plantilla, y generalmente abarcan todo el ancho y alto del email.
Sin embargo, los fondos de las secciones están aislados a áreas específicas del email. Te permiten crear imágenes dinámicas y llamativas, además de llamadas a la acción (CTA). También puedes incluir varias llamadas a la acción (CTA) en 1 imagen (p. ej., «Comprar zapatos» y «Comprar accesorios»). Estas imágenes de fondo específicas de cada sección se pueden añadir desde la pestaña Estilos de una sección.
Utilizar una imagen de fondo con texto y otro contenido superpuesto puede aumentar la accesibilidad de tu email, en comparación con insertar una única 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 entender el contenido del mensaje.
Además, los destinatarios que usan bandejas de entrada de texto sin formato o configuran su bandeja 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 los destinatarios con necesidades de accesibilidad o dispositivos alternativos entender tu mensaje.
Seleccionar imágenes de fondo
Al seleccionar una imagen para usar como fondo de una sección o plantilla, elige una imagen que tenga una resolución lo suficientemente alta como para verse 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 para tus emails. En general, usa imágenes de 1 MB o menos como fondos de sección.
Establecer una imagen de fondo de la sección
Una vez que hayas elegido una imagen para usarla, añade una nueva sección a tu plantilla de email.
- 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 Explorar la biblioteca de imágenes y, a continuación, sube tu imagen.
- Cuando hayas aplicado 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 configurar una imagen de fondo, elige también un color de fondo. Este color aparecerá si la imagen de fondo no se puede cargar por cualquier motivo.
- Abre la pestaña Estilos de la sección.
- Activa Color de la sección.
- Elige un color que se parezca mucho al color de la imagen que elegiste.
Opciones de estilo del fondo de la sección
Para elegir si la imagen abarca todo el ancho de tu email o queda contenida dentro del contenido del email, elige entre Content o Section en el ajuste Display on.
En la sección Formato, elige entre las siguientes opciones:
- Tamaño original
Tu imagen se mostrará en su tamaño original y no estará restringida de ninguna manera. - Ajustar
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 exactamente el tamaño del área de la sección. - Rellenar
Tu imagen rellenará el área de la sección por completo, y puede que se recorte parte de la imagen. - Mosaico
La imagen se repetirá para llenar toda el área de la sección, y puedes activar/desactivar el Tamaño del mosaico para elegir la escala.
Establecer una imagen de fondo de la plantilla
Para añadir una imagen de fondo a una plantilla de email:
- Navega hasta 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 la imagen, puedes cambiar cómo se coloca y si debe repetirse (o colocarse en mosaico) horizontal y verticalmente.
Las imágenes configuradas como imágenes de fondo para una plantilla pueden cubrir todo el ancho del área de la plantilla. Es posible que quieras configurar un color de fondo de la plantilla en un tono similar al de tu imagen, ya que el color de fondo puede mostrarse mientras se carga la imagen o si un destinatario tiene las imágenes deshabilitadas en el email.
Compatibilidad de la bandeja de entrada con 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 puede que no se muestren. En estos casos, se mostrará el color de fondo.
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, dejando ver el color de fondo en su lugar.
Recursos adicionales
- About email images best practices
Learn about best practices when using images in Klaviyo emails, including size recommendations and how to add images.
- Dark mode email design best practices
Learn about dark mode, a device setting some users turn on to darken their displays. This setting impacts how emails are displayed. Dark mode is an end user setting that is selected at the device level, and Klaviyo does not have direct control over how dark mode is implemented on each device.
- Coding HTML email backgrounds