Puzzle

Puzzle è il nuovo editor drag&drop di Vola che ti permette di comporre newsletter responsive e professionali in pochissimo tempo: è sufficiente spostare e posizionare gli elementi a tua disposizione per impostare il layout proprio come lo vuoi tu.

Con l’editor drag&drop, puoi personalizzare facilmente l’email e modulare il template a seconda delle tue esigenze, aggiungendo e posizionando blocchi di testo, immagini, bottoni e molto altro. Niente di più facile ed intuitivo, senza che sia necessario conoscere l'HTML.

Interfaccia Editor

Se durante lo step 2 di creazione di una campagna scegliamo un template dai modelli drag&drop oppure decidiamo di creare un template nuovo selezionando l’editor drag&drop, si viene reindirizzati alla pagina dell’editor Puzzle.

In questa pagina troverai 3 sezioni:

  • La barra superiore

  • L’area centrale di lavoro

  • La colonna laterale a destra

La barra superiore

In questa sezione trovi tre pulsanti:

  1. Anteprima: tutti i template creati con Puzzle sono responsive, si adattano cioè a qualsiasi dispositivo su cui vengono visualizzati. Cliccando su anteprima, puoi vedere la resa del tuo template sia nella visualizzazione desktop che in quella mobile. Grazie a questa funzione avrai sempre sotto controllo il risultato grafico del tuo template email.

    NB: l'anteprima potrebbe differire leggermente dal reale risultato, pertanto si consiglia sempre di effettuare un invio di prova.

  2. Salva Template: questo bottone ti permette di salvare il modello nella sezione “i tuoi template” in modo da poterlo riutilizzare come modello per altre newsletter.

  3. Invia Email di prova: Prima di effettuare l'invio di una campagna ai tuoi contatti è consigliato effettuare un invio di prova verso alcuni indirizzi email. Cliccando sul bottone, potrai inviare un'email di prova fino ad un massimo di 5 indirizzi email contemporaneamente.

    NB: l'invio di prova è possibile solo durante gli step di creazione della campagna

Area centrale di lavoro

Nell'area di lavoro, puoi vedere in tempo reale la creazione del template. Inoltre, puoi posizionare, spostare e cancellare le strutture e i blocchi inseriti.

Per selezionare un elemento nell'area di lavoro, è sufficiente cliccarci sopra. L'oggetto selezionato viene evidenziato da un contorno blu.

Colonna laterale a destra

La colonna di destra ti consente di trascinare i componenti nell'area di lavoro per costruire il tuo template.

La colonna di destra è suddivisa in tre parti:

  • blocchi
  • struttura
  • stile

I blocchi sono i widget grafici che puoi inserire all'interno del template e che consentono l'interazione con l'email (ad esempio la visualizzazione di un video). La struttura invece è lo scheletro del tuo template, e ti consente quindi di creare il layout delle email tramite un meccanismo di righe/colonne. Infine lo stile è quello che permette di personalizzare l'aspetto dei blocchi e delle strutture.

Creare un template

Quando si utilizza un template drag&drop, questo viene caricato all'interno dell'editor Puzzle dove si possono eseguire eventuali modifiche e personalizzazioni.

Quando si crea un nuovo template da zero, nell'area centrale di lavoro troverai di default una struttura già inserita.

Struttura

Le strutture ti consentono di creare il layout del template. Ogni struttura è caratterizzata da una riga e da una o più colonne di diverse dimensioni. All'interno di ogni colonna possono essere posizionati i widget che si trovano all'interno della blocchi.

La figura sopra riporta l'esempio di un template caratterizzato da 5 strutture (5 righe) e da più colonne al cui interno è possibile collocare verticalmente uno o più blocchi.

Per posizionare una struttura all'interno dell'area di lavoro, è sufficiente trascinare la struttura scelta all'interno dell'area di lavoro, avendo cura di partire sempre dall'alto.

Cliccando su una struttura presente all'interno dell'area di lavoro, potrai spostarla (icona trascinamento) oppure cancellarla (icona cestino)

NB: cancellando una struttura, verrà cancellato anche tutto l'eventuale contenuto inserito. In egual modo, trascinando la struttura in un'altra posizione dentro l'area di lavoro, anche tutto il contenuto sarà spostato di conseguenza.

Blocchi

Nel tab denominato "Blocchi", troverai diverse tipologie di widget che puoi aggiungere nella struttura precedentemente creata.

Per posizionare uno o più blocchi all'interno di una struttura, è sufficiente trascinare il blocco scelto all'interno della colonna desiderata.

Se sono presenti più blocchi all'interno della stessa colonna, questi saranno organizzati verticalmente.

Ciascun blocco può essere cancellato (icona cestino) o spostato (icona trascina) all'interno della stessa colonna o in altre colonne (anche non appartenenti alla stessa struttura).

Stile

Cliccando su una struttura presente nell'area di lavoro o in uno dei blocchi inseriti, nella sezione di destra sarà possibile visualizzare il pannello di stile. Questo consente la personalizzazione dell'aspetto grafico dei componenti del template.

Ecco un esempio di finestra di stile che si apre quando si selezione una struttura (colonna).

NB: lo stile della sezione varia a seconda che si selezioni un blocco o una struttura, e cambia anche a seconda del blocco inserito (Se widget testo, immagine, video, etc.).

Nel momento in cui si sarà concluso il template in modo definitivo, è possibile procedere allo step 3 della campagna cliccando sul pulsante PROCEDI.

Caratteristiche Struttura

Come già descritto sopra, le strutture ti consentono di creare il layout del template.

Tipologie di strutture

Ogni struttura è caratterizzata da una riga e da una o più colonne di diverse dimensioni.

Puzzle ti offre diverse tipologie di strutture, per permetterti di creare un template estremamente personalizzato e rispondente alle tue esigenze.

Le strutture cambiano per numero e proporzione delle colonne e ti consentono di creare all'interno dello stesso template sezioni anche molto diverse tra loro.

Quando vuoi inserire un numero diverso di colonne, ti basta trascinare nell'area di lavoro una delle strutture disponibili.

NB: una struttura non può essere inserita dentro un'altra struttura. Può essere posizionata sopra o sotto un'altra struttura presente.

Stile della struttura

Le strutture consentono posso essere personalizzate grazie alla sezione stile presente nella colonna di destra dell'editor.

Cliccando su una struttura inserita nell'area di lavoro, questa si evidenzierà e si aprirà la sezione di stile.

![](dettaglio stile.JPG)

Di una struttura, possono essere modificate le seguenti impostazioni:

  • Colore sfondo: è possibile impostare un colore di sfondo che andrà a caratterizzare tutto lo sfondo della struttura selezionata.
  • Raggio bordo: tramite la funzione raggio bordo, possiamo decidere di dare alla struttura un angolo più o meno stondato.
  • Immagine di sfondo: al posto di un colore di sfondo è possibile utilizzare un'immagine, caricandola tramite l'apposita funzione dal file manager.
  • Margini: i margini possono essere utilizzati per definire

Caratteristiche Blocchi

Una volta inserita nell'area di lavoro almeno una struttura, è possibile trascinare al suo interno i vari blocchi.

Tipologie di blocchi

Puzzle ti offre diverse tipologie di blocchi, per permetterti di creare un template estremamente personalizzato e rispondente alle tue esigenze.

I blocchi disponibili sono:

  • Testo
  • Pulsante
  • Divider
  • Menu
  • Immagine
  • Social
  • Video

Blocco Testo

Con il blocco testo si inserisce un contenuto testuale all'interno del template.

Nella colonna di destra troverai lo stile del blocco testo. Da qui è possibile effettuare diverse modifiche:

  • Area testo: qua puoi scrivere il tuo testo e personalizzarlo con la barra degli strumenti in alto.


    Annulla - Ripeti
    Evidenzia testo
    Grassetto - Corsivo - Sottolineato
    Link
    Html
    Elenchi puntati/numerati
    Paragrafo

    Con la barra degli strumenti puoi editare tutto il testo o parte di esso.

  • Stili testo: sotto l'area del testo sono presenti altre tipologie di personalizzazioni, come lo stile del font, la dimensione, il colore, l'allineamento etc.

    Queste opzioni vengono applicate all'intero blocco testuale.

Blocco Pulsante

Il blocco pulsante permette di inserire un bottone all'interno del template, utile per inserire link o catturare l'attenzione del lettore con call to action, ovvero inviti all'azione.

Nella colonna di destra troverai lo stile del blocco pulsante. Da qui è possibile effettuare diverse modifiche:

In particolare, il pulsante ti permette di aprire un link, eseguire una chiamata telefonica o inviare una email. Puoi impostare uno di questi comandi tramite la proprietà "azione pulsante".

è possibile configurare una sola azione per pulsante.

Blocco Divider

Trascinando questo blocco nell'area centrale di lavoro, viene inserita una linea orizzontale che consente di separare i contenuti del template.

Nella colonna di destra troverai lo stile del blocco divider.

Da qui è possibile effettuare diverse modifiche, come ad esempio è possibile cambiare il colore della linea, la tipologia di tratteggio, il bordo e la sua lunghezza.

Blocco Menu

Il blocco Menu ti consente di inserire un menù cliccabile nel template.

Puoi inserire fino ad un massimo di 5 link ed un minimo di 1. I link possono essere riordinati, oppure cancellati.

Nella visualizzazione desktop del template, questi link saranno allineati orizzontalmente su una riga nel template. Invece, nella visualizzazione mobile, i link saranno organizzati su più righe e più colonne o, dove possibile, all'interno di un menù ad espansione cliccabile chiamato "hamburger menu" per il quale è possibile impostare il colore dell'icona.

L'hamburger menu viene visualizzato solo su alcuni client mobile di posta elettronica.

Nella visualizzazione dell'anteprima email da mobile, viene sempre visualizzato l'hamburger menu.

Blocco Immagine

Il blocco immagine consente di inserire un'immagine all'interno del template.

Per inserire un'immagine è necessario utilizzare il file Manager. Non è consentito l'utilizzo di risorse esterne tramite l'inserimento diretto del link.

L'immagine, quando cliccata, può consentire l'apertura di un link configurabile tramite l'opzione "Redirect Immagine".

L'opzione "Testo Alternativo Immagine" ti consente di inserire un testo da visualizzare al posto dell'immagine nel caso in cui questa non venga scaricata dal client email del tuo contatto.

Blocco Social

Il blocco social ti consente di inserire delle icone cliccabili relative ai tuoi social network.

Puoi aggiungere, spostare o eliminare i social direttamente dal pannello di stile del blocco e puoi anche decidere il loro orientamento nel template (vertical, orizzontale).

Nel caso in cui il blocco venga inserito all'interno di una struttura con colonne multiple è possibile che l'orientamento sia sempre verticale a causa del ridotto margine fra le colonne.

Fra le altre opzioni puoi decidere la dimensione delle icone e la distanza fra esse (margine).

Blocco Video

Questo blocco posiziona una preview del video da te scelto su Youtube o Vimeo. Quando il tuo contatto clicca sull'anteprima del video verrà reindirizzato al video originale.

Nel pannello di stile, una volta inserito il link del video, puoi scegliere quale icona del player visualizzare nell'anteprima e scegliere la sua dimensione.

Contenitore Blocchi

Ogni blocco è collocato all'interno di un contenitore che può essere personalizzato ad eccezione del blocco Menu.

è possibile personalizzare il colore dello sfondo del contenitore e i suoi margini.