Come utilizzare l'editor Drag&Drop (Drago)
Tempo di lettura: 8 minuti
Difficoltà: Base
L'editor grafico Drag&Drop ti consente di creare le tue email senza avere competenze di codice HTML o CSS, Ti basterà trascinare gli elementi nella posizione desiderata e personalizzarli tramite la colonna delle impostazioni o dove possibile la barre degli strumenti.
Guarda il nostro video tutorial su come creare una campagna con DRAGO: clicca qui
In questa guida:
Come si compone l'editor
L'editor Si compone principalmente in 3 sezioni:
- La colonna degli elementi (a sinistra)
- Il contenuto dell'email (al centro)
- La colonna delle impostazioni (a destra)
Quando inserisci un elemento dalla colonna degli elementi nel contenuto della tua email, o ne selezioni uno già inserito, la colonna di destra delle impostazioni ti mostrerà automaticamente quali personalizzazioni puoi effettuare su quella tipologia di elemento.
Breadcrumb
Significa letteralmente "briciole di pane" ed è un elemento che compare automaticamente appena sopra il nucleo centrale dell'editor quando selezioni un elemento. La Breadcrumb ti permette di monitorare gli annidamenti dell'elemento selezionato, ovvero tutti i diversi livelli di "contenitori" in cui l'elemento selezionato è contenuto.
Per inserire un elemento non devi fare altro che cliccarci sopra (tenendo premuto sul click sinistro) e trascinarlo con il mouse dalla colonna di sinistra nel corpo centrale dell'email nella posizione desiderata.
Elementi singoli
Gli elementi singoli sono i "mattoncini" principali per creare il layout della tua email, vediamoli nello specifico.
Full width
Con l'elemento Full width puoi creare un contenitore a piena larghezza e con un unico colore di background.
Un elemento Full width può essere suddiviso a metà tramite la voce "N. di celle" che trovi nella colonna delle impostazioni e impostarne l'ordine delle celle sui dispositivi mobili (da sinistra a destra o da destra a sinistra),
Per finire puoi definire i colori di background primario e secondario.
Il primo elemento da inserire
L'elemento full width può essere inserito solo alla base del tuo modello, ovvero deve essere il primo elemento che contiene tutti gli altri. Puoi invece inserire più elementi full width uno sotto l'altro.
Box
L'elemento Box serve per raggruppare diversi elementi tra di loro, con il Box puoi aggiungere bordi, colore di background e margini ad un elemento o a più elementi raggruppati.
Se vuoi puoi salvare il contenuto del tuo Box come Elemento Speciale per riutilizzarlo in seguito.
Un box può contenere tutti gli elementi tranne gli elementi Full width.
Con l'elemento selezionato potrai impostarne il design tramite la colonna di destra dell'editor,in particolare:
- Posizione: Imposta margine e padding.
- Bordi: Tramite un click sul relativo selettore potrai attivare quali bordi mostrare, quindi tramite le opzioni "Stile", "Larghezza" e "Colore" potrai personalizzare il bordo del tuo box.
Salva il tuo box
La voce "Gestione elementi speciali" ti consente di salvare fra i "Favoriti" un box e tutto il suo contenuto, in questo modo quando ti ritroverai ad usare l'editor potrai richiamare facilmente quel contenuto. Questa funzione viene particolarmente utile per gli header e i footer delle tue email.
Colonna
Tramite gli elementi Colonna puoi aggiungere al tuo layout fino a un massimo di 5 colonne. Ogni colonna sarà riordinabile, ridimensionabile e gestibile su mobile.
- Mostra su mobile: Dopo aver selezionato una colonna tramite il selettore nella barra delle impostazioni a destra dell'editor potrai decidere se mostrala o oscurarla su mobile.
- Blocca larghezza colonna: Se attiva questa voce consente di bloccare la larghezza della colonna selezionata.
- Larghezza: Consente di modificare la larghezza della colonna selezionata. Se è attiva la voce "Blocca larghezza" questa funzione non è selezionabile.
- Impostazioni mobile: Questa impostazione gestisce la visualizzazione di dell'elemento colonna nel caso l'email venga aperta da mobile. Puoi decidere di nascondere l'intero elemento colonna o di impedire che le colonne vengano riordinate una sotto l'altra.
- Gestione elementi speciali: Puoi salvare questo elemento nei preferiti i richiamarlo in pochi click senza doverlo ricreare.
Titolo e Testo
Se fai doppio click sui titoli comparirà l'editor di testo con cui potrai modificarli ed effettuare le modifiche alla formattazione del testo. Ogni elemento Titolo dispone di 3 stile personalizzabili tramite la colonna delle impostazioni a destra dell'editor.
In particola potrai modificare la dimensione, l'interlinea e il tipo di font utilizzato oltre che alle impostazioni nel caso i titoli siano anche dei link.
Tramite le impostazioni potrai determinare anche la spaziature (margini) dell'elemento titolo rispetto agli elementi esterni a lui.
Con un doppio click su l'elemento oppure con un click sull'icona "pennino" che trovi sul riquadro di selezione dell'elemento potrai accedere anche alla barra degli strumenti dove potrai modificare direttamente la formattazione e inserire ancore, link a pagine esterne o elenchi puntati.
Tramite le select potrai anche inserire i codici per richiamare contenuti remoti o personalizzazioni dinamiche dei contenuti (per esempio Inserire il *nome* dell'iscritto).
Personalizzazione dinamica
Puoi personalizzare i contenuti delle tue email con le informazioni del tuo iscritto solo se la lista a cui stai inviando possiede i necessari campi personalizzati correttamente popolati.
Immagine
L'elemento immagine consente di inserire un'immagine nella nostra email. Seleziona l'elemento e trascinalo nella posizione desiderata quindi con un doppio click accedi alla libreria tramite la quale scegliere o caricare le immagini.
Tramite il menu di destra potrai aggiungere un link alla tua immagine (URL), inserire il testo alternativo, gestirne l'allineamento o ridimensionare l'immagine.
Dimensioni consigliate
Per ottenere la miglior visualizzazione possibile sul mobile utilizza immagini larghe 600px.
Bottone
Questo elemento ti consente di inserire in modo facile e veloce un bottone nelle tue email.
Se fai doppio click su un elemento Bottone, comparirà un editor di testo con cui potrai modificarne il testo.
Tramite il menù di destra puoi aggiungere un link (URL) e modificare l'aspetto del bottone.
Divisore
L'elemento Divisore ti permette di aggiungere una linea orizzontale o uno spazio bianco al tuo messaggio per dividere due sezioni della tua newsletters
Nella colonna di destra puoi cambiare lo stile della linea, la spaziatura ed il colore di background.
Link di cancellazione e dati del mittente
Tramite questi due elementi potrai inserire in modo rapido e veloce tutte le informazioni obbligatorie per poter inviare le tue campagne email.
Elementi Speciali
Gli elementi speciali ti consento di inserire in maniera rapida e veloce blocchi già strutturati e pronti per a ospitare i tuoi contenuti. Gli elementi che trovi in questa tab hanno il vantaggio di farti risparmiare tempo, ma rispetto agli elementi singoli hanno lo svantaggio di essere meno personalizzabili.
Multicolonne
Tra gli elementi multi colonna pronti all'utilizzo puoi scegliere tra:
- - Immagine + Testo
- - Testo + Immagine
- - Gruppo immagini
Questi tre elementi sono costruiti utilizzando l'elemento semplice "Colonna", "Immagine" e "Testo".
L'elemento Gruppo Immagini ti permette di inserire da 2 a 5 immagini nello stesso blocco.
Nella scheda Impostazioni Gruppo Immagini è possibile scegliere la disposizione, aggiungere, rimuovere o riordinare le immagini.
Questo elemento nasce per consentirti di inserire in maniera rapida e veloce i canali social alle email. Social follow consente di inserire i tuoi canali social per richiedere ai toi contatti di seguirti per rimanere aggiornati su tutte le novità anche tramite i social.
Social Share invece consente di inserire i principali canali social dove i tuoi contatti potranno condividere la tua newsletters sulle loro pagina profilo.
Tramite il menu di destra potrai personalizzare lo stile delle icone, gestire i social che vuoi mostrare inserire i link alle relative pagine.
Questi elementi possono essere ricreati e personalizzati maggiormente utilizzando l'elemento "colonna" e "Immagine".
Video
Questo elemento non consente di caricare o inserire un video nella tua email, questo perché le email non possono contenere e riprodurre video.
Grazie all' elemento video sarà possibile però inserire url di un tuo video caricato sul tuo profilo Youtube o Vimeo, prelevare un frame (immagine) quindi inserirlo nella tua email con l'icona del player. Questo consente di simulare un player video per invitare l'utente a riprodurre il video.
Favoriti
Questo elemento ti consente di inserire in maniera rapida e veloce non solo alcuni blocchi già pronti per essere utilizzati, ma soprattutto richiamare gli elementi che tu stesso hai creato e precedentemente salvato.
L'editor Drago non è uno strumento "collaborativo", a differenza ad esempio di uno spreedsheet di google dove più persone possono lavorare contemporaneamente sullo stesso foglio.
Pertanto ti consigliamo di seguire queste best practice per evitare la perdita dei tuoi contenuti o spiacevoli sovrascrizioni:
- Non aprire l'editor Drago su due o più finestre del browser contemporaneamente.
- Non lavorare contemporaneamente ad un'altra persona sull'editor.
- Se ti prendi una pausa, ricordati di salvare la campagna in bozza. Non lasciare l'editor aperto e senza modifiche per più di 30 minuti.
- Utilizza sempre dei "modelli" e poi parti da quelli per creare nuove campagne.