Gestione degli stili e-mail

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

Selezione di un elemento

Per selezionare un elemento nell'interfaccia di Designer e-mail, è possibile:

• fai clic direttamente nell’e-mail,
• oppure sfogliare la struttura ad albero disponibile dalle opzioni che si trovano a sinistra Palette.

L’esplorazione della struttura ad albero consente di effettuare una selezione più accurata. Potete selezionare una delle seguenti opzioni:

• l’intero 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, potete anche effettuare le seguenti operazioni:

1. Selezionare un componente struttura (direttamente nell'e-mail o utilizzando la struttura ad albero disponibile dalla Palette sinistra).
2. Dalla barra degli strumenti contestuale, fare clic su Select a column per scegliere la colonna desiderata.

Vedere un esempio in questa sezione.

Regolazione delle impostazioni di stile

1. Selezionate un elemento nel messaggio e-mail. Per ulteriori informazioni, vedere Selezione di un elemento.

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

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

   A tal fine, utilizzare le opzioni visualizzate nel riquadro Settings o aggiungere attributi di stile in linea.

   

3. Salvate il contenuto.

Regolazione della spaziatura e del margine

L'interfaccia di Designer e-mail 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:

• Usate la spaziatura per impostare i margini a sinistra e a destra di un’immagine.
• Utilizzare la spaziatura superiore e inferiore per aggiungere più spaziatura a un componente Text o 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.

Sia per Padding che per Margin, fate clic sull'icona Blocca per interrompere la sincronizzazione tra i parametri superiore e inferiore o destra e sinistra. Questo consente di regolare ciascun parametro separatamente.

Allineamento dello stile

• Allineamento del 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 a Divider e Social componenti.

  

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

  

Impostazione degli sfondi

Per impostare gli sfondi con Designer e-mail, Adobe consiglia quanto segue:

1. Se necessario, applicate un colore di sfondo al corpo del messaggio e-mail.
2. Nella maggior parte dei casi, impostate i colori di sfondo a livello di colonna.
3. Cercate di non utilizzare i colori di sfondo sui componenti immagine o testo, in quanto sono difficili da gestire.

Di seguito sono riportate le impostazioni di sfondo disponibili che potete usare.

• Impostate Background color per l'intero messaggio e-mail. Accertarsi di selezionare le impostazioni del corpo nella struttura di navigazione accessibile dalla palette a sinistra.

  

• Per impostare lo stesso colore di sfondo per tutti i componenti struttura, selezionare 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 nella struttura ad albero di navigazione accessibile dalla palette a sinistra per applicare un colore di sfondo specifico solo a tale struttura.

  

  Accertatevi di non impostare un colore di sfondo della finestra in quanto potrebbe nascondere i colori di sfondo della struttura.

• Impostare un elemento 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. Accertatevi di selezionare un colore di sfondo di fallback appropriato nel caso in cui l'immagine non possa essere visualizzata.

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

  Potete anche impostare un'immagine di sfondo a livello di colonna, ma questa impostazione 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. Selezionare il componente struttura direttamente nel messaggio e-mail o utilizzare la struttura ad albero disponibile dalla Palette sinistra.

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

   

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

3. In Vertical alignment, selezionare Up.

   

   Il componente di contenuto viene visualizzato sopra la colonna.

4. In Padding, definite la spaziatura superiore all'interno della colonna. Fate clic sull’icona Blocca per interrompere la sincronizzazione con la spaziatura inferiore.

   Definite la spaziatura sinistra e destra per la colonna.

   

5. Procedere in modo simile per regolare l'allineamento e la spaziatura delle altre colonne.

   

6. Salva le modifiche.

Collegamenti stile

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

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

2. Nelle impostazioni del componente, selezionare 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, fare clic su Link color.

   

5. Scegliete il colore desiderato.

   

6. Salva le modifiche.

Aggiunta di attributi di stile in linea

Nell'interfaccia di Designer e-mail, quando si seleziona un elemento e ne vengono visualizzate le impostazioni nel pannello laterale, è possibile personalizzare gli attributi in linea e il relativo valore per tale elemento specifico.

1. Selezionate un elemento nel contenuto.

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

   

3. Modificare i valori degli attributi esistenti o aggiungerne di nuovi utilizzando il pulsante +. Potete aggiungere qualsiasi attributo e valore conforme con CSS.

Lo stile viene quindi applicato all'elemento selezionato. Se gli elementi secondari non dispongono di attributi di stile specifici definiti, lo stile dell'elemento padre viene ereditato.