En esta página: aprenda a establecer colores e imágenes de fondo en los niveles de cuerpo, ventanilla, estructura y columna del correo electrónico en el diseñador de correo electrónico.
Los fondos le ayudan a reforzar su identidad de marca y a llamar la atención sobre las áreas clave de su correo electrónico. En el Diseñador de correo electrónico, puede establecer un color de fondo o una imagen en diferentes niveles de su contenido, desde el cuerpo general hasta las estructuras y columnas individuales, lo que le proporciona un control preciso sobre cómo se representan los fondos en el correo electrónico.
Tenga en cuenta las siguientes prácticas recomendadas a la hora de establecer fondos en el Diseñador de correo electrónico:
- Aplique un color de fondo al cuerpo solo si el diseño lo requiere.
- Siempre que sea posible, es preferible establecer colores de fondo a nivel de columna.
- Evite utilizar colores de fondo en componentes de imagen o texto, ya que son más difíciles de administrar.
- Pruebe las imágenes de fondo en los clientes de correo electrónico reales antes de enviarlas, ya que la representación puede diferir de la vista previa del Diseñador de correo electrónico.
La siguiente configuración permite aplicar un color de fondo o una imagen a cualquier nivel del contenido del correo electrónico, desde el cuerpo hasta las estructuras y columnas individuales.
Establecimiento de un color de fondo background-color
-
Color de fondo del cuerpo: defina un color de fondo para todo el correo electrónico. Asegúrese de seleccionar Cuerpo en el Árbol de navegación accesible desde la paleta izquierda y utilice la opción dedicada en la pestaña Estilos situada a la derecha.
-
Color de fondo de la ventanilla: defina un Color de ventanilla para aplicar el mismo color de fondo a todos los componentes de la estructura, independientemente del color de fondo del cuerpo.
-
Color de fondo de la estructura: para aplicar un color de fondo a un solo componente de la estructura, selecciónelo directamente en el lienzo o en la paleta izquierda y establezca un color específico para esa estructura.
note tip TIP En ese caso, asegúrese de no establecer un color de fondo de ventanilla, ya que podría ocultar los colores de fondo de la estructura. -
Color de fondo de la columna: defina un color de fondo a nivel de la columna. De nuevo, asegúrese de seleccionar la columna deseada en la paleta izquierda y establezca un color específico para esa columna.
note tip TIP Este es el caso de uso más común y una práctica recomendada, ya que le ofrece más flexibilidad a la hora de editar el resto del contenido del correo electrónico.
Establecimiento de una imagen de fondo background-image
También puede establecer una Imagen de fondo para el contenido de un componente de estructura o columna. Se suele utilizar a nivel de la estructura, aunque es posible establecerlo a nivel de columna, pero muy pocas veces se utiliza.
Una vez establecida una imagen de fondo, utilice el menú desplegable Ubicación de imágenes para controlar cómo la imagen rellena la estructura o la columna. Las siguientes opciones están disponibles para su selección:
Escalar para rellenar, centrado:
- Ajustar: expande la imagen para llenar el contenedor en ambos ejes, sin conservar su relación de aspecto.
- Anchura completa: escala la imagen proporcionalmente a la anchura del contenedor y la centra verticalmente.
- Altura completa: escala la imagen proporcionalmente a la altura del contenedor y la centra horizontalmente.
Escalar para rellenar, anclado a un borde:
- Anchura completa: arriba: igual que Anchura completa, anclada a la parte superior del contenedor. La parte que desborda se recorta por abajo.
- Anchura completa: abajo: igual que Anchura completa, anclada en la parte inferior del contenedor. La parte que desborda se recorta por arriba.
- Altura completa: izquierda: igual que Altura completa, anclada a la izquierda del contenedor. La parte que desborda se recorta por la derecha.
- Altura completa: derecha: igual que Altura completa, anclada a la derecha del contenedor. La parte que desborda se recorta por la izquierda.
Mosaico:
- Repetir: muestra la imagen en mosaico a su tamaño original para que ocupe todo el contenedor.
Posición sin escala:
- Izquierda, Derecha, Centro, Arriba, Abajo: coloca la imagen en su tamaño original, anclada al borde o al centro correspondiente del contenedor.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to set background colors and images at the body, viewport, structure, and column levels of an email in the Email Designer, and Adobe’s best practices for doing so.
Intents:
- Set a Background color for the whole email at the body level
- Apply the same background color to all structure components using Viewport background color
- Set a different background color for a specific structure component
- Set a background color for a specific column
- Set a Background image for a structure or column component and choose an Image placement option
Glossary:
- Background color: A color applied to the whole email when Body is selected in the navigation tree (product-specific)
- Viewport background color: A setting that applies the same background color to all structure components, independently of the body’s background color (product-specific)
- Background image: An image set for the content of a structure or column component; falls back to the background color when not supported (product-specific)
- Image placement: A dropdown that controls how a background image fills its container — by scaling it centered, scaling it anchored to an edge, tiling it, or positioning it without scaling (product-specific)
Guardrails:
- Some email programs / clients do not support background images; when not supported, the background color is used instead, so select an appropriate fallback background color.
- When setting a different background color per structure component, do not set a viewport background color, as it may hide the structure background colors.
- Column-level background color is the most common use case and Adobe’s recommended best practice, for more flexibility when editing the rest of the email content.
- Avoid using background colors on image or text components, as they are harder to manage.
- Apply a background color to the body only if the design requires it.
- A background image can also be set at the column level, though this is rarely used; the same fallback color and Image placement options apply there too.
Terminology:
- Canonical name: Background — Acronym: n/a — variants: background color, background image, image placement
- Do not confuse: “Background color” (body-level, whole email) ≠ “Viewport background color” (same color applied to all structure components)
- Do not confuse: “Background color” (supported broadly by email clients) ≠ “Background image” (not supported by all email clients, falls back to background color)
- Do not confuse the “Scale to fill, centered” Image placement options (Fit, Full Width, Full Height) with the “Scale to fill, anchored to an edge” options (Full Width - Top, Full Width - Bottom, Full Height - Left, Full Height - Right), which control which side is cropped instead of centering the image
FAQ:
- Q: Where does Adobe recommend setting background colors? — At the column level, which is the most common use case and best practice, allowing more flexibility when editing the rest of the email content.
- Q: What happens if a background image is not supported by an email client? — The background color is used instead, so select an appropriate fallback background color.
- Q: How do I apply the same background color to all structure components? — Select Viewport background color, which can be set independently of the body’s background color.
- Q: Why might my per-structure background colors not appear? — A viewport background color may hide the structure background colors; do not set one in that case.
- Q: Can I set a background image at the column level? — Yes, though it is rarely used; the same fallback color behavior and Image placement options described for structures apply there too.
- Q: What is the difference between “Full Width” and “Full Width - Top” / “Full Width - Bottom”? — “Full Width” scales the image proportionally to the container’s width and centers it vertically. The “Top” and “Bottom” variants anchor it to that edge instead, cropping the opposite side rather than centering.
- Q: What is the difference between “Full Height” and “Full Height - Left” / “Full Height - Right”? — “Full Height” scales the image proportionally to the container’s height and centers it horizontally. The “Left” and “Right” variants anchor it to that side instead, cropping the opposite side rather than centering.