Gestione degli stili delle e-mail managing-styles
Nel Designer e-mail, quando si seleziona un elemento, nel riquadro Settings vengono visualizzate diverse opzioni specifiche per il tipo di contenuto selezionato. Puoi utilizzare queste opzioni per modificare facilmente lo stile dell’e-mail.
Selezione di un elemento selecting-an-element
Per selezionare un elemento nell’interfaccia 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 nella Tavolozza a sinistra.
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 nella palette a sinistra).
- Dalla barra degli strumenti contestuale, fare clic su Select a column per scegliere la colonna desiderata.
Vedi un esempio in questa sezione.
Regolazione delle impostazioni di stile adjusting-style-settings
-
Seleziona un elemento nell’e-mail. Per ulteriori informazioni, vedere 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 spaziatura interna o margine e così via.
A tale scopo, utilizzare le opzioni visualizzate nel riquadro Settings o aggiungere attributi di stile in linea.
-
Salva il contenuto.
Regolazione della spaziatura interna e del margine about-padding-and-margin
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 disponibile all'interno del bordo di un elemento.
Ad esempio:
- Utilizzare la spaziatura per impostare i margini sul lato sinistro e destro di un'immagine.
- Utilizzare la spaziatura superiore e inferiore per aggiungere ulteriore spaziatura a un componente Text o Divider.
- 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.
Per Padding e Margin, fare 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 about-alignment
-
Allineamento testo: posizionare il cursore del mouse su un testo e utilizzare la barra degli strumenti contestuale per allinearlo.
-
L'allineamento orizzontale può essere applicato a testo, immagini e pulsanti, attualmente non ai componenti Divider e Social.
-
Per impostare l'allineamento verticale, selezionare una colonna all'interno di un componente struttura e scegliere un'opzione nel riquadro Impostazioni.
Impostazione degli sfondi about-backgrounds
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 Background color per l'intero messaggio 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 Background image per il contenuto di un componente struttura.
note note NOTE 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.
note note NOTE 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 example--adjusting-vertical-alignment-and-padding
Desideri regolare la spaziatura interna e l’allineamento verticale all’interno di un componente struttura composto da tre colonne. A questo scopo, segui la procedura indicata di seguito:
-
Seleziona il componente struttura direttamente nel messaggio e-mail o utilizzando la struttura ad albero disponibile nella palette a sinistra.
-
Dalla barra degli strumenti contestuale, fare clic su Select a column e scegliere quello che si desidera modificare. Puoi anche selezionarla dall’albero della struttura.
I parametri modificabili per tale colonna vengono visualizzati nel riquadro Settings a destra.
-
In Vertical alignment, selezionare Up.
Il componente contenuto viene visualizzato sopra la colonna.
-
In 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 about-styling-links
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, selezionare Underline link per sottolineare il testo dell'etichetta del collegamento.
-
Per selezionare il contesto di esplorazione in cui verrà aperto il collegamento, selezionare Target.
-
Per cambiare il colore del collegamento, fare clic su Link color.
-
Scegliete il colore desiderato.
-
Salva le modifiche.
Aggiunta di attributi di stile in linea adding-inline-styling-attributes
Nell’interfaccia di E-mail Designer, quando selezioni un elemento e visualizzane 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 le impostazioni Styles Inline.
-
Modificare i valori degli attributi esistenti o aggiungerne di nuovi utilizzando il 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.