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:

  1. Seleziona un componente struttura (direttamente nell'e-mail o utilizzando la struttura ad albero disponibile nella palette a sinistra).
  2. 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

  1. Seleziona un elemento nell’e-mail. Per ulteriori informazioni, vedere Selezione di un elemento.

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

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

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

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:

  1. Se richiesto dal tuo design, applica un colore di sfondo al corpo dell’e-mail.
  2. Nella maggior parte dei casi, impostare i colori di sfondo a livello di colonna.
  3. 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:

  1. Seleziona il componente struttura direttamente nel messaggio e-mail o utilizzando la struttura ad albero disponibile nella palette a sinistra.

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

  3. In Vertical alignment, selezionare Up.

    Il componente contenuto viene visualizzato sopra la colonna.

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

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

  6. Salva le modifiche.

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

  1. In un componente in cui viene 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 esplorazione in cui verrà aperto il collegamento, selezionare Target.

  4. Per cambiare 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 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.

  1. Seleziona un elemento nel contenuto.

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

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

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff