In questa pagina: scopri come impostare i colori e le immagini di sfondo a livello di corpo, riquadro di visualizzazione, struttura e colonna dell’e-mail all’interno dell’E-mail designer.
Gli sfondi ti aiutano a rafforzare la tua identità del brand e a richiamare l’attenzione sulle aree chiave della tua e-mail. In E-mail Designer, puoi impostare un colore o un’immagine di sfondo a diversi livelli del contenuto, dal corpo generale alle singole strutture e colonne, per un controllo preciso del rendering degli sfondi in tutta l’e-mail.
Quando imposti gli sfondi nel Designer e-mail, tieni presenti le seguenti best practice:
- Applicare un colore di sfondo al corpo solo se il progetto lo richiede.
- Se possibile, è preferibile impostare i colori di sfondo a livello di colonna.
- Evita di utilizzare i colori di sfondo nei componenti immagine o testo, in quanto sono più difficili da gestire.
- Verifica le immagini di sfondo tra i client e-mail effettivi prima dell’invio, poiché il rendering può essere diverso dall’anteprima di E-mail Designer.
Le seguenti impostazioni consentono di applicare un colore o un’immagine di sfondo a qualsiasi livello del contenuto dell’e-mail, dal corpo verso il basso alle singole strutture e colonne.
Impostare un colore di sfondo background-color
-
Colore sfondo corpo - Imposta un Colore sfondo per l’intera e-mail. Assicurati di selezionare Body nella Struttura di navigazione accessibile dalla palette a sinistra e di utilizzare l’opzione dedicata dalla scheda Stili a destra.
-
Colore di sfondo del riquadro di visualizzazione - Imposta un Colore riquadro di visualizzazione per applicare lo stesso colore di sfondo in tutti i componenti della struttura, indipendentemente dal colore di sfondo del corpo.
-
Colore di sfondo struttura - Per applicare un colore di sfondo a un singolo componente struttura, selezionarlo direttamente nell’area di lavoro o nella tavolozza a sinistra e impostare un colore specifico per tale struttura.
note tip TIP In tal caso, assicurarsi di non impostare un colore di sfondo del riquadro di visualizzazione, in quanto potrebbe nascondere i colori di sfondo della struttura. -
Colore di sfondo colonna - Imposta un colore di sfondo a livello di colonna. Di nuovo, assicurati di selezionare la colonna desiderata dalla palette a sinistra e di impostare un colore specifico per tale colonna.
note tip TIP Si tratta del caso d’uso più comune e della best practice, in quanto offre maggiore flessibilità durante la modifica del resto del contenuto delle e-mail.
Impostare un’immagine di sfondo background-image
È inoltre possibile impostare una immagine di sfondo per il contenuto di un componente struttura o colonna. Questo è più comunemente utilizzato a livello di struttura; impostarne uno a livello di colonna è possibile, ma raramente viene utilizzato.
Una volta impostata un’immagine di sfondo, utilizza il menu a discesa Posizionamento immagine per controllare il modo in cui l’immagine riempie la struttura o la colonna. È possibile selezionare le opzioni seguenti:
Ridimensiona per riempire, centrato:
- Adatta - Allunga l’immagine per riempire il contenitore su entrambi gli assi, senza mantenerne le proporzioni.
- Larghezza intera - Ridimensiona l’immagine proporzionalmente alla larghezza del contenitore e la centra verticalmente.
- Altezza massima: ridimensiona l’immagine in modo proporzionale all’altezza del contenitore e la centra in orizzontale.
Scala per riempimento, ancorata a un bordo:
- Larghezza intera - Superiore - Uguale a Larghezza intera, ancorata alla parte superiore del contenitore. L’overflow viene ritagliato nella parte inferiore.
- Larghezza intera - Inferiore - Uguale a Larghezza intera, ancorata alla parte inferiore del contenitore. L’overflow viene ritagliato nella parte superiore.
- Altezza massima - Sinistra - Uguale a Altezza massima, ancorata alla sinistra del contenitore. L’overflow viene ritagliato a destra.
- Altezza massima - Destra - Uguale a Altezza massima, ancorata alla destra del contenitore. L’overflow viene ritagliato a sinistra.
Sezione:
- Ripeti - Affianca l’immagine alle dimensioni originali per riempire il contenitore.
Posizione senza ridimensionamento:
- Sinistra, Destra, Centro, Superiore, Inferiore - Posiziona l’immagine alle dimensioni originali, ancorata al bordo o al centro corrispondente del contenitore.
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.