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...

1. 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
   
   
   
   
2. 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
   
   
   
   
3. 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
   
   
   
   
4. 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".

Struttura

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:

• 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.

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 autoprofilazione, versione web, landing page ecc.).

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

I divisori aiutano a creare separazione visiva tra gli elementi del messaggio. I divisori 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.
  
  

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.

1. Cliccando sul bottone "Sfoglia" di un blocco di contenuto di tipo immagine vuoto.
   
   
   
   
2. Quando clicchi su "Cambia immagine" nel pannello delle proprietà di un'immagine.
   
   
   
   
3. 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.

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.

Usare un file

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.