Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 9.0.0

...

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

Image RemovedImage Added

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.

Image RemovedImage Added

Per ogni modello i modelli base e grafici è possibile:

  • creare un messaggio partendo dal modello;
  • vederlo in anteprima;
  • modificarlo., 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.

Image Added

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.

Image Added

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

    Image Added

  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

    Image Added

  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

    Image Added

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

    Image Added

Crea il messaggio

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

  • il contenutocorpo;
  • la struttura;
  • il corpocontenuto.

Vediamo in nel dettaglio queste 3 aree.

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.

Image Removed

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

Image Removed

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

...

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:

...

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

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

Guarda il nostro webinar

Per una panoramica più appofondita sull'utilizzo di BEE, ti consigliamo di dare uno sguardo al nostro Webinar "Tutto sul nuovo BEE v2"

...

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.

Image Added

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

Image Added

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

Image Added

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

Image Added

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

Image Added

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

Image Added

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.

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

Image Added

Il file manager viene caricato in diversi scenari.

  1. Cliccando sul bottone "Sfoglia" di un blocco di contenuto di tipo immagine vuoto.

    Image Added

  2. Quando clicchi su "Cambia immagine" nel pannello delle proprietà di un'immagine.

    Image Added

  3. Cliccando su "Link a un file" nella sezione Azione delle proprietà di un'immagine o di un bottone.

    Image Added

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.

Image Added

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

Note
titleLimiti di caricamento

Quando carichi un file all'interno del file manager, tieni presente che esiste un limite di 5 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. 

Image Added

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

Image Added

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.

Image Added

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