Gestione degli stili delle e-mail

In E-mail Designer, quando si seleziona un elemento, diverse opzioni specifiche per il tipo di contenuto selezionato vengono visualizzate nel Settings riquadro. Puoi utilizzare queste opzioni per modificare facilmente lo stile dell’e-mail.

Selezione di un elemento

Per selezionare un elemento nell’interfaccia di E-mail Designer, puoi effettuare le seguenti operazioni:

fai clic direttamente nell’e-mail,
o sfoglia la struttura ad albero disponibile tra le opzioni disponibili a sinistra Palette.

Esplorando la struttura ad albero potete effettuare una selezione più accurata. Puoi selezionare:

l'intera componente di struttura,
una delle colonne che compongono il componente struttura,
o solo un componente che si trova all’interno di una colonna.

Per selezionare una colonna, è inoltre possibile effettuare le seguenti operazioni:

Seleziona un componente struttura (direttamente nell’e-mail o utilizzando la struttura ad albero disponibile a sinistra) Palette).
Dalla sezione barra degli strumenti contestuale, fai clic su Select a column per scegliere la colonna desiderata.

Vedi un esempio in questa sezione.

Regolazione delle impostazioni di stile

Seleziona un elemento nell’e-mail. Per ulteriori informazioni, consulta Selezione di un elemento.
Regola le impostazioni in base alle tue esigenze. Ogni elemento selezionato offre un diverso set di impostazioni.

È possibile inserire sfondi, modificare le dimensioni, modificare l'allineamento orizzontale o verticale, gestire i colori, aggiungere riempimento o marginee così via.

A questo scopo, utilizza le opzioni visualizzate nella Settings riquadro o aggiungi attributi di stile in linea.
Salva il contenuto.

Regolazione della spaziatura interna e del margine

L’interfaccia di E-mail Designer consente di regolare rapidamente le impostazioni di spaziatura interna e margine.

Padding: questa impostazione consente di gestire lo spazio che si trova all’interno del bordo di un elemento.

Ad esempio:

Utilizzare la spaziatura per impostare i margini sul lato sinistro e destro di un'immagine.
Utilizza la spaziatura superiore e inferiore per aggiungere più spaziatura a una Text o un Divider componente.
Per impostare i bordi tra le colonne all'interno di un elemento struttura, definire la spaziatura per ogni colonna.

Margin: questa impostazione consente di gestire lo spazio tra il bordo dell’elemento e l’elemento successivo.

NOTA

A seconda della selezione (componente struttura, colonna o componente contenuto), il risultato non sarà lo stesso. Adobe consiglia di impostare Padding e Margin a livello di colonna.

Per entrambi Padding e Margin, fai clic sull’icona del lucchetto per interrompere la sincronizzazione tra i parametri superiore e inferiore o destro e sinistro. Questo consente di regolare ogni parametro separatamente.

Allineamento stile

Allineamento testo: posiziona il cursore del mouse su un testo e utilizza la barra degli strumenti contestuale per allinearlo.
Allineamento orizzontale può essere applicata a testo, immagini e pulsanti, attualmente non al Divider e Social componenti.
Per impostare allineamento verticale, seleziona una colonna all’interno di un componente struttura e scegli un’opzione dal riquadro Impostazioni.

Impostazione degli sfondi

Per impostare lo sfondo con E-mail Designer, Adobe consiglia quanto segue:

Se richiesto dal tuo design, applica un colore di sfondo al corpo dell’e-mail.
Nella maggior parte dei casi, impostare i colori di sfondo a livello di colonna.
Evita di utilizzare i colori di sfondo su componenti immagine o testo, poiché sono difficili da gestire.

Di seguito sono riportate le impostazioni di sfondo disponibili.

Imposta un Background color per l’intera e-mail. Assicurati di selezionare le impostazioni del corpo nella struttura di navigazione accessibile dalla palette a sinistra.
Impostare lo stesso colore di sfondo per tutti i componenti della struttura selezionando Viewport background color. Questa opzione consente di selezionare un’impostazione diversa dal colore di sfondo.
Imposta un colore di sfondo diverso per ciascun componente della struttura. Selezionare una struttura nell'albero di navigazione accessibile dalla tavolozza a sinistra per applicare un colore di sfondo specifico solo a tale struttura.

Assicurati di non impostare un colore di sfondo del riquadro di visualizzazione, in quanto questo potrebbe nascondere i colori di sfondo della struttura.
Imposta un Background image per il contenuto di un componente struttura.

NOTA

Alcuni programmi e-mail non supportano le immagini di sfondo. Se non è supportato, verrà utilizzato il colore di sfondo della riga. Assicurati di selezionare un colore di sfondo di fallback appropriato nel caso in cui l’immagine non possa essere visualizzata.
Imposta un colore di sfondo a livello di colonna.

NOTA

Questo è il caso d’uso più comune. Adobe consiglia di impostare i colori di sfondo a livello di colonna, in quanto ciò consente una maggiore flessibilità nella modifica dell’intero contenuto dell’e-mail.

Puoi anche impostare un’immagine di sfondo a livello di colonna, ma questa viene utilizzata raramente.

Esempio: regolazione dell’allineamento verticale e della spaziatura

Desideri regolare la spaziatura interna e l’allineamento verticale all’interno di un componente struttura composto da tre colonne. A tale scopo, segui la procedura indicata di seguito:

Seleziona il componente struttura direttamente nel messaggio e-mail o utilizzando la struttura ad albero disponibile a sinistra Palette.
Dalla sezione barra degli strumenti contestuale, fai clic su Select a column e scegli quello che desideri modificare. Puoi anche selezionarla dall’albero della struttura.

I parametri modificabili per tale colonna vengono visualizzati nel Settings a destra.
Sotto Vertical alignment, seleziona Up.

Il componente contenuto viene visualizzato sopra la colonna.
Sotto Padding, definisci la spaziatura interna superiore nella colonna. Fai clic sull’icona del lucchetto per interrompere la sincronizzazione con la spaziatura inferiore.

Definisci la spaziatura sinistra e destra per quella colonna.
Procedi in modo simile per regolare l’allineamento e la spaziatura delle altre colonne.
Salva le modifiche.

Collegamenti di stile

In E-mail Designer è possibile sottolineare un collegamento e selezionarne il colore e la destinazione.

In un componente in cui viene inserito un collegamento, seleziona il testo dell’etichetta del collegamento.
Nelle impostazioni del componente, seleziona Underline link per sottolineare il testo dell'etichetta del collegamento.
Per selezionare il contesto di navigazione in cui verrà aperto il collegamento, seleziona una Target.
Per cambiare il colore del collegamento, fai clic su Link color.
Scegliete il colore desiderato.
Salva le modifiche.

Aggiunta di attributi di stile in linea

Nell’interfaccia di E-mail Designer, quando selezioni un elemento e ne visualizzi le impostazioni nel pannello laterale, puoi personalizzare gli attributi in linea e il loro valore per quell’elemento specifico.

Seleziona un elemento nel contenuto.
Nel pannello laterale, cerca Styles Inline impostazioni.
Modificare i valori degli attributi esistenti o aggiungerne di nuovi utilizzando + pulsante. Puoi aggiungere qualsiasi attributo e valore conforme a CSS.

Lo stile viene quindi applicato all’elemento selezionato. Se per gli elementi secondari non sono definiti attributi di stile specifici, viene ereditato lo stile dell’elemento principale.