Editor Email

L'editor email consente di progettare, in modo responsive e molto visivo, il contenuto delle email che saranno inviate ai tuoi clienti dal tuo account, tramite workflow creati a tale scopo.

 

Come accedere?

Puoi accedere all'editor email attraverso due percorsi:

1. Da “Contenuto > Email”. Clicca su  Crea nuova email per creare un nuovo contenuto, oppure su Altro    e seleziona Modifica per modificare una email esistente.

Editor Email - 1-min.png

2. Dal nodo "Invia email" di un workflow, cliccando su   (Modifica configurazione nodo). Clicca su Crea nuovo contenuto oppure su   Modifica per modificare una email esistente.

Editor Email - 2-min.png

 

Interfaccia

L'editor email è composto da tre pannelli:

1. Anteprima e salvataggio: per salvare o scartare le modifiche effettuate e visualizzare l’anteprima del risultato finale dell’email che sarà inviata.

2. Design: per costruire visivamente l’email utilizzando le strutture e i componenti del pannello 3 (strumenti).

3. Strumenti: per configurare tutte le proprietà dell’email, accedere ai modelli e aggiungere variabili. Questo pannello può essere espanso o ridotto cliccando su  (Apri strumenti) o  (Chiudi strumenti).

Editor Email - 3-min.png

 

Funzionamento

L'editor email si basa sul metodo di progettazione “drag and drop” (trascina e rilascia), permettendo così di costruire le email in modo rapido, semplice e visivo.

1. Classificare l’email

Nel pannello di design (2), classifica la tua email e ritrovala rapidamente cliccando su   Inserisci etichette e aggiungendo parole chiave che ti aiutino a identificarla.

 

Le etichette sono molto utili per trovare più rapidamente i tuoi workflow e per generare report con Data Explorer. Ti consigliamo di aggiungere etichette con:
— Nome della campagna.
— Data di invio prevista.
— Pubblico target.
— Obiettivo della campagna (vendita, fidelizzazione, acquisizione…).

Ad esempio, utilizzando le etichette “Natale 2022”, “Clienti B2B” e “Acquisizione”.

Editor Email - 4-min.png

2. Modificare stile generale

Nel pannello Strumenti (3), clicca sulla scheda Generale per modificare i parametri dell’aspetto generale. Puoi anche accedervi cliccando su   Proprietà generali nel pannello di design (2).

I parametri da definire sono:

  • Nome del contenuto: nome che vuoi assegnare al contenuto per identificarlo nel tuo account Connectif.

  

Il nome del contenuto non è l’oggetto dell’email. Per configurare l’oggetto, consulta l’articolo Campagna email massiva.

  • Colori: colore di sfondo del contenuto e colore di sfondo generale.

Editor Email - 5-min.png

  • Disposizione: larghezza del contenuto in pixel e soglia responsive (fino a quale larghezza dello schermo sarà considerato un dispositivo mobile).

  • Testo: font o tipografia predefinita dei testi dell’email.

  

Puoi aggiungere nuovi font per personalizzare al massimo le tue email. Per farlo, ti consigliamo di richiedere l’aiuto di un esperto in design e layout CSS e HTML.

  • Anteprima: testo che verrà mostrato al cliente nella preview dell’email, subito dopo l’oggetto.

  • Header: titolo che avrà la scheda del browser del contatto quando clicca su “visualizza nel browser”.

  • Opzioni HTML: configurazione generale dello stile basata su CSS e HTML.

  

Si consiglia di non modificare questa sezione a meno che tu non abbia il supporto di un esperto in layout e design CSS e HTML.

Editor Email - 6-min.png

 

3. Costruire l’email a blocchi

Nel pannello Strumenti (3), clicca sulla scheda Componenti per costruire la tua composizione trascinando e rilasciando strutture o elementi nel pannello di design (2).

Struttura

Disposizione che assumerà un blocco di contenuto all’interno dell’email. Può essere su una o più colonne, con proporzioni identiche o diverse.

La struttura deve essere inserita per prima. Se non viene aggiunta, verrà utilizzata per impostazione predefinita una struttura a una colonna.

Una volta creata la struttura, posiziona il cursore sopra di essa e clicca su  (Modifica blocco) per modificarla,  (Duplica blocco) per crearne una copia oppure  (Elimina blocco) per rimuoverla.

Editor Email - 7-min.png

 

Elementi

Contenuti multimediali che puoi aggiungere alla tua email trascinandoli nel pannello di design (2). Come per la struttura, puoi modificarli posizionando il cursore sopra l’elemento e cliccando sul pulsante  (Modifica elemento) o direttamente sul contenuto. Puoi anche duplicarli cliccando su  (Duplica elemento), oppure eliminarli cliccando su  (Elimina elemento).

Gli elementi disponibili sono:

  • "Testo".
    Scrivi il tuo contenuto applicando formattazione avanzata (grassetto, corsivo, link...), inserendo variabili dinamiche o modificandone la disposizione all'interno del blocco inserito.

 

Le variabili dinamiche permettono di personalizzare il testo in base ai dati raccolti nel profilo di ciascun contatto. Per saperne di più sulle variabili e migliorare i risultati delle tue email, ti consigliamo di leggere l’articolo Variabili predefinite per personalizzare email e contenuti.

  

Il pulsante     (Converti in HTML) di questo e altri elementi trasforma il contenuto in HTML in modo irreversibile. Per utilizzare questa funzione, è necessario avere conoscenze base di HTML & CSS. Se non hai un esperto a disposizione, ti consigliamo di non utilizzarla.

  • "Immagine".
    Se l'immagine è già pubblicata su Internet, incolla l’URL dell’immagine per includerla nel contenuto. Se preferisci caricarla dal tuo dispositivo, clicca su   Carica immagine oppure sull’icona della montagna e seleziona il file nella finestra che apparirà. Una volta caricata, l’URL dell’immagine verrà completato automaticamente.
    Puoi anche scrivere il testo alternativo (che verrà mostrato se l’immagine non si carica), il titolo (tooltip mostrato al passaggio del mouse) e la disposizione nel blocco.

    Editor Email - 8-min.png

     

    Se hai bisogno di modificare l'immagine, puoi usare l’ editor di immagini.

  • "Pulsante".
    Definisci il testo che apparirà sul pulsante, l’attributo ‘title’ e il link (può essere specifico o predefinito per eseguire un’azione). Per configurarne lo stile visivo, scegli i colori del testo e dello sfondo e imposta la posizione nel blocco.
    Editor Email - 9-min.png

  • "Social".
    Seleziona i social network da includere e modifica l’URL del link, oltre alla disposizione nel blocco.
    Editor Email - 10-min.png

  • "Divisore".
    Configura colore e disposizione della linea orizzontale per separare visivamente i contenuti.
    Editor Email - 11-min.png

  • "Spazio".
    Definisci la quantità di spazio bianco da inserire tra due blocchi.
    Editor Email - 12-min.png

  • "Prodotti" (OLD).
    Inserisci un blocco prodotti da completare tramite un workflow con articoli di interesse per il contatto. Puoi scegliere uno dei tre modelli predefiniti (Prodotto base, Prodotto con marca o Prodotto con prezzo) o personalizzarne l’aspetto nell’editor di testo o in HTML. Puoi anche definire struttura di righe e colonne per desktop e mobile.

Editor Email - 13-min.png

 

  • "Prodotti" (NUOVO).
    Inserisci un blocco di prodotti che potrai completare tramite un workflow con gli articoli di interesse per il contatto. Puoi modificarlo usando un template o l’editor HTML. Se scegli il template, seleziona uno dei tre stili disponibili (Verticale, Immagine a Sinistra o Immagine a Destra) e personalizza facilmente ogni elemento per decidere quali attributi di prodotto mostrare nella scheda, il loro ordine, stile, ecc. Inoltre, puoi scegliere il numero di righe e colonne da visualizzare su desktop o mobile. Potrai sempre vedere l’anteprima del risultato finale nell’editor.
 

Per completare il blocco prodotti con gli articoli d’interesse per il contatto, è essenziale usare un nodo “Ottenere prodotti” prima del nodo “Invia Email”. Puoi saperne di più negli articoli Mostrare prodotti personalizzati nell’email del carrello abbandonato e Nodo “Ottenere prodotti”.

Nuovo elemento prodotti - 1-min.png

  • "HTML"
    Incorpora un codice HTML personalizzato e imposta la sua posizione.

  

Per inserire questo elemento, è consigliabile l’aiuto di un esperto in layout e design CSS e HTML per assicurare la corretta visualizzazione del contenuto.

Editor Email - 14-min.png

  • "Visualizza nel browser."
    Testo predefinito per inserire un link che consente di visualizzare l’email in una finestra del browser. Puoi modificarne il testo, il titolo e scegliere se aprirlo in una nuova finestra.

  

Il link è sempre “#__cn_view_in_browser” ed è preconfigurato. Puoi accedervi tramite l’opzione  Inserisci/Modifica link dell’editor.

Editor Email - 15-min.png

 

  • "Footer".
    Testo predefinito per inserire un piè di pagina nell’email, dove puoi specificare i dati della tua azienda e fornire al cliente l’opzione per annullare l’iscrizione o inoltrare l’email.

 

Il GDPR impone di offrire ai clienti l’opzione di annullare l’iscrizione in modo visibile, quindi il link “Annulla iscrizione” deve essere sempre presente nelle newsletter. Il link di cancellazione deve sempre essere “#__cn_unsubscribe”.

Editor Email - 16-min.png

 

4. Creare, modificare o eliminare un blocco globale

Salva un blocco come globale per poterlo utilizzare in tutte le tue email e modificarlo contemporaneamente in quelle in cui è stato aggiunto.

 

I blocchi globali sono molto utili, ad esempio, per creare intestazioni per le email, blocchi di prodotti visitati e altri elementi da riutilizzare frequentemente nelle tue comunicazioni.

Per farlo, una volta aggiunti gli elementi desiderati al blocco, passa il cursore su di esso e clicca sul pulsante   Crea blocco globale.

Blocchi globali + Nuovo elemento Prodotti - 2-min.png

Nella finestra pop-up, verrà mostrato il negozio in cui stai creando il blocco. Inserisci un nome e clicca su Crea blocco globale.

Blocchi globali + Nuovo elemento Prodotti - 3-min.png

Una volta creato, salva l’email e potrai riutilizzarlo nei tuoi contenuti email. Per usarlo, nella scheda Componenti dell’editor, vai su I miei blocchi globali e trova il blocco che hai creato. Trascinalo nell’editor come qualsiasi altro componente.

 

Finché non salvi l’email in cui hai creato o aggiunto un blocco globale, questo non verrà considerato come utilizzato.

Potrai modificare il blocco a livello globale, in modo che venga aggiornato in tutte le email dove è usato, cliccando sul blocco e selezionando l’opzione   Modifica globale.

  

Se desideri modificare il blocco solo per l’email attuale, clicca su Scollega e modifica per effettuare i cambiamenti.

Blocchi globali + Elemento Prodotti Nuovo - 4-min.png

Una volta modificato, fai clic su Pubblica modifiche per salvare e pubblicare automaticamente il nuovo design in tutte le email in cui viene utilizzato.

Blocchi globali + Elemento Prodotti Nuovo - 5-min.png

Per eliminare il blocco globale, nella scheda Componenti dell'editor, vai su I miei blocchi globali, individua il blocco che desideri eliminare e fai clic su   (Elimina).

Blocchi globali + Elemento Prodotti Nuovo - 7-min.png

Nella finestra popup, potrai vedere dove viene utilizzato questo blocco. Per confermare l'eliminazione, fai clic sul pulsante Elimina blocco globale.

 

Il blocco verrà scollegato da tutti i contenuti in cui viene utilizzato, ma non verrà eliminato dagli stessi. Inoltre, questa azione non può essere annullata.

Blocchi globali + Elemento Prodotti Nuovo - 8-min.png

Inoltre, potrai accedere a tutti i tuoi Blocchi Globali in qualsiasi momento senza dover accedere all'Editor Email, da "Contenuto > Blocchi globali dell'email".

Blocchi globali + Elemento Prodotti Nuovo - 9-min.png

 

5. Creare e personalizzare un blocco di prodotti

Il blocco Prodotti ti consente di inserire un elemento che potrai compilare in un workflow con prodotti personalizzati per il contatto, in base ai suoi interessi (prodotti in offerta, prodotti nel carrello, ultimi prodotti visitati, ecc.)

A tal fine, nel pannello Strumenti (3), fai clic sulla scheda Componenti e individua il blocco Prodotti (Nuovo). Selezionalo e trascinalo nel pannello di Design (2), nel punto in cui desideri posizionarlo.

Nuovo elemento prodotti - 2-min (1).png

Fai clic sull'elemento o su   (Modifica).

Nuovo elemento prodotti - 3-min (1).png

(Facoltativo) Aggiungi un Nome e seleziona uno dei tre modelli (Verticale, Immagine a sinistra o Immagine a destra).

Nuovo elemento prodotti - 4-min (1).png

 

Nel nostro esempio, è stato scelto il modello Verticale.

In Link alla pagina del prodotto, puoi indicare l'ID della variabile che porterà alla pagina del prodotto. Per impostazione predefinita, è indicato buttonURL.

 

Scopri cosa sono e come funzionano le variabili in Connectif in questo articolo.

Nuovo elemento prodotti - 9-min (1).png

Se selezioni la casella Collega tutta la scheda prodotto (attiva per impostazione predefinita), qualsiasi elemento incluso nel prodotto nell'email sarà collegato alla pagina.

Nuovo elemento prodotti - 5-min (1).png

Al contrario, se non desideri collegare tutti gli elementi, deseleziona la casella e, nel menu a discesa di ciascun elemento, personalizza nella sezione Link se vuoi che quell'elemento sia collegato (tramite l'opzione Link alla pagina del prodotto) oppure no (con l'opzione Senza link).

Nuovo elemento prodotti - 6-min (2).png

 

Nel nostro esempio, si sta attivando il collegamento alla pagina prodotto nel suo Nome.

Per modificare ciascuno degli elementi che possono comporre la scheda Prodotto, fai clic sul menu a discesa che contengono.

Personalizza facilmente ciascuno degli elementi per definirne l'aspetto finale senza doverli modificare in HTML. Ognuno di essi contiene opzioni relative al suo aspetto e contenuto, nonché l'ID della Variabile che lo contiene e che dovrai completare tramite l'assegnazione delle variabili con il nodo "Invia email".

 

Scopri passo dopo passo come mostrare prodotti personalizzati in un'email con questo caso d’uso delle variabili.

Nuovo elemento prodotti - 7-min (1).png

Se hai bisogno di aggiungere ulteriori informazioni alle schede Prodotto, fai clic sull'opzione Aggiungi variabile e, nel nuovo elemento creato (per impostazione predefinita con il nome variabile1), modifica il contenuto che desideri includere, come per gli altri elementi.

Nuovo elemento prodotti - 8-min (1).png

  

Una volta configurato il tuo blocco di Prodotti, potrai salvarlo come Blocco Globale (vedi punto 3.3) per poterlo riutilizzare in altre email con lo stesso design e obiettivo.

 

6. Applicare una condizione a un blocco

Applica una condizione ai blocchi che desideri, per mostrarli solo se il contatto soddisfa la condizione impostata. Puoi impostare una condizione basata sull'appartenenza o meno a un segmento oppure sul valore di un campo del contatto.

Per farlo, passa il cursore sopra il blocco che desideri mostrare o nascondere a seconda delle condizioni e fai clic sul pulsante Aggiungi condizione.

Editor di email (blocchi condizionali) - 1-min (1).png

Per impostare una condizione basata sul valore di un campo del contatto, scegli l'opzione Campi del contatto. Successivamente, scegli il campo, l'operatore e il valore che il campo deve contenere affinché il blocco venga mostrato al contatto.

Editor di email (blocchi condizionali) - 2-min (1).png

Per impostare una condizione basata sull'appartenenza o meno del contatto a uno o più segmenti, scegli l'opzione Segmento. In Seleziona l'operatore, scegli se deve appartenere a uno dei segmenti indicati, a tutti, se non deve appartenere a uno dei segmenti selezionati o a tutti. Infine, seleziona il o i segmenti che fungeranno da filtro condizionale.

Editor di email (blocchi condizionali) - 4-min (1).png

Fai clic su Seleziona e poi su Applica. In questo modo, Connectif mostrerà questo blocco solo ai contatti che soddisfano tale condizione.

 

7. Utilizzare un modello esistente o salvarne uno nuovo

Crea rapidamente le tue email utilizzando i modelli predefiniti di Connectif o creati da te dal pannello Strumenti (3), nella scheda Modelli, facendo clic su   Usa modello. Puoi anche salvare il design creato come modello facendo clic su   Crea modello da questo contenuto.

Editor di Email - 17-min.png

 

8. Aggiungere link predefiniti a un pulsante

Oltre agli elementi predefiniti spiegati nel punto 3, (Visualizza nel browser e Annulla iscrizione), Connectif offre diversi link predefiniti che possono essere aggiunti ai pulsanti delle email e che forniscono funzionalità senza doverli generare manualmente.

Per aggiungere uno di questi link, inserisci un pulsante nel tuo modello email, aggiungi un componente Pulsante alla tua email e modifica la sua configurazione.

Link nelle email - 1-min.png

Nella sezione Pulsante del link, fai clic sul pulsante Aggiungi link predefinito.

Link nelle email - 2-min.png

Fai clic sul menu a discesa e seleziona il link predefinito che desideri includere nel tuo pulsante. Sono disponibili:

  • Conferma iscrizione alla newsletter: se un contatto fa clic su questo link, Connectif cambierà il suo "Stato di iscrizione alla newsletter" in "Iscritto". Inoltre, l'iscrizione verrà notificata automaticamente al backoffice del tuo sito web.
  • Annulla iscrizione alla newsletter: se un contatto fa clic su questo link, Connectif cambierà il suo "Stato di iscrizione alla newsletter" in "Annullato" e notificherà questa modifica al backoffice del tuo sito web.
  • Visualizza nel browser: se un contatto fa clic, visualizzerà l'email in una nuova scheda del browser. Questa pagina viene generata automaticamente da Connectif.
  • Reinvia email: se un contatto fa clic su questo link, potrà inoltrare l'email tramite il client di posta predefinito.

Link nelle email - 3-min.png

Una volta selezionato, fai clic su Accetta e il link predefinito verrà aggiunto al tuo pulsante.

Link nelle email - 4-min.png

 

9. Rivedere le variabili

Esamina le variabili create e quante volte si ripetono negli elementi di testo dal pannello Strumenti (3), nella scheda Variabili. Per modificarne il formato, fai clic su  .

Se hai aggiunto recentemente una nuova variabile e non appare, fai clic su   per aggiornare.

 

Scopri di più sul formato delle variabili facendo clic qui.

10. Visualizzare l'anteprima del risultato finale e salvare

Nel pannello di anteprima e salvataggio (1) potrai vedere il risultato finale della tua email. Tutti i contenuti creati sono responsive, quindi puoi cliccare su  Anteprima per aprire un nuovo pannello e verificare il risultato finale. Clicca su  (Vista desktop) per vederlo su desktop, oppure su  (Vista mobile) per vederlo su mobile.

Editor di Email - 18-min.png

Puoi anche inviarti un'email di anteprima cliccando su  (Invia email di anteprima) per ricevere un’email di prova all’indirizzo selezionato e controllare come la riceverà il cliente.
Editor di Email - 19-min.png

Una volta soddisfatto del risultato, fai clic su   Salva.

  

Connectif è progettato per recuperare contenuti chiusi accidentalmente. Tuttavia, per evitare perdite di informazioni dovute al dispositivo o alla rete utilizzata, ti consigliamo di salvare la tua email ogni pochi minuti.

 

 

 Congratulazioni!
Sei arrivato alla fine della lezione.

  

Hai ancora dei dubbi?
Ricorda che hai a disposizione i nostri specialisti Connectif. Per contattarli, basta aprire un ticket all’assistenza cliccando sul pulsante blu “Aiuto” nella tua dashboard.

 


Continua a imparare!

Per sfruttare al massimo il potenziale del tuo account Connectif, ti consigliamo di continuare con i seguenti articoli: