Per iniziare a creare un messaggio con il nuovo editor BEE, dalla tua piattaforma, clicca su Messaggi > Email > NUOVA EMAIL e successivamente su "COMINCIAMO!".

I modelli

Decidi di comporre la tua email scegliendo tra:

modelli base, contenenti solo la struttura del messaggio;
modelli grafici, arricchiti con esempi di contenuto da usare come spunti per il design;
miei modelli, ossia modelli salvati in precedenza.

Per i modelli base e grafici è possibile:

creare un messaggio, cliccando sull'anteprima;
vedere un'anteprima o creare una copia in "Miei modelli", cliccando sul tasto Azioni

Solo per i modelli nella sezione "Miei modelli", è possibile anche modificare o eliminare un modello.

Concetti di base

In questa sezione ci soffermiamo sui principali concetti necessari a comprendere appieno il funzionamento dell'editor.

Struttura vs Contenuto

Per ottenere la massima flessibilità nel design, la struttura del messaggio è separata dal suo contenuto. Questo significa, per esempio, che puoi avere righe di contenuto che usano strutture differenti all'interno di sezioni differenti del messaggio (un colore di sfondo a tutta larghezza, un numero diverso di colonne ecc.).

Righe

Il controllo a livello di riga consente di utilizzare strutture e stili diversi all'interno dello stesso messaggio. Per esempio, puoi cambiare il colore di sfondo di un'intera riga di contenuto.

Nell'esempio qui sotto, la parte superiore del messaggio viene separata a livello visivo da quella inferiore utilizzando righe a larghezza 100% con colori di sfondo differenti.

Colonne all'interno delle righe

Le impostazioni a livello di colonna all'interno di una riga consentono di controllare il colore di sfondo, la spaziatura e i bordi per la colonna selezionata.

Selezionare righe e contenuti

Quando sposti il mouse nell'area di modifica del messaggio, puoi interagire in diversi modi:

Spostando il mouse su un blocco di contenuto (come nell'esempio in basso), l'editor mostra un'icona che ti consente di spostare quel blocco di contenuto da un'altra parte
Cliccando su un blocco di contenuto, l'editor:
1. mostra due icone, che ti consentono di eliminare o clonare quel blocco di contenuto
2. cambia il pannello delle proprietà sulla destra per mostrare le proprietà che è possibile impostare per quel contenuto
Spostando il mouse su un'area priva di contenuti, ossia sulla riga nella quale si trova il contenuto, l'editor evidenzia la riga e mostra un'icona che consente di spostarla da un'altra parte
Cliccando su una riga, l'editor:
1. deseleziona il contenuto che era stato selezionato in precedenza
2. seleziona la riga e mostra due icone che consentono di rimuoverla o clonarla interamente, inclusi i suoi contenuti
3. cambia il pannello delle proprietà sulla destra per mostrare le proprietà che si applicano alla riga e alle colonne di cui essa è composta (ogni riga può contenere più colonne).

Crea il messaggio

Creare il messaggio con BEE è veramente facile e intuitivo. Dopo aver scelto il modello da cui partire, puoi personalizzarne:

il corpo;
la struttura;
il contenuto.

Vediamo nel dettaglio queste aree.

Corpo

In questa sezione puoi modificare alcune impostazioni generali che avranno effetto su tutto il messaggio.

Larghezza area contenuto: è impostata di base a 600px, che è la larghezza consigliata per la maggior parte dei dispositivi.
Colore sfondo: è il colore dello sfondo della newsletter. Questa impostazione avrà effetto solo per le righe per le quali non hai già impostato un colore, all'interno di "Proprietà riga". In tal caso, verrà usato il colore di sfondo specificato a livello di riga.
Colore sfondo area contenuto: è il colore dello sfondo di tutte le aree di contenuto. Questa impostazione avrà effetto solo per le righe e le colonne per le quali non hai già impostato un colore, all'interno di "Proprietà colonna".
Carattere predefinito: E' il font usato in tutta la newsletter. Questa impostazione influisce su tutto il testo il cui carattere è impostato come "predefinito".
Colore link: è il colore dei link. Come sopra, Questa impostazione influisce su tutti i link di testo il cui colore è impostato come "predefinito".

Dimensioni massime per le immagini:

Larghezza 1920 px

Lunghezza 1666 px

Risoluzione 72 dpi

Se inserite un'immagine con dimensioni maggiori rispetto quelle indicate ci penserà l'editor, automaticamente, a ridimensionare l'immagine fino alle dimensioni qui sopra ripotate.

Le strutture sono un tipo di modulo che puoi trascinare all’interno del messaggio e che puoi riempire a piacimento con i moduli di contenuto disponibili nella scheda "Contenuto". Le strutture cambiano per numero e proporzione delle colonne e ti consentono di creare all'interno dello stesso messaggio sezioni anche molto diverse tra loro. Ad esempio:
Struttura

una struttura a una colonna per un'immagine d'impatto in cima al messaggio;
una struttura a due colonne al centro, con l'annuncio di un nuovo prodotto, un bottone e un'immagine;
una struttura a tre colonne nella parte bassa del messaggio, con informazioni aggiuntive sul prodotto;
ecc...

Quando hai bisogno di passare a un numero diverso di colonne, ti basta trascinare nel messaggio una delle strutture disponibili.

Le strutture consentono molta flessibilità e personalizzazione, sia a livello di riga sia a livello di colonna. Inoltre, puoi clonare intere strutture (ad esempio un' immagine, un bottone e un testo) con tutte le sue impostazioni e blocchi.

Cliccando su una struttura presente all'interno del messaggio, potrai modificarne le impostazioni a livello di riga e di colonne, come i colori di sfondo, le spaziature e i bordi.

E' inoltre possibile impostare un'immagine di sfondo per ciascuna riga. Leggi questo articolo per imparare ad usare le immagini di sfondo all'interno delle tue email.

Contenuto

Il tab "Contenuto" ti permette di scegliere un nuovo contenuto da aggiungere al tuo messaggio.

Scegline uno tra quelli a disposizione (bottone, immagine, testo ecc.) e trascinalo all'interno dell'area di sinistra. E' anche possibile inserire un blocco HTML per aggiungere il tuo codice HTML personalizzato nei messaggi creati con l’editor.

Proprietà contenuto: Cliccando sul blocco di contenuto all'interno del messaggio, sulla destra appaiono le proprietà del contenuto. Nell'esempio qui sotto, per un blocco "testo" puoi impostare il colore del testo, dei link e scegliere il font adatto, ma anche decidere il padding (distanza dai bordi del blocco).

Le proprietà di contenuto saranno diverse a seconda del contenuto selezionato. Se selezioni un bottone, ad esempio, vedrai una serie di strumenti per definire lo stile del bottone e collegarlo all'azione desiderata.

Modificare il testo: Se clicchi sul testo all'interno di un blocco di testo, apparirà la barra di modifica del testo. Oltre alle classiche funzionalità di formattazione del testo, troverai altri strumenti e funzionalità avanzate come i campi dinamici (ad es. Gentile [nome]) e i link speciali (iscrizione/disiscrizione, moduli di auto-profilazione, versione web, landing page ecc.).

Ridimensionare un'immagine: È possibile ridimensionare un’immagine direttamente nel messaggio senza utilizzare strumenti esterni o modificare il file originale.

Dopo aver selezionato l’immagine su cui si intende lavorare, scegliere tra:

Dimensione automatica – funzione predefinita che imposta automaticamente la grandezza della creatività, senza alterarne la risoluzione. In caso di immagini di dimensioni inferiori al blocco di contenuto, verranno mantenute le dimensioni originali per evitare sgranature o distorsioni.
Modifica manuale – dopo aver deselezionato la funzionalità Dimensione automatica, consente di modificare la dimensione dell’immagine manualmente tramite la barra di scorrimento indicante la percentuale. L'immagine avrà la stessa dimensione anche su mobile, a meno di non selezionare "Adatta in larghezza su mobile".

Controllo avanzato della spaziatura: Le impostazioni di spaziatura per un elemento selezionato possono essere configurate sia con un valore unico per tutti i lati.

... sia con un valore diverso per ogni lato.

Lo stesso dettaglio di controllo si applica ai bordi.

Divisori: aiutano a creare separazione visiva tra gli elementi del messaggio. Possono essere trasparenti:

o visibili. Anche qui, il controllo avanzato della spaziatura consente grande flessibilità nel design:

Usare il file manager

L'editor include un file manager. Questo componente ti serve a navigare, cercare e selezionare le immagini e i documenti che vuoi usare nel tuo messaggio.

Con questo strumento quindi puoi:

navigare tra i file esistenti, cercarli e ordinarli;
importare nuovi file;
creare cartelle;
vedere in anteprima e inserire immagini nel tuo messaggio.

Inserire immagini con il drag & drop

Se vuoi aggiungere rapidamente un'immagine nel messaggio, puoi semplicemente trascinarla dal tuo computer all'interno di un blocco di contenuto di tipo immagine, anche se è già occupato da un'altra immagine (in quel caso verrà sostituita)

Com'è fatto? Il file manager appare sopra l'editor, coprendo l'intera area di lavoro. Questo ti consente di navigare tra i file senza preoccuparti delle dimensioni o della risoluzione dello schermo.

Nella parte superiore trovi gli elementi di navigazione e le azioni, mentre il resto dello schermo è occupato dall'elenco dei file e dalle loro informazioni.

Il file manager viene caricato in diversi scenari.

Cliccando sul bottone "Sfoglia" di un blocco di contenuto di tipo immagine vuoto.
Quando clicchi su "Cambia immagine" nel pannello delle proprietà di un'immagine.
Cliccando su "Link a un file" nella sezione Azione delle proprietà di un'immagine o di un bottone.

Come caricare un file: Il modo più veloce di caricare un file all'interno di una cartella del file manager è trascinarla dal computer dentro il file manager stesso, rilasciandola nell'area di caricamento.

In alternativa, clicca su "Carica file" per aprire la classica finestra di caricamento del tuo computer.

Limiti di caricamento

Quando carichi un file all'interno del file manager, tieni presente che esiste un limite di 12 Mb. Se il file è più pesante, riceverai un messaggio di errore.

Come importare file da altre applicazioni: La funzionalità "Importa da" ti consente di collegare applicazioni esterne come Dropbox, Google Drive, Instagram e molte altre per importare file.

Navigare e cercare file: Per localizzare il documento o l'immagine che ti serve, naviga nelle cartelle e ordina il loro contenuto per nome, data, dimensione o tipo cliccando sulla rispettiva etichetta subito sopra l'elenco dei file.

Se ci sono molti file nella cartella selezionata, puoi cliccare sull'icona della lente per effettuare una ricerca all'interno della cartella in cui ti trovi.

Quando muovi il mouse su una cartella o un file, verranno visualizzate sulla destra le azioni possibili.

Inserisci e Anteprima per i file
Elimina per file e cartelle

Se non è possibile eseguire un'azione, ti verrà segnalato cliccando su di essa (ad esempio non è possibile rimuovere cartelle che contengono file).

Se vuoi eliminare più file o cartelle, selezionale usando la spunta sulla sinistra e clicca sull'azione "Elimina tutto"

Organizzare le cartelle: Puoi personalizzare la struttura delle cartelle secondo le tue esigenze. Per aggiungere una cartella, clicca sull'icona in alto a destra e scegli il nome che preferisci.

Ricorda che puoi usare il percorso visibile in alto, subito sotto i bottoni con le azioni, per spostarti rapidamente all'interno delle tue cartelle.

Torna indietro e visualizza ultime azioni

In fase di creazione del messaggio, una volta compiuta almeno una azione, nell'editor compaiono dei tasti in basso a destra che consentono di:

tornare indietro di una modifica,
andare avanti e quindi recuperare la modifica rimossa,
visualizzare lo storico delle ultime azioni (fino a un massimo di 20) e selezionarne una di esse per tornare a quella modifica.

Lo storico delle azioni è legato al messaggio, quindi viene mantenuto in fase di modifica dello stesso ma non per modifiche future se si esce dall'editor.

Salva ed Esci

Per ogni messaggio che hai creato puoi decidere si compiere una serie di azioni principali a cui corrispondono i tre bottoni:

Esci: esci dal messaggio senza salvare. Questa scelta comporta la perdita di tutte le modifiche.
Salva: salva tutte modifiche senza uscire dall'editor.
Salva ed esci: Salva le modifiche ed esci dall'editor.

salva automaticamente e ripristina versioni non salvate del messaggio

La piattaforma ogni minuto salva automaticamente una copia del messaggio.

In caso di uscita accidentale dall'editor, accedendo nuovamente al messaggio, la piattaforma segnalerà la presenza di una versione precedente consentendo di visualizzare un'anteprima, recuperare il messaggio o ignorarlo.

Inoltre, tramite il menù a tendina posizionato accanto al bottone "Salva ed Esci" puoi accedere ad altre azioni come:

Salva come modello: consente di salvare il messaggio come modello e poterlo recuperare in fase di creazione di un nuovo messaggio (Messaggi > Email > Modelli > Modelli drag & drop)
Effettuare un invio veloce
Vedere una anteprima del messaggio
Mostrare la struttura del messaggio

Salvare un modulo

All’interno dell’editor Drag & Drop, puoi salvare fino a 30 moduli che potrai utilizzare su messaggi diversi.

Per salvare un modulo, selezionalo nell’editor Drag & Drop e procedi nel modo che preferisci:

Puoi cliccare sull’icona del Floppy apparsa in seguito alla selezione.
Puoi aggiungere il modulo a quelli salvati dal menu contestuale dell’editor che appare a destra.

Dai un nome al tuo modulo personalizzato.
Clicca su “Salva Modulo”

Suggerimento

Ti consigliamo di nominare il tuo nuovo modulo in modo che ti sia facile identificarlo facilmente. Es “Header 1 - …”

Richiamare un modulo salvato

Per utilizzare un modulo salvato in precedenza:

Entra nel tab “Moduli” dell’editor Drag & Drop.
Dal menu a tendina, seleziona “Moduli Salvati”
Trascina il modulo nel messaggio per personalizzarlo

Moduli personalizzati

I moduli personalizzati sono delle righe di contenuto precompilate già pronte per essere utilizzate nel messaggio.

Sono disponibili nel menu a tendina nell'area "Struttura" e per inserirli nel messaggio ti basta trascinare il modulo personalizzato selezionato.

I contenuti mostrati nei moduli personalizzati vengo portati in piattaforma tramite sorgenti di contenuto da link di feed RSS/ATOM o da file .csv o .json.