Il nuovo approccio alla creazione di contenuti email senza necessità di conoscenze HTML, e con la possibilità di creare da soli il proprio template, si chiama Email Designer. Un editor moderno, efficace, che rispetta le regole del design responsive, aggiunto di recente agli strumenti disponibili nella piattaforma Contactlab.

In questo tutorial vedremo come creare contenuti velocemente e con semplicità usando gli strumenti drag & drop per definire la struttura, e poi in modo semplice e eintuitivo inserire testi, immagini e tutto ciò che occorre, compresi elementi dinamici personalizzati per ciascun destinatario.

Come funziona Email Designer?

Prendiamo per esempio una welcome email che dà il benvenuto ai nuovi clienti del vostro sito e-commerce site e che li ringrazia per il loro primo acquisto. Anche se nella raccolta di template predefiniti di Email Designer è già presente un modello adatto, vorresti provare a realizzare qualcosa di diverso. Ecco come fare:

1. Accedi a Send, clicca Crea > Spedizione email, individua il corretto gruppo email da cui spedire e clicca Crea spedizione accanto ad esso. Appare la pagina di selezione della procedura.
2. Clicca Crea una nuova spedizione, compila i Parametri di spedizione indicati, assicurandoti che la voce Consenti testo dinamico sia selezionata. Poi clicca su Avanti.
3. Allo step Contenuto del messaggio, inserisci i dati del Mittente e l’oggetto, poi clicca sul link Email Designer, sotto il riquadro della Versione HTML.
   Si aprirà la pagina di Gestione template di Email Designer in una finestra modale in sovraimpressione.
4. Clicca sul pulsante Comincia da zero per entrare nella pagina di Modifica contenuto.

Un esempio della pagina di Modifica contenuto

Nota:
Per una descrizione completa di tutti i comandi e i passaggi menzionati nell’esempio seguente – e di tutte le altre possibilità disponibili – consigliamo di leggere la pagina Creare, modificare e gestire contenuti o template con Email Designer nella guida di Send.

5. Per prima cosa, devi definire le impostazioni di base della struttura del messaggio:
   1. Clicca sulla scheda Impostazioni nella Barra laterale e imposta la larghezza del contenuto a 600 pixel.
   2. Se desideri utilizzare un particolare tipo di carattere, selezionalo come Carattere di default.
   3. Oppure, puoi lasciare le impostazioni predefinite.
6. Ora clicca sulla scheda Moduli per definire la disposizione delle colonne della tua email.
   Il layout predefinito include una riga contenente una sola colonna, già presente nell’area di Modifica, la parte sinistra della pagina. Puoi usarla, ad esempio, per posizionarci il logo della tua azienda o una testata con un’immagine. Per aggiungere altre combinazioni di colonne:
   1. Dalla scheda Moduli, trascina la tessera con il layout desiderato (poniamo, due colonne della stessa grandezza)  sull’area di modifica e rilasciala nel punto desiderato. Per esempio, posizionaliamolo sotto il blocco iniziale già presente.
      Rilasciando l’elemento, la larghezza viene automaticamente adatta a quella dell’area del contenuto che hai impostato prima (vedi punto 5).
   2. Continua ad aggiungere righe e colonne per creare il layout che desideri. Nel nostro esempio, completiamo la struttura aggiungendo alla precedente un’altra riga con una sola colonna, a tutta larghezza.
      Nota:
      In genere è consigliabile mantenere un layout semplice, per non rischiare di creare un insieme troppo complicato che potrebbe confondere il destinatario.
7. A questo punto fai clic sulla scheda Contenuto e scegli il tipo di contenuto con cui riempire la struttura appena creata. Ad esempio:
   1. Nella riga in cima, la testata, trascina e rilascia la tessera Immagine e subito sotto inserisci invece due contenuti di tipo Testo.
      Nota:
      Quando usi un layout con una singola colonna, se inserisci più contenuti nello stesso spazio, essi verranno allineati verticalmente uno sotto l’altro. Non è possibile, in questo caso, affiancarli tra loro.
   2. Nella riga centrale, con le due colonne, trascina un’altra tessera Testo e un Bottone seguito da una Immagine.
   3. Nella riga in fondo, posiziona le icone Social e un altro campo Testo.
8. A questo punto:
   1. Passa il puntatore del mouse sopra il blocco con le due colonne per mostrare la cornice della sua Struttura, e cliccala per fa apparire i pulsanti delle azioni.
   2. Cicca il pulsante Duplica.
      Una copia esatta del blocco viene incollata subito sotto l’originale.
   3. Clicca l’immagine bel blocco duplicato e usa le frecce di posizionamento per spostarla nella colonna di sinistra.
   4. Clicca il blocco Testo nel duplicato e, allo stesso modo, spostalo nella colonna destra.

Esempio di cornice della struttura su un elemento

Una volta concluse queste operazioni, inserisci o modifica testi e immagini. Ad esempio:

9. Nella riga in cima alla pagina clicca Sfoglia sopra l’Immagine poi dal tuo gestore di file scegli e carica il tuo logo aziendale. Clicca Inserisci accanto all’icona per fa apparire il logo nella tua email. Poi:
   1. Clicca sul logo per far apparire le sue Proprietà e poterle aggiustare come desideri.
      Oltre a dimensioni e allineamento, puoi ad esempio:
   2. aggiungere un link, alla voce Azione, per collegare al logo la home del sito aziendale.
10. Clicca sul primo blocco di testo, facendo apparire la barra di formattazione, poi:
    1. Aumenta la grandezza del carattere in modo che sia adatta a un’intestazione, poi scrivi il testo: Ad esempio “Benvenuto nel nostro negozio online!”
    2. Per rendere il messaggio più personale, potresti aggiungere il nome del cliente, posizionandoti col mouse dopo la parola “negozio”, e poi cliccando i Link speciali nella barra, per poter aggiungere il relativo Campo dinamico, in questo caso il campo contenente il nome del contatto.
       Vedi la Guida si Send per maggiori dettagli.

I pulsanti nella barra di formattazione del testo

11. Nel secondo blocco di testo, scrivi un messaggio introduttivo.
12. Nella seconda riga, aggiungi un testo promozionale, magari legato agli acquisti già effettuati nel tuo ecommerce e-commerce site, con il corretto campo dinamico. Puoi ad esempio:
    1. Offrire al cliente uno sconto del 10% sul prossimo acquisto online o in negozio.
    2. Configurare il pulsante per collegarlo alla pagina da cui scaricare il buono sconto.
       Nota:
       Clicca il bottone per mostrare le sue Proprietà. Cliccando sul test del bottone lo si può facilmente cambiare.
    3. Aggiungi l’immagine di un prodotto nel blocco adiacente, poi rendila Dinamica, attraverso le sue Proprietà.
       Le immagini diverse possono essere personalizzate automaticamente a seconda del destinatario.
13. Nella terza riga, aggiungi un altro testo promozionale che inviti il cliente a sfogliare il tuo catalogo di accessori, linkando il bottone alla pagina web corretta, e un’immagine statica di alcuni degli accessori nel blocco Immagine.
14. Clicca il blocco Social e configura le icone e i link ai profili della tua azienda sulle varie piattaforme sociali.
15. Nel blocco testo che segue:
    1. Aggiungi un testo, come ad esempio ‘Per disiscriverti o cambiare le tue preferenze di ricezione, clicca qui’.
    2. Sottolinea le parole ‘clicca qui’, poi clicca il pulsante Inserisci link nella barra dell’editor di testo e aggiungi l’indirizzo della pagina di gestione della ricezione e unsubscribe.
    3. Aggiungi informazioni e indirizzo della tua azienda, o qualsiasi altra informazione utile.
16. Una volta concluso, clicca Usa in Contactsend, per importare il codice generato da Email Designer nel riquadro della Versione HTML allo step Contenuto del messaggio.
17. Continua a creare la tua spedizione in Send, come spiegato nella sezione Spedizione email della guida.

Perché aspettare, comincia subito a creare i tuoi messaggi con Email Designer e la sua interfaccia drag & drop semplice e potente.

Per maggiori dettagli su Email Designer consulta la Guida di Send o chiedi al nostro Servizio Clienti.