Gestione degli stili delle e-mail

In E-mail Designer, quando selezioni un elemento, nel riquadro Settings sono 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

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

• fai clic direttamente nell’e-mail,
• oppure sfogliare la struttura ad albero disponibile dalle opzioni disponibili nella sezione sinistra Palette.

La navigazione nella struttura ad albero consente di effettuare una selezione più accurata. Puoi selezionare una delle seguenti opzioni:

• l'intera componente della 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, puoi anche effettuare le seguenti operazioni:

1. Seleziona un componente struttura (direttamente nel messaggio e-mail o utilizzando la struttura ad albero disponibile dalla Palette a sinistra).
2. Dalla 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

1. Seleziona un elemento nel messaggio e-mail. Per ulteriori informazioni, consulta Selezione di un elemento.

2. Regola le impostazioni in base alle tue esigenze. Ogni elemento selezionato offre un set di impostazioni diverso.

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

   A questo scopo, utilizza le opzioni visualizzate nel riquadro Settings o aggiungi attributi di stile in linea.

   

3. Salva il contenuto.

Regolazione della spaziatura e del margine

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

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

Ad esempio:

• Utilizza la spaziatura per impostare i margini a sinistra e a destra di un’immagine.
• Utilizza la spaziatura superiore e inferiore per aggiungere più spaziatura a un componente Text o a un componente Divider.
• Per impostare i bordi tra le colonne all’interno di un elemento struttura, definire la spaziatura per ciascuna colonna.

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

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

Allineamento dello stile

• 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, al momento non ai Divider e Social componenti.

  

• Per impostare l' allineamento verticale, seleziona una colonna all'interno di un componente struttura e scegli un'opzione dal riquadro Impostazioni.

  

Impostazione degli sfondi

Quando si tratta di impostare gli sfondi con E-mail Designer, l’Adobe consiglia quanto segue:

1. Se richiesto dalla progettazione, applica un colore di sfondo al corpo dell’e-mail.
2. Nella maggior parte dei casi, imposta i colori di sfondo a livello di colonna.
3. Prova a non utilizzare i colori di sfondo su componenti immagine o testo in quanto sono difficili da gestire.

Di seguito sono riportate le impostazioni di sfondo disponibili che è possibile utilizzare.

• 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.

  

• Imposta lo stesso colore di sfondo per tutti i componenti struttura selezionando Viewport background color. Questa opzione consente di selezionare un’impostazione diversa dal colore di sfondo.

  

• Impostare un colore di sfondo diverso per ciascun componente struttura. Selezionare una struttura nell'albero di navigazione accessibile dalla palette 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 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 in background. 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

È necessario regolare la spaziatura e l’allineamento verticale all’interno di un componente struttura composto da tre colonne. Per farlo, segui la procedura indicata di seguito:

1. Seleziona il componente struttura direttamente nel messaggio e-mail o utilizza la struttura ad albero disponibile dalla Palette a sinistra.

2. Dalla barra degli strumenti contestuale, fai clic su Select a column e scegli quello da modificare. È inoltre possibile selezionarlo dalla struttura ad albero.

   

   I parametri modificabili di quella colonna vengono visualizzati nel riquadro Settings a destra.

3. In Vertical alignment, selezionare Up.

   

   Il componente contenuto viene visualizzato sopra la colonna .

4. Alla voce Padding, definisci la spaziatura superiore all’interno della colonna. Fai clic sull’icona Blocca per interrompere la sincronizzazione con la spaziatura inferiore.

   Definisci la spaziatura sinistra e destra per la colonna.

   

5. Procedi in modo simile per regolare l’allineamento e la spaziatura delle altre colonne.

   

6. Salva le modifiche.

Collegamenti di stile

È possibile sottolineare un collegamento e selezionarne il colore e la destinazione in E-mail Designer.

1. In un componente in cui viene inserito un collegamento, seleziona il testo dell’etichetta del collegamento.

2. Nelle impostazioni del componente, seleziona Underline link per sottolineare il testo dell’etichetta del collegamento.

   

3. Per selezionare il contesto di navigazione in cui verrà aperto il collegamento, seleziona un Target.

   

4. Per modificare il colore del collegamento, fai clic su Link color.

   

5. Scegli il colore di cui hai bisogno.

   

6. 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 relativo valore per quell’elemento specifico.

1. Seleziona un elemento nel contenuto.

2. Nel pannello laterale, cerca le impostazioni Styles Inline .

   

3. Modifica i valori degli attributi esistenti o aggiungi nuovi attributi 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 padre.