Creare, modificare e gestire contenuti o template con Email Designer

Panoramica

Per creare un contenuto email o un template, o modificare un messaggio esistente con Email Designer, devi copiere una o più azioni tra quelle indicate di seguito, dalla pagina Modifica contenuto:

  1. Definire le Impostazioni di base, come larghezza massima del contenuto, tipi di carattere e così via, dalla scheda Impostazioni.
  2. Creare la struttura di righe e colonne, dalla scheda Moduli, il pannello di Modifica e le Proprietà riga o Proprietà colonna.
  3. Aggiungere tipi di contenuto a propria scelta alle colonne, dalla scheda Contenuto nel pannello di Modifica e le Proprietà contenuto.
  4. Aggiungere il contenuto, dal pannello di Modifica e le Proprietà contenuto

Vedere la documentazione L’interfaccia di Email designer per maggiori informazioni sulle pagina Modifica contenuto , il pannello di Modifica, la Barra laterale e le varie schede.

Di seguito, alcuni casi d’uso frequenti, con le relative azioni da compiere:

  • Creare un contenuto email partendo da zero.
    Normalmente è necessario compiere tutte e quattro le azioni previste, nell’ordine indicato.
    Unica eccezione, se si necessità di un layout molto semplice. In questo caso, si può utilizzare la pagina vuota che Email Designer apre di default, e semplicemente iniziare ad aggiungere contenuti(3) o digitare testo  (4).
  • Creare un nuovo template.
    E’ necessario compiere le azioni dalla 1 alla 3, in caso non occorra invece inserire immagini (4).
  • Modificare un template esistente.
    Normalmente è necessario compiere le azioni 2 e 3, ma in altri casi si può voler modificare la struttura (1) o aggiungere immagini (4).
  • Creare un contenuto email partendo da un template.
    Spesso, occorrerà solo aprire un template esistente e modificare o aggiungere del contenuto (4). Ma si potrebbe voler aggiungere tipi di contenuto differenti (3).
  • Modificare un contenuto email esistente.
    Una volta riaperto un messaggio, solitamente è necessario compiere l’azione (4). In alcuni casi però si potrebbe voler aggiungere tipi di contenuto differente (3), e  fare modifiche al contenuto o alla struttura (1-2).

Nota:
Abbiamo usato come esempio la creazione a partire da una pagina vuota, perché richiede tutte e quattro le azioni.

Una volta creato o modificato il contenuto email, potete usarlo immediatamente in Contactsend – se avete aperto Email Designer dal wizard di creazione della spedizione – o salvarlo come template per un uso futuro.

Aprire Email Designer

  1. Per aprire l’interfaccia di Email Designer potete:
    1. Cliccare Crea  > Email Designer dal menù superiore.
      oppure:
    2. Andare nella sezione Crea > Spedizione email e poi allo step Contenuto del messaggio.
    3. Cliccare, dallo step Contenuto del messaggio, il link Email Designer, posizionato sotto il riquadro Versione HTML.
      La pagina Gestione template appare in sovraimpressione.

Esempio dell’interfaccia di Email Designer

  1. Segui le istruzioni qui sotto, a seconda dell’obiettivo da raggiungere.

Gestire i template

I template esistenti vengono mostrati nella pagina Gestione template. Sono organizzati nelle seguenti raccolte:

I template in My library

Qui, i template possono essere:

  • Visti in anteprima.
  • Duplicati.
  • Eliminati.
  • Rinominati.
  • Modificati e salvati (con lo stesso nome o con un nome nuovo).

Per rinominare, duplicare, vedere in anteprima un template creato da un utente, fare come indicato di seguito:

  1. Cliccare l’icona in alto a destra rispetto alla miniatura del template.
    Appare un menù a tendina.
  2. Selezionare l’azione corretta.

Template predefiniti e personalizzati

I template di queste tipologie non possono essere rinominati o eliminati direttamente. Possono essere modificati o duplicati, ma devono essere salvati con un nome differente e appariranno nella raccolta della scheda My library.

Casi d’uso comuni

Creare un contenuto email da una pagina vuota

Per creare un contenuto email senza partire da un template, fare come indicato di seguito:

  1. Sulla pagina Gestione template clicca Inizia da zero.
    Ci si trova ora nella pagina Modifica contenuto con:

    • Un blocco con una singola riga e una singola colonna, con Larghezza di 500 px, all’interno del pannello di Modifica.
      Nota:
      Se devi fare modifiche con formattazione molto semplice, trascina e rilascia qui le tessere relative al tipo di contenuto desiderato, poi modificale aggiungendo il relativo contenuto. Ad esempio, aggiungi un blocco Testo seguito da un’Immagine e un Bottone linkato.
      Il resto di questo esempio presuppone invece la creazione di un layout più complesso.
    • Le schede di controllo della formattazione nella Barra laterale.
      Vedere L’interfaccia di Email Designer per maggiori informazioni su quelle schede.
  2. Completare le azioni indicate spostandosi nelle relative aree:
    1. Definire le impostazioni di base.
    2. Creare la struttura di righe e colonne.
    3. Aggiungere diversi tipi di contenuto.
    4. Aggiungere il contenuto stesso.
  3. Per visualizzare un’anteprima del contenuto email su cui si sta lavorando, cliccare Azioni e poi Anteprima.
    Si può scegliere l’anteprima su Desktop o Mobile.
  4. Quando si è concluso, procedere come segue:
    1. se si desidera salvare il lavoro come template per un successivo utilizzo:
      1. Cliccare Azioni e poi Salva come template.
      2. Nella finestra successiva, dare un nome al template.
        Il template viene salvato in My library.
        Oppure:
    2. Cliccare Usa in Contactsend, e poi l’icona X per chiudere Email Designer.
      Il contenuto, in formato HTML viene inserito nel relativo riquadro allo steo Contenuto del messaggio del wizard di creazione spedizione.
  5. Continuare con il processo di creazione nella UI di Contactsend.

Creare un nuovo template

Per creare un nuovo template senza modificarne uno esistente:

  1. Dalla pagina Gestione template, cliccare Inizia da zero.
    Appare la pagina Modifica contenuto con:

    • Una pagina vuota, un blocco con una singola riga e una singola colonna, con Larghezza di 500 px, all’interno del pannello di Modifica.
      Nota:
      Se devi fare modifiche con formattazione molto semplice, trascina e rilascia qui le tessere relative al tipo di contenuto desiderato, poi modificale aggiungendo il relativo contenuto. Ad esempio, aggiungi un blocco Testo seguito da un’Immagine e un Bottone linkato.
      Il resto di questo esempio presuppone invece la creazione di un layout più complesso.
    • Le schede di controllo della formattazione, nella Barra laterale.
      Vedere L’interfaccia di Email Designer per maggiori informazioni su quelle schede
  2. Completare le azioni indicate spostandosi nelle relative aree:
    1. Definire le impostazioni di base.
    2. Creare la struttura di righe e colonne
    3. Aggiungere diversi tipi di contenuto.
    4. Aggiungere il contenuto stesso.
  3. Vedere Aggiungere il contenuto per sapere come definire qualsiasi tipo di contenuto, come immagini, link a pagine web o simili.
  4. Per visualizzare un’anteprima del contenuto email su cui si sta lavorando, cliccare Azioni e poi Anteprima.
    Si può scegliere l’anteprima su Desktop o Mobile.
  5. Quando si è terminato, cliccare Azioni e poi Salva come template.
  6. Nella finestra successiva, inserire un nome per il template.
    Il template è salvato in My library.
  7. Cliccare il pulsante X per chiudere Email Designer.

Modificare un template esistente

Per modificare un template esistente:

  1. Sulla pagina Gestione template clicca il template desiderato.
    Il template mostra la pagina di Modifica contenuto.
  2. Completa i passaggi seguenti per:
    1. Creare la struttura di righe e colonne.
    2. Aggiungere differenti tipi di contenuto.
  3. Vedere Definire le impostazioni di base per modificare ad esempio la larghezza massima o i tipi di caratte, vedere Aggiungere il contenuto per sapere come cambiare o aggiungere tipi di contenuto.
  4. Per un’anteprima del template, cliccare Azioni e poi Anteprima.
    Si può scegliere la visualizzazione Desktop o Mobile.
  5. Quando si è concluso, cliccare Azioni e poi Salva come template.
  6. Nella finestra successiva, inserire un nome per il template.
    Il template è salvato in My library anche se l’originale si trovava nelle raccolte Predefiniti o Personalizzati.
    Nota:
    Un template modificato può essere salvato con lo stesso nome, se in origine si trovava nella scheda My library.
  7. Cliccare il pulsante X per chiudere Email Designer.

Creare un contenuto email da un template

Per creare un contenuto email partendo da un template:

  1. Sulla pagina Gestione template, cliccare sul template desiderato.
    Si viene portati nella pagina di Modifica contenuto.
  2. Completare i passaggi descritti di seguito per creare il contenuto email desiderato, usando il template come base:
    1. Aggiungere il contenuto.
    2. Vedi Aggiungere diversi tipi di contenuto per aggiungere altre tipologie di contenuto che non fossero incluse nel template, come immagini, link social o simili.
  3. Per un’anteprima del template, cliccare Azioni e poi Anteprima.
    Si può scegliere la visualizzazione Desktop o Mobile
  4. Quandi si è concluso, scegliere una delle azioni seguenti:
    1. Per salvare il lavoro come template per un futuro utilizzo:
      1. Clicca Azioni e poi Salva come template.
      2. Nella finestra seguente, da un nome al template.
        Il template è salvato in My library.
        Nota:
        Assicurati di dare al template un nuovo nome, se tieni lo stesso l’originale verrà sovrascritto.
        Oppure:
    2. Cliccare Usa in Contactsend, e poi il pulsante X per chiudere Email Designer.
      Il contenuto in formato HTML viene importato nel relativo riquadro allo step Contenuto del messaggio del wizard di creazione spedizione.
  5. Continuare a creare la spedizione nell’interfaccia di Contactsend.

Nota:
Puoi creare contenuti email semplicemente aprendo il template desiderato dal wizard di creazione spedizione e cliccando Usa in Contactsend. Se non vuoi modificarlo successivamente con Email Designer, puoi continuare le modifiche nel riquadro HTML o dall’editor visuale presente sotto il riquadro.

Modificare contenuti email esistenti

Se hai creato un contenuto email e cliccato Usa in Contactsend, o se hai abbandonato la sessione in Contactsend prima di aver completato tutto, puoi modificare il contenuto in Email Designer seguendo i passaggi indicati qui sotto:

  1. Sulla pagina Gestione template, clicca Torna alla sessione di lavoro.
    Il contenuto appare all’interno della pagina Modifica contenuto.
  2. A seconda delle modifiche che vuoi fare, completa gli step indicati:
    1. Definire le impostazioni di base.
    2. Creare la struttura di righe e colonne.
    3. Aggiungere differenti tipi di contenuto.
    4. Aggiungere il contenuto stesso.
  3. Per un’anteprima del template, cliccare Azioni e poi Anteprima.
    Si può scegliere la visualizzazione Desktop o Mobile
  4. Quando si è concluso, cliccare Usa in Contactsend, e poi il pulsante X per chiudere Email Designer.
    Il contenuto in formato HTML viene importato nel relativo riquadro allo step Contenuto del messaggio del wizard di creazione spedizione.
  5. Continuare a creare la spedizione nell’interfaccia di Contactsend.

Nota:
Se si salva il contenuto per usarlo in Contactsend, e poi si modifica manualmente il codice HTML in Contactsend, non si potrà riaprirlo per continuare a lavorarci in Email Designer, o le modifiche fatte da codice o da altro editor saranno perse.

Attività di base

Definire le impostazioni di base

  1. Cliccare la scheda Impostazioni e seguire le istruzioni riportate di seguito:
    1. Sotto Dimensione contenuto, definire la larghezza che il messaggio dovrà occupare su dispositivi a scherma ampio e risoluzione alta, come ad esempio un pc portatile.
      Su piccoli dispositivi come un telefono, questa impostazione verrà automaticamente ignorata.
      Di default è impostata a 500 px. Il massimo disponibile è 900 px.
    2. Sotto Colore dello sfondo, cliccare a destra il campo che mostra la finestra di selezione colore, e scegliere il colore desiderato per lo sfondo del messaggio.
      Vedere L’interfaccia di Email Designer > Scheda Impostazioni per maggiori informazioni sulla selezione del colore.
      I colori vengono espressi in codici esadecimali. Il default è Bianco (#FFFFFF).
      Il Colore dello sfondo può essere sovrascritto a livello di riga, colonna, e singolo blocco.
    3. Sotto Sfondo di sfondo del contenuto, ripetere le istruzioni presenti qui sopra (1b) per scegliere il colore desiderato.
      Nota:
      Di default lo sfondo è Trasparente. Il Colore di sfondo del contenuto può essere sovrascritto nelle Proprietà della riga, ma non dai parametri del blocco e del singolo testo.
    4. Sotto Carattere di default, selezionare il font desiderato.
      Il default è Arial. Il carattere può essere sovrascritto a livello di blocco.
    5. Sotto Colore dei link, usare la selezione del colore come descritto sopra (1b) per scegliere il colore dei link.
      Si può sovrascrivere a livello di singolo elemento.

Creare la struttura di righe e colonne

  1. Clicare la scheda Moduli e seguire le istruzioni:
    1. Individuare tra le tessere presenti quella con la configurazione desiderata, ad esempio due colonne di uguale grandezza.
    2. Trascinarla e rilasciarla sopra o sotto il blocco iniziale (a una riga e una colonna) inel pannello di Modifica, creando così una nuova riga.
    3. Passando il cursore del mouse sopra il blocco, si mostra il riquadro con la sua Struttura. Cliccarlo.
      Appaiono le Proprietà riga e le Proprietà colonna.
  2. Sotto Proprietà di riga:
    1. Sotto Colore riga, cliccare il campo a destra per mostrare la finestra di selezione del colore e scegliere il colore di sfondo desiderato.
      Vedere L’interfaccia di Email Designer > scheda Impostazioni per i dettagli.
      Di default lo sfondo è Trasparente.
      Il Colore di sfondo della riga sovrascrive le relative Impostazioni, ma può essere a sua volta sovrascritto a livello di colonna o singolo blocco.
    2. Sotto Colore di sfondo del contenuto, ripetere le istruzioni in (2a) per scegliere il colore desiderato.
      Di default lo sfondo è Trasparente.
      Sovrascrive il parametro in Impostazioni.
    3. Sotto Non impilare su mobile,attivare l’opzione, se lo si desidera.
      In questo modo gli elementi non verranno messi uno sopra l’altro se visualizzati su dispositivi mobili.
      Vedere L’interfaccia di Email Designer > scheda Moduli > Proprietà riga per maggiori dettagli.
    4. Sotto Immagine di sfondo riga, si può abilitare l’uso di un’immagine come sfondo, indicandone l’URL.
      Vedere L’interfaccia di Email Designer > scheda Moduli > Proprietà riga per maggiori dettagli.
    5. Sotto Condizione, si possono aggiungere condizioni per controllare come la riga viene mostrata.
      nella nuova finestra che si apre, inserire una sintassi condizionale appropriata.
  3. Sotto Proprietà colonna:
    1. Sotto Sfondo colonna, cliccare a destra per mostrale la finestra di selezione color.
      Vedere L’interfaccia di Email Designer > Impostazioni per maggiori dettagli.
      Di default lo sfondo è Trasparente.
      Può essere sovrascritta dai parametri impostati sul singolo blocco.
    2. Sotto Padding, definire il padding per le colonne.
      Una visualizzazione grafica mostra i valori.
      Sotto le Opzioni si può invece definire un padding per ciascun lato.
    3. Sotto Bordo, definire stile, spessore e colore del bordo.
      Configurabile come il padding al punto (3b)
      Vedere L’interfaccia di Email Designer > Impostazioni per maggiori dettagli.

Nota:
Per creare una copia esatta di una riga cliccare il pulsante Duplica nel riquadro della Struttura. Vedere Email Designer interface per i dettagli.

Per eliminare la struttura iniziale a una riga e una colonna, fare come segue:

  1. Passa il cursore del mouse sopra il blocco per fa apparire il riquadro Struttura.
  2. Cliccalo e poi una il pulsante Elimina.
    Vedere L’interfaccia di Email Designer > per maggiori informazioni sulla struttura.

Aggiungere diversi tipi di contenuto

  1. Cliccare la scheda Contenuto e poi:
  2. Indfividuare la tessera con la tipologia di contenuto desiderato, ad es. Testo, e trascinarla in una colonna, nella posizione desiderata.
    Il contenuto aggiusterà automaticamente la propria larghezza in base a quella della colonna. Vedere L’interfaccia di Email Designer > scheda Contenuto per i dettagli.
  3. Passare sopra il blocco col cursore del mouse e cliccare il riquadro del Contenuto.
    Appaiono le relative proprietà
    Nota:
    Ciascun tipo di contenuto ha il suo set di proprietà. Vedere L’interfaccia di Email Designer per i dettagli.
    Le Proprietà immagine appaiono solo se almeno un’immagine è presente nel blocco.
  4. Configurare le proprietà come si desidera.
  5. Aggiungere eventualmente altri elementi, ripetere i passaggi 3 e 4 per ciascun blocco.

Aggiungere il contenuto stesso

Esempio:

  1. Per aggiungere un’immagine:
    1. Trovare il blocco Immagine e fare come segue:
      1. Trascinare la relativa immagine dal proprio computer sul blocco.
        L’immagine appare nel blocco.
        o:
      2. Cliccare Sfoglia per mostrare le cartelle del computer e scegliere l’immagine.
      3. Selezionarla e cliccare Inserisci.
        L’immagine appare nel blocco.
        Nota:
        Puoi inserire una sola immagine per blocco.
    2. Clicca sull’immagine per mostrare le sue proprietà e poterle modificare.
      Vedere L’interfaccia di Email Designer per i dettagli.
  2. Per aggiungere testo:
    1. Trova il blocco Testo.
      Appaiono le icone dell’editor di testo e le Proprietà contenuto.
    2. Inserisci o digita il testo desiderato e modifica le proprietà se necessario.
      Vedere L’interfaccia di Email Designer per i dettagli.

Comportarsi allo stesso modo per inserire contenuto di altro tipo nei relativi blocchi.