Progettazione del contenuto delle e-mail nell’interfaccia utente

Una volta che creato il messaggio, puoi iniziare a creare il contenuto dell’e-mail.

  1. Dal messaggio appena creato, seleziona Email designer in Body sezione .

  2. Nella home page di E-mail Designer, scegli come desideri progettare l’e-mail tra le seguenti opzioni:

    • Seleziona Design from scratch per utilizzare le funzionalità di e-mail designer per creare il contenuto delle e-mail. Ulteriori informazioni

    • Seleziona Start from template per creare il messaggio e-mail da un elenco di modelli incorporato. Non è possibile creare altri modelli.

    • Seleziona Code your own per immettere o incollare codice non elaborato di HTML. Ulteriori informazioni.

    • Seleziona Import HTML per importare un file HTML o una cartella .zip. Ulteriori informazioni.

Progettazione da zero

E-mail Designer consente di definire facilmente la struttura delle e-mail. Aggiungendo e spostando elementi strutturali con semplici azioni di trascinamento, puoi progettare la forma del messaggio e-mail in pochi secondi.

Per iniziare a creare il contenuto delle e-mail con e-mail designer, segui i passaggi seguenti:

  1. Dopo aver selezionato la Design from scratch inizia a progettare il contenuto delle e-mail trascinandolo e rilasciandolo Structure components per definire il layout del messaggio e-mail.

    NOTA

    Tieni presente che una pila di colonne non è compatibile con tutti i programmi e-mail. Se non è supportato, le colonne non verranno sovrapposte.

    Una volta inseriti nell’e-mail, non puoi spostare né rimuovere i componenti a meno che non sia già presente un componente di contenuto o un frammento all’interno.

  2. Aggiungi tutti Structure components se necessario.

    Seleziona la n:n column per definire il numero di colonne desiderato (tra 3 e 10). È inoltre possibile definire la larghezza di ogni colonna spostando le frecce nella parte inferiore di ciascuna colonna.

    NOTA

    Le dimensioni di ogni colonna non possono essere inferiori al 10% della larghezza totale del componente struttura. Non è possibile rimuovere una colonna non vuota.

  3. Da Content components a discesa, puoi aggiungere altrettanti Content components come necessario nel componente struttura. Ulteriori informazioni sui componenti di contenuto.

  4. Ogni componente può essere ulteriormente personalizzato con il Component settings sezione . Ad esempio, puoi modificare lo stile del testo, la spaziatura o il margine del componente. Ulteriori informazioni su allineamento e spaziatura.

  5. Da Assets picker, puoi aggiungere direttamente le risorse memorizzate in Assets library alla tua e-mail. Ulteriori informazioni sulla gestione delle risorse.

    Fai doppio clic sulla cartella contenente le risorse e trascina e rilascia la risorsa da aggiungere all’e-mail.

  6. Aggiungi campi di personalizzazione per personalizzare il contenuto dai dati dei profili. Ulteriori informazioni sulla personalizzazione dei contenuti.

  7. In Links nel riquadro a sinistra, controlla l’elenco di tutti gli URL del contenuto che verranno tracciati. È possibile modificare le Tracking Type, Label e Tags se necessario.

    NOTA

    Ulteriori informazioni sui collegamenti e il tracciamento dei messaggi in questa pagina.

  8. Se necessario, puoi passare all’editor di codice per personalizzare ulteriormente l’e-mail facendo clic su Switch to code editor dal menu avanzato. Per ulteriori informazioni sull'editor di codice, consulta questo page.

    NOTA

    Dopo il passaggio all’editor di codice, non potrai utilizzare la finestra di progettazione visiva per questa e-mail.

  9. Fai clic su Show preview per controllare il rendering delle e-mail. È possibile scegliere la visualizzazione desktop o mobile.

    Per ulteriori informazioni su come visualizzare l’anteprima del messaggio e-mail, consulta Anteprima e verifica dei messaggi.

  10. Quando l’e-mail è pronta, fai clic su Save & Close.

Il contenuto dell’e-mail può ora essere utilizzato in un messaggio. Scopri come inviare un messaggio.

Creare la versione testuale di un messaggio e-mail

Si consiglia di creare una versione testuale del corpo dell’e-mail, che viene utilizzata quando non è possibile visualizzare il contenuto di HTML.

Per impostazione predefinita, E-mail Designer crea un Plain text versione del messaggio e-mail, compresi i campi di personalizzazione. Questa versione viene generata automaticamente e sincronizzata con la versione HTML del contenuto.

Se preferisci utilizzare un contenuto diverso per la versione di testo normale, segui la procedura seguente:

  1. Dal messaggio e-mail, seleziona la Plain text scheda .

  2. Utilizza la Sync with HTML per disabilitare la sincronizzazione.

  3. Fai clic sul segno di spunta per confermare la scelta.

  4. Puoi quindi modificare la versione di testo normale come desiderato.

ATTENZIONE
  • Modifiche apportate Plain text la visualizzazione non viene riflessa nella visualizzazione HTML.

  • Se riattivi il Sync with HTML dopo aver aggiornato il contenuto di testo normale, le modifiche andranno perse e verranno sostituite con il contenuto di testo generato dalla versione di HTML.

Utilizzare una preintestazione

Una preintestazione è un breve testo di riepilogo che segue l’oggetto quando visualizzi un’e-mail dal client e-mail. La preintestazione può aiutarti a tenere traccia e personalizzare meglio le e-mail.

  1. Dalla finestra di progettazione e-mail, aggiungi un Structure components per iniziare a progettare l’e-mail.

  2. Da Body settings riquadro a destra, fai clic su Modifica accanto al Preheader campo per aggiungere contenuto.

  3. Aggiungi la tua preintestazione. Puoi personalizzare ulteriormente facendo clic sul pulsante Add personalization icona.

  4. Da Edit Personalization è possibile aggiungere Content block, Dynamic content o Personalization fields.

  5. Fai clic su Validate per controllare la sintassi di personalizzazione.

  6. Fai clic su Save.

La preintestazione è ora configurata per l’e-mail.

Impostazioni di sfondo

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.

  • Per impostare lo stesso colore di sfondo per tutti i componenti struttura, seleziona 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.

Regolare l’allineamento verticale e la spaziatura

In questo esempio, regoleremo la spaziatura e l’allineamento verticale all’interno di un componente struttura composto da tre colonne.

  1. Seleziona il componente struttura direttamente nel messaggio e-mail o utilizza il Navigation tree disponibile nel menu a sinistra.

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

    I parametri modificabili per quella colonna vengono visualizzati nella Column settings menu.

  3. Sotto Vertical alignment, seleziona Bottom.

    Il componente contenuto si sposta nella parte inferiore della colonna.

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

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

  1. In un testo Content component dove viene inserito un collegamento, seleziona il collegamento.

  2. In Component settings menu, controllo Underline link per sottolineare il testo dell’etichetta del collegamento.

  3. Scegli in che modo il pubblico verrà reindirizzato con il Target a discesa:

    • None: apre il collegamento nello stesso frame in cui è stato fatto clic (impostazione predefinita).
    • Blank: apre il collegamento in una nuova finestra o scheda.
    • Self: apre il collegamento nello stesso frame in cui è stato fatto clic.
    • Parent: apre il collegamento nel frame principale.
    • Top: apre il collegamento nel corpo completo della finestra.

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

  5. Scegli il colore di cui hai bisogno.

  6. Salva le modifiche.

Aggiungi 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 il Styles Inline impostazioni.

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

In questa pagina