Objetivos del artículo

Aprende a superponer texto, imágenes y otro contenido de correo electrónico sobre imágenes de fondo. Puedes agregar una imagen de fondo a un correo completo o a una sola sección. Al usar esta función, 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 completa o detrás de una sección específica en la plantilla. Los fondos de la plantilla se agregan desde el panel Estilos de la plantilla y, por lo general, abarcan todo el ancho y el alto del correo.

Template background image
Template background image

Sin embargo, los fondos de sección están aislados a áreas específicas del correo electrónico. Permiten crear imágenes dinámicas y llamativas, así como llamados a la acción. También puedes incluir varios 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.

Section background image settings
Section background image settings

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 usar como fondo de una sección o plantilla, elige una imagen con una resolución lo suficientemente alta como 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 la imagen que vas a usar, abre la plantilla en el editor de correo electrónico de arrastrar y soltar. Selecciona una sección existente o agrega una nueva sección.

  1. En la pestaña Estilos de la sección, activa Imagen de fondo.
  2. Haz clic en Seleccionar imagen.
Add a section background image
Add a section background image
  1. En Biblioteca de imágenes, haz clic en Seleccionar junto a una imagen. Para cargar una nueva imagen, abre Cargar imagen y elige el archivo. Si se te pide comparar versiones, elige Original o Comprimida y luego haz clic en Cargar.
  2. 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.

  1. Abre la pestaña Estilos de la sección.
  2. Para una imagen que se muestra en Contenido, establece Color del contenido en Personalizado. Para una imagen que se muestra en Sección, activa Color de la sección.
  3. Elige un color que coincida lo más posible con la imagen y mantenga el texto legible si la imagen no se carga.

Para mostrar una imagen de fondo de sección de ancho completo detrás del contenido, establece Color del contenido en Ninguno. De lo contrario, el color de fondo del contenido puede cubrir la imagen.

Opciones de estilo de fondo de la sección

En Imagen de fondo, selecciona Contenido para mantener la imagen dentro del área de contenido del correo electrónico, o Sección para extenderla a lo largo de todo el ancho.

En la sección Formato, elige entre las siguientes opciones:

  • Tamaño original
    La imagen conserva sus dimensiones originales. Las partes que se extiendan más allá del área de la sección no serán visibles.
  • 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 activar o desactivar 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:

  1. Abre Estilos en la barra lateral del editor.
  2. Activa Imagen de fondo y luego haz clic en Seleccionar imagen.
Template background option
Template background option
  1. En Biblioteca de imágenes, haz clic en Seleccionar junto a una imagen. Para cargar una nueva imagen, abre Cargar imagen y elige el archivo. Si se te pide comparar versiones, elige Original o Comprimida y luego haz clic en Cargar.

Usa Formato para elegir Tamaño original, Ajustar, Rellenar o Mosaico, como se describe arriba. Usa Posición de la imagen para alinear la imagen. Si eliges Mosaico, usa Tamaño del mosaico para elegir Original o Ajustar.

Las imágenes configuradas como imágenes de fondo para una plantilla pueden abarcar 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 la imagen, ya que el color de fondo puede mostrarse mientras se carga la imagen o si un destinatario tiene las imágenes desactivadas en el correo electrónico.

Los fondos de sección pueden cubrir la imagen de la plantilla. Para que la imagen de la plantilla se vea a través de una sección, desactiva Imagen de fondo y Color de sección, y establece Color de contenido en Ninguno en la pestaña Estilos de esa sección.

Cuando termines de editar una plantilla de correo electrónico guardada, haz clic en Salir para guardar los cambios y salir del editor.

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

  • 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
¿Te resultó útil este artículo?
Usa este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar al equipo de asistencia.

Descubre más sobre Klaviyo

Comunidad
Conecta con colegas, socios y expertos de Klaviyo para inspirarte, compartir ideas y resolver todas tus dudas.
Socios
Contrata a un experto certificado por Klaviyo para ayudarte con una tarea específica o para la gestión continua de marketing.
Asistencia

Accede a la asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia virtual/por chat
La disponibilidad varía según la ubicación y el tipo de plan