Editor di template

L'editor di template di Acumbamail ti permette di progettare email in modo semplice e intuitivo tramite un sistema drag & drop che offre molte possibilità per creare il tuo design da zero o adattare uno dei nostri template gratuiti. In questo articolo potrai conoscere nel dettaglio tutte le possibilità offerte dall'editor. 

Selezionare il template da modificare

Innanzitutto, quando stai creando una campagna puoi scegliere tra: selezionare uno dei template offerti da Acumbamail (da Nuovi template), riutilizzare uno di quelli che hai già utilizzato (I miei template) o importare il tuo template.

Hai anche la possibilità di iniziare a modificare dall'editor due template completamente adattati al design del tuo sito web, con il tuo logo e i tuoi colori aziendali. Per generarli, devi solo accedere alla vista generale dei template e inserire l'URL del tuo sito web.

D'altra parte, in qualsiasi momento puoi creare o modificare un template dalla sezione Template  all'interno di Email, per utilizzarlo più tardi in una campagna.

Se vuoi utilizzare uno dei nostri template, puoi filtrare per temi per trovare facilmente quello più adatto alla campagna che vuoi inviare.

Una volta selezionato, accederai all'editor per poterlo personalizzare, modificarne la struttura o aggiungere blocchi con contenuti diversi. L'editor è composto da tre parti:

• Il template in modifica, a sinistra
• L'editor vero e proprio, diviso in contenuto, righe e impostazioni
• I pulsanti nella parte superiore sinistra di Anteprima (visualizzare il template su diversi dispositivi) e Mostra struttura (vedere il template a griglie, cosa che aiuta a progettare con maggiore precisione), oltre all'opzione di modificare il template in versione desktop e mobile in tempo reale, vedendo in ogni momento come risulta una versione e l'altra. Per maggiori informazioni su questa funzione, vai alla sezione delle opzioni responsive.

Comandi generali dell'editor

Queste sono le azioni di base necessarie per iniziare a utilizzare l'editor:

• Per aggiungere un blocco di contenuto al template, è sufficiente trascinarlo nel punto desiderato.
• Se fai doppio clic sul blocco di contenuto specifico, potrai duplicarlo, eliminarlo o trascinarlo in un altro punto facendo clic sulla crocetta bianca

• Allo stesso modo, facendo doppio clic su un contenuto specifico avrai accesso alle sue impostazioni nella parte dell'editor, a destra

• Tieni presente che l'area di contenuto è sempre inclusa all'interno di una riga, quindi se vuoi modificare un elemento che influisce su tutta la riga (ad esempio, il colore di sfondo), dovrai fare clic sulla riga specifica (il modo più semplice è fare clic dai lati)

• Quando fai doppio clic sulla riga specifica, potrai accedere alle impostazioni generali di quella riga a destra.
• Se vuoi annullare qualche modifica, a sinistra troverai un pulsante di annullamento una volta apportate modifiche al template. Se fai clic sull'icona dell'orologio, potrai vedere le ultime modifiche effettuate.

Contenuto

Nella sezione Contenuto potrai aggiungere diversi blocchi in base alle tue esigenze. Per aggiungere ogni tipo di contenuto, devi solo trascinare ogni blocco all'interno del template, selezionando il punto in cui vuoi inserirlo. Ogni blocco di contenuto ha le proprie caratteristiche, che descriviamo di seguito.

Titolo

Per aggiungere un blocco di titolo, devi trascinare il blocco corrispondente nel punto del template in cui vuoi aggiungerlo. Il blocco titolo ti aiuterà a gerarchizzare il contenuto.

Puoi inserire titoli nel tuo template email per gerarchizzare il contenuto che includi, nello stesso modo di una pagina web o di un blog con un titolo 1, 2 e 3 (H1, H2 e H3). 

Proprietà del contenuto

In questa sezione si può configurare quanto segue:

• Generazione automatica di testo basata su IA (accessibile solo per piani Pro).
• cambiare la gerarchia del titolo specifico (H1, H2 o H3), il font e la sua dimensione, il colore del testo e dei link, l'interlinea e la direzione del testo.

Barra degli strumenti popup

Facendo clic sul testo stesso appare un menu o una barra popup da cui è possibile:

• Cambiare lo stile della tipografia (grassetto, corsivo, sottolineato, barrato….)
• Inserire caratteri speciali
• Cambiare il colore del testo specifico ed evidenziarlo con colori diversi 
• Aggiungere un link o collegamento
• Aggiungere contenuto personalizzato per personalizzare i tuoi invii con, ad esempio, il nome dei tuoi iscritti. In questo articolo ti spieghiamo questo aspetto. 

Testo (obsoleto)

⚠️ Questo blocco permetteva di inserire testo nel design. Tuttavia, è diventato obsoleto a favore dei nuovi blocchi di tipo paragrafo ed elenco.

Se hai già incluso un blocco di questo tipo nei tuoi design, potrai continuare a modificarlo normalmente come descritto in questa sezione. Tuttavia, per incorporare nuovi testi nei tuoi template ti consigliamo di usare i nuovi elementi paragrafo ed elenco.

Proprietà del contenuto

In questa sezione potrai effettuare una regolazione delle caratteristiche per tale blocco, che sono le seguenti:

• Colore del testo, colore dei link
• Interlinea, modificare la spaziatura del testo, margini superiore, inferiore, destro e sinistro
• Opzione per nascondere questo blocco nella vista desktop o mobile

Barra degli strumenti popup

Nel blocco stesso, selezionando il testo, apparirà un editor con le opzioni per cambiare:

• La tipografia, la dimensione, lo stile (grassetto, corsivo, sottolineato, barrato….) e l'allineamento del testo
• Inserire caratteri speciali (nell'icona omega) , apici o pedici
• L'opzione per massimizzare o minimizzare l'editor mentre stai modificando un testo
• Aggiungere elenchi numerati o puntati 
• Cambiare il colore del testo ed evidenziarlo con colori diversi 
• Aggiungere diversi tipi di link (URL, email, file e chiamata). 
• Avremo inoltre accesso ai link speciali (vedere nel browser, annullare l'iscrizione, modificare dati e rinnovare il consenso GDPR) e alla possibilità di aggiungere contenuto personalizzato per personalizzare i tuoi invii con, ad esempio, il nome dei tuoi iscritti. In questo articolo ti spieghiamo nel dettaglio come utilizzare etichette personalizzate per ogni iscritto.

Allo stesso modo, se copi e incolli un testo in corsivo o in grassetto, l'editor di testo manterrà entrambi i formati. 

Paragrafo

Questo blocco permette di inserire testo nel design.

Paragrafo vs Testo

Questo blocco è simile al suo predecessore blocco di Testo, ma presenta alcune differenze:

• Alcune opzioni di formattazione sono state spostate dalla barra degli strumenti che appare sul blocco di testo stesso al menu laterale (nella sezione "Proprietà del contenuto"). In questo modo la barra degli strumenti risulta più compatta e meno satura di opzioni. Queste opzioni sono:
  • Font (famiglia)
  • Dimensione del carattere
  • Allineamento del testo
  • Direzione del testo
  • Inserire elenchi (ora questo viene gestito con il nuovo elemento Elenco).
• Nella barra degli strumenti è stato aggiunto:
  • Un nuovo pulsante accanto al pulsante delle emoticon, che permette di inserire un "non-breaking space". Questo tipo di spazio ( ) tra due parole indica che sono due parole che non possono essere separate da un'interruzione di riga.
• Nella sezione "Proprietà del contenuto", ora è anche possibile configurare quanto segue:
  • Spessore del font: permette di selezionare tra le varianti normale o grassetto del font.
  • Spaziatura del paragrafo: fornisce controllo sulla spaziatura tra il ritorno a capo e l'interruzione di riga. Questa opzione ti permette quindi di aumentare o ridurre lo spazio tra i paragrafi.
• A differenza del blocco di Testo, questo elemento permette la generazione automatica di testo usando l'intelligenza artificiale.

Proprietà del contenuto

Puoi regolare le seguenti caratteristiche:

• Generazione automatica di testo basata su IA (accessibile solo per piani Pro).
• Impostazione del font: famiglia, spessore e dimensione.
• Impostazione del colore: colore del testo e colore dei link.
• Spaziatura: interlinea, spaziatura del testo, spaziatura tra paragrafi, margini (superiore, inferiore, destro e sinistro).
• Direzione e allineamento del testo
• Possibilità di nascondere questo blocco nella vista desktop o mobile.

Barra degli strumenti popup

Nell'editor stesso, facendo clic sul testo del paragrafo, appare una barra degli strumenti con le seguenti opzioni di configurazione:

• Lo stile del testo (grassetto, corsivo, sottolineato, barrato, opzioni di colore, ecc.)
• Inserire apici, pedici, emoticon, non-breaking spaces e caratteri speciali (icona Omega).
• L'opzione per massimizzare o minimizzare l'editor mentre stai modificando un testo
• Aggiungere diversi tipi di link (URL, email, file e chiamata). 
• Accesso a link speciali (vedere nel browser, annullare l'iscrizione, modificare dati e rinnovare il consenso GDPR)
• Accesso a contenuto personalizzato per personalizzare i tuoi invii con, ad esempio, il nome dei tuoi iscritti. In questo articolo ti spieghiamo nel dettaglio come utilizzare etichette personalizzate per ogni iscritto.

Font disponibili

Nella maggior parte degli editor di testo online tendiamo a trovare lo stesso insieme di font disponibili. Perché è così limitato e perché si possono scegliere solo questi font? Perché sono quelli che di solito sono installati sui nostri dispositivi. Questi sono i font normalmente conosciuti come font sicuri, in inglese "web safe".

L'insieme di font disponibili sui nostri computer è definito dai font inclusi nel nostro sistema operativo, da quelli aggiunti dalle applicazioni che installiamo sui nostri dispositivi e dai font scaricati manualmente nel tempo.

Come puoi immaginare, l'elenco dei font preinstallati può variare molto da un dispositivo all'altro. Tuttavia, esiste un insieme di font considerati comuni e, quindi, sicuri. A questi font ci riferiamo quando parliamo di font web sicuri. Sono "sicuri" perché sono disponibili su quasi tutti i dispositivi e "web" perché si usano quando si modificano documenti online.

In generale, troverai i font web sicuri nella parte superiore di qualsiasi strumento di modifica. Di solito sono i seguenti:

• Arial
• Georgia
• Helvetica
• Lucida Sans
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Ora, il problema con questi font è che sono solo una manciata e, pertanto, una selezione che limita il design e la personalizzazione di una campagna di email marketing. Una soluzione è  espandere l'insieme di font disponibili mediante l'uso di font web.

A cosa servono i font web?

I font web sono disponibili online e sono forniti da servizi come Google Fonts. Il tuo dispositivo li scarica solo quando è realmente necessario, senza che tu debba scaricarli uno per uno.

I font web esistono per aiutarci a  espandere le nostre opzioni di stile del testo e andare oltre i font standard web safe (e limitati). Esistono moltissimi siti web che ti permettono di scaricare font caricati da designer e terze parti, come ad esempio DaFont o MyFonts.

Sembra la soluzione perfetta per un editor come il nostro, ma purtroppo non tutti i client di posta elettronica li supportano.  Client di posta molto utilizzati e conosciuti, come ad esempio Outlook, Gmail e Yahoo!, non supportano alcuni font web e mostrano il testo con il loro font predefinito.

Per questa ragione, nel nostro strumento abbiamo creato gruppi di font equivalenti chiamati Font di riserva (in inglese, chiamati “font stacks”, o tradotto letteralmente "pile di font") usando fogli di stile a cascata che indicano automaticamente a qualsiasi programma di posta elettronica come tornare a un font sicuro quando quel client di posta elettronica non lo supporta. Questi gruppi funzionano come un elenco discendente di opzioni disponibili: cioè, se la prima non è disponibile, passa alla successiva.

Font di riserva nel nostro strumento

Nel nostro strumento, i font sono raggruppati in questo modo per offrire le migliori alternative possibili. Questo garantisce che il design non si rompa quando il font selezionato non è compatibile con il client di posta ricevente.

Le variabili che consideriamo nel costruire queste pile di font sono la forma e la dimensione del font. Di seguito puoi vedere l'elenco semplificato dei font di riserva disponibili nel nostro editor

Tieni presente che ci siamo concentrati sul design della tipografia e che non abbiamo aggiunto font troppo sofisticati o complessi. Ad esempio, abbiamo omesso il font “Lobster”, che non ha un font equivalente appropriato e sicuro.

Elenco

Il blocco elenco completa il blocco Paragrafo, poiché consente anche di inserire testo ma con il formato specifico di elenco. Per questo condividono opzioni di configurazione.

Di seguito sono indicate le opzioni specifiche di questo blocco.

Proprietà del contenuto

Per il blocco di tipo elenco è possibile configurare quanto segue:

• Tipo di elenco: permette di scegliere un elenco ordinato o non ordinato.
• Stile dell'elenco: permette di selezionare alcune opzioni di stile di base per l'elenco.
• Iniziare elenco da: è un'opzione accessibile se si sceglie un elenco ordinato. Permette di indicare da quale numero inizia la numerazione. È utile, ad esempio, nel caso in cui si utilizzino blocchi diversi per rappresentare lo stesso elenco.
• Spaziatura degli elementi dell'elenco
• Rientro degli elementi dell'elenco
• Generazione automatica di testo basata su IA (accessibile solo per piani Pro).

Immagine

Se vuoi aggiungere un'immagine, dovrai trascinare il blocco Immagine.

Proprietà del contenuto

Nelle proprietà di questo contenuto potrai scegliere alcune caratteristiche come la dimensione dell'immagine, l'allineamento, l'URL dell'immagine, il testo alternativo, aggiungere un link a cui indirizzi l'immagine, definire margini e nascondere nella vista mobile o desktop. Nell'opzione Cambia immagine potrai sostituirla con un'altra mantenendo questa configurazione.

Quando aggiungi uno di questi blocchi, in Cerca immagine avrai accesso alla tua libreria multimediale, dove potrai accedere a immagini che hai caricato in precedenza, caricare una nuova immagine o utilizzare il nostro motore di ricerca di immagini gratuite libere da diritti d'autore.

Ti consigliamo che le immagini abbiano la stessa larghezza dell'area di contenuto, cioè che non superino i 600 pixel. Nel caso in cui includessi una riga con due colonne con un'immagine ciascuna, ti consigliamo che anche la larghezza si adatti all'area di contenuto. 

Se vuoi maggiori informazioni su come ottimizzare le immagini per l'email marketing (formati, risoluzione e modalità colore), consulta il nostro articolo.

Pulsante

L'editor permette anche di aggiungere pulsanti per evidenziare i link più importanti della tua campagna.

Proprietà del contenuto

Nelle sue proprietà potrai selezionare l'URL che vuoi collegare, e la dimensione e gli stili del pulsante affinché tu possa integrarlo facilmente con il resto del design dell'email. Potrai anche scrivere il testo all'interno del pulsante e modificarlo come un testo normale.

Questo è il modo migliore per  collegare un tuo URL o collegare un file, invece di allegare un documento come un PDF. Le piattaforme di email marketing non permettono allegati direttamente nell'email poiché influiscono sulla deliverability delle campagne, aumentando molto la possibilità che i sistemi di posta rilevino il contenuto come spam; perciò puoi creare un pulsante, selezionare l'opzione Collega file e caricare l'allegato su Acumbamail. Il file sarà disponibile in una scheda aggiuntiva facendo clic sul pulsante. 

Questo link o collegamento può aprire una pagina web o un documento con un URL risultante, inviare un'email, effettuare una chiamata.

Puoi anche collegare un evento di calendario a cui i tuoi iscritti accedano tramite un iCalendar o file ICS. Basta creare il file ics (ci sono molte pagine dove puoi crearlo gratuitamente, cercando su Google senza problemi), scaricare il file risultante e aggiungerlo nell'opzione Collega file nello stesso modo in cui allegheresti un file allegato. I tuoi iscritti accederanno all'evento di calendario dalla loro applicazione corrispondente (Google Calendar o simili) e potranno confermare la loro partecipazione. 

Questo elemento permette anche la generazione automatica di testo basata su IA (accessibile solo per piani Pro).

Separatore

Un altro dei contenuti che puoi includere nel tuo template è un separatore, una linea per differenziare i diversi blocchi o sezioni della tua email.

Proprietà del contenuto

Come nei casi precedenti, il separatore è modificabile nello stile, colore e spessore.

Spazio

Questo blocco permette di aggiungere spazio separatore nel template. Anche se questo si può ottenere anche con il blocco Separatore (rendendo la linea trasparente), questo blocco specifico permette di procedere più rapidamente.

Proprietà del contenuto

La configurazione di questo blocco è molto semplice. Devi solo inserire i pixel che occuperà l'altezza del blocco.

Social

Il blocco Social ti permette di includere pulsanti con link ai tuoi profili sui social network.

Proprietà del contenuto

In questo blocco, potrai selezionare la collezione di icone che preferisci e collegarle ai profili dei tuoi social affinché siano accessibili ai tuoi iscritti.

Ma non solo potrai collegare direttamente i tuoi social network, potrai anche incentivare la condivisione della tua campagna email sui social network con un solo clic se selezioni l'opzione Partecipazione social quando aggiungi un'icona. 

Una volta selezionato il pulsante di partecipazione social, apparirà con l'etichetta Share nell'editor. Potrai inoltre aggiungere un testo con cui, per impostazione predefinita, venga condivisa la tua pubblicazione. Di seguito puoi vedere un esempio:

E così apparirebbe quando un iscritto fa clic sul pulsante di condivisione sui social network:

Se vuoi cambiare posizione al link (perché appaia dopo il testo), ricordati di mettere prima il testo e aggiungere l'etichetta [ShareOn] alla fine:

Infine, se vuoi aggiungere un link diretto al tuo WhatsApp Business, puoi consultare le informazioni in questo articolo. 

HTML

Il blocco HTML ti permetterà di incollare codice HTML nella sezione del template. Questa opzione è consigliata solo per utenti avanzati che sappiano utilizzare questo linguaggio in modo avanzato, poiché potrebbe interferire con un HTML corretto del template, il che è un fattore che può far finire nella cartella SPAM.

Proprietà del contenuto

Dovrai semplicemente incollare il tuo codice nella casella predisposta.

Tag HTML consentiti

Il nostro strumento correggerà automaticamente alcuni errori, come ad esempio i tag HTML lasciati aperti, ed eliminerà il codice che non può essere usato, come i tag Script o Iframe. Questi tag di codice non sono supportati dalla maggior parte dei client di posta elettronica e possono causare problemi nella deliverability della tua campagna o rischi di sicurezza per l'editor e le applicazioni che lo eseguono.

Elenco dei tag consentiti

a, abbr, acronimo, indirizzo, area, b, bdo, grande, blockquote, pulsante, titolo, centro, citazione, codice, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, modulo, h1, h2, h3, h4, h5, h6, i, ins, kbd, etichetta, legenda, li, mappa, menu, ol, optgroup, opzione, p, pre, q, s, samp, selezionare, piccolo, span, strike, forte, sub, sup, tabella, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var.

Elenco degli attributi consentiti

attributi generali: stile, id, classe, data-*, titolo a: href, nome, target img: allinea, alt, altezza del bordo, hspace, src, vspace, larghezza, usemap table: align, bgcolor, border, cellpadding, cellspacing, larghezza tbody: allinea, valign td: allinea, bgcolor, colspan, altezza, rowspan, valign, larghezza tr: allinea, bgcolor, valign tfoot: allinea, valign th: allinea, bicolor, colspan, altezza, rowspan, valign, larghezza thead: allinea, align li: tipo mappa: nome area: alt, coords, href, forma, target.

Video

Con il blocco Video potrai collegare un video di YouTube o Vimeo, affinché nell'email venga mostrata un'immagine in evidenza che porti l'utente a questo contenuto.

Proprietà del contenuto

Dovrai incollare l'URL del video, e verrà generata automaticamente un'immagine in evidenza che sarà collegata a questo URL. Per modificare l'immagine in evidenza, dovrai modificarla sul video originale ospitato su YouTube o Vimeo.

Consigliamo che la larghezza del video si adatti alla larghezza dell'area di contenuto, cioè che non superi i 600 pixel. Se includi colonne, il video dovrebbe adattarsi alla larghezza della colonna. 

Icone

Puoi anche aggiungere icone a partire da immagini che hai caricato in precedenza su Acumbamail o selezionarne una già disponibile. 

Proprietà del contenuto

Quando hai trascinato il blocco icona, fai clic su Aggiungi icona in Proprietà del contenuto:

In seguito, potrai selezionare un'icona che hai aggiunto di recente alla galleria di Acumbamail facendo clic sul pulsante blu Cambia immagine.

Inoltre, nel pannello di destra potrai cambiare la dimensione dell'icona, la sua posizione e il suo allineamento, tra altri aspetti. 

Menu

Puoi aggiungere un menu per facilitare la navigazione nel template email o evidenziare un determinato aspetto o link. 

Proprietà del contenuto 

Una volta trascinato il menu, nella sezione Proprietà del contenuto a destra, potrai iniziare ad aggiungere sezioni incluse nel tuo menu o indice facendo clic su Aggiungi elemento.

Per ogni elemento del menu potrai modificare:

• Il testo 
• Il tipo di link (aprire pagina web o collegare file, inviare email o effettuare chiamata)
• Il target, cioè se il link si aprirà in una nuova scheda o in quella attuale 

Se aggiungi diversi elementi al menu, puoi cliccarci sopra per riorganizzarli:

Più in basso potrai cambiare elementi globali del menu come il font, il colore del font e dei link o se vuoi che il menu abbia un orientamento verticale o orizzontale. 

Aggiungere un menu per il mobile 

Per migliorare la navigazione e l'usabilità su dispositivi mobili, puoi anche aggiungere quello che è conosciuto come menu hamburger. 

Il nome menu hamburger fa riferimento all'icona rappresentata da tre linee orizzontali che indica un menu a discesa. Questo tipo di menu a discesa viene utilizzato principalmente nelle versioni mobili delle pagine per risparmiare spazio sullo schermo.

Per includere un menu hamburger, devi attivarlo dalle proprietà del contenuto. Una volta attivato, potrai personalizzarlo come preferisci. 

Conto alla rovescia

Per i nostri utenti con piani PRO esiste l'opzione di aggiungere un conto alla rovescia.

Una volta trascinato il blocco conto alla rovescia, accederai a una finestra popup per configurare il tuo conto alla rovescia:

• Tipo di timer: per impostare una data determinata (potrai selezionare il fuso orario e la data), che inizi all'apertura dell'email o quando si inizia a inviare la campagna 
• Stile del timer: normale, a forma di cerchi o con blocchi 
• Dimensione e colori del timer 
• Lingua, potrai selezionare quella che vuoi e le modifiche verranno applicate al momento 
• Font del testo e delle cifre 
• Immagine di sfondo 
• L'opzione di mostrare un'immagine quando la data termina 

Una volta effettuate tutte le modifiche pertinenti, puoi fare clic su Salva e chiudi.

GIF

Puoi includere GIF caricandole dal tuo computer come una normale immagine. Se carichi GIF proprie, ricordati di ottimizzarle correttamente: lo standard di solito è di circa 600 pixel di larghezza. Disponiamo anche di un motore di ricerca di GIF.

Proprietà del contenuto

Ha anche proprietà modificabili come il resto delle immagini.

Sticker

Puoi anche aggiungere sticker animati che puoi cercare direttamente nel nostro motore di ricerca.

Proprietà del contenuto

Puoi modificarli come qualsiasi altra immagine e includere un URL collegato a essi.

Righe

In questa sezione troverai diverse categorie di righe che potrai trascinare e includere nel tuo design.

Righe vuote

Questa categoria include righe senza contenuto, ma con diversi layout che ti permetteranno di strutturare il tuo contenuto in blocchi. Potrai selezionare una sola riga che occupi tutta la larghezza, due colonne di uguale dimensione, due colonne che occupino ciascuna una determinata percentuale, ecc.

Il massimo di colonne che puoi aggiungere è sei. Tieni presente che il contenuto che aggiungi sarà sempre subordinato alla struttura della riga in cui viene incluso. Questa struttura è responsive, quindi la larghezza si adatterà ai dispositivi di visualizzazione.

Righe predefinite

Se disponi di un piano a pagamento, nella scheda Righe troverai un menu a discesa aggiuntivo con una serie di categorie.

Troverai righe predefinite nelle seguenti categorie:

• Intestazione. Qui troverai righe con distribuzione di contenuti utili per l'intestazione delle tue email o landing page.
• Contenuto. Qui troverai righe con distribuzione di contenuti utili per il corpo o parte centrale delle tue email o landing page.
• Piè di pagina. Qui troverai righe con distribuzione di contenuti utili per la parte finale delle tue email o landing page.

Puoi utilizzare queste righe predefinite come punto di partenza (sia per struttura sia per contenuti), dove dovrai solo personalizzare i colori, le immagini, i testi e i link già posizionati.

Salvare righe personalizzate

Oltre alle righe predefinite, hai la possibilità di creare e salvare le tue righe. Una volta salvata una riga, questa sarà riutilizzabile nel resto dei tuoi template.

Per salvare una riga, dovrai solo selezionarla e fare clic sul pulsante di salvataggio (il primo dei tre pulsanti nell'angolo superiore destro).

Questo aprirà un popup in cui dovrai scegliere il nome della tua riga e decidere sotto quale categoria verrà salvata. Le categorie disponibili sono: Intestazione, Contenuto, Piè di pagina e Altri.

Inoltre, devi decidere se vuoi che questa riga sia sincronizzata o meno. Che cosa significa che una riga sia sincronizzata? Significa che, una volta salvata la riga, se la aggiungi in x design di template email diversi, quando modifichi il contenuto della riga e lo salvi (in uno qualsiasi di questi template), le modifiche si propagheranno al resto dei template email in cui la riga è inclusa.

Una volta salvata, se selezioni la sua categoria potrai trovarla insieme al resto delle righe predefinite.

Devi tenere presente che questa funzionalità non è disponibile nel piano gratuito. Per i piani a pagamento, a seconda del piano specifico, potrai salvare un determinato numero di righe. Se hai raggiunto il limite di righe salvate, l'azione di salvataggio non potrà essere completata.

Modificare una riga salvata

Una volta salvata una riga, potrai trascinarla per aggiungerla a qualsiasi tuo template, purché siano dello stesso tipo. Questo significa che le righe salvate per i template email non ti appariranno nell'editor di pagine del sito web e viceversa.

Qui ci sono due scenari possibili:

• Che la riga sia una riga normale (non sincronizzata), oppure
• Che la riga sia una riga sincronizzata

Nel caso di una riga riutilizzabile normale, partendo da una riga salvata, se la trascini nell'editor e applichi modifiche su di essa hai due opzioni:

• Salvare una nuova riga con le modifiche. In questo modo continuerai ad avere disponibile la riga originale (la prima che hai salvato) e questa nuova versione separatamente. Per farlo dovrai selezionare "No" nell'opzione Sovrascrivere riga esistente? (opzione predefinita).
• Sovrascrivere la riga originale con le modifiche. In questo modo potrai cambiare il nome della riga, spostarla di categoria oppure aggiornarne il contenuto. Per farlo dovrai selezionare "Sì" nell'opzione Sovrascrivere riga esistente?

Nel caso di una riga riutilizzabile sincronizzata, partendo da una riga salvata, se la trascini nell'editor e provi a modificarla, vedrai che non te lo permette, poiché gli elementi che la compongono sembrano essere bloccati. Devi fare clic sull'area generale della riga e premere il pulsante di modifica riga (matita) oppure il pulsante "Modifica riga sincronizzata" nelle opzioni a destra.

Questo aprirà un popup con due opzioni:

• Puoi scegliere di modificare la riga sincronizzata in modo che, effettivamente, aggiornandola e salvando le modifiche, queste si propaghino al resto dei template in cui la riga è presente. Per farlo scegli l'opzione "Modifica riga sincronizzando modifiche".
• Potresti aver bisogno di applicare le modifiche solo in questo template specifico e non nel resto dei template in cui è presente la riga. In questo caso puoi scegliere di scollegare questa riga dal resto. Per farlo scegli l'opzione "Scollega riga".

Nel caso in cui modifichi la riga applicando la sincronizzazione, vedrai che l'editor si ricarica per mostrare solo il contenuto della riga che vuoi modificare. In questa modalità, puoi applicare tutte le modifiche che ritieni e fare clic sul pulsante "Salva riga".

Ogni volta che salvi la riga, ti permetterà di aggiornare il nome assegnato alla riga, così come la categoria in cui è inclusa.

Una volta terminato di applicare le modifiche, puoi fare clic sul pulsante "Torna al design" per recuperare il contesto precedente e poter continuare a modificare il contenuto del tuo design email.

Potrai verificare che nel template email iniziale si riflettano le modifiche applicate alla riga modificata e, quando aprirai qualsiasi altro template email che contenga anch'esso questa riga, le modifiche saranno presenti.

⚠️ IMPORTANTE: Questa azione di salvataggio comporta un processo di sincronizzazione della riga in tutti i template email in cui è presente. Se sono molti template, anche se vedi che l'azione di salvataggio viene confermata, tieni presente che può impiegare alcuni minuti per applicare la sincronizzazione in tutti i template.

Eliminare una riga salvata

Puoi eliminare le righe che non ti risultano più utili. Per farlo bisogna fare clic sul pulsante Elimina che appare nell'angolo inferiore destro di ogni riga. Una volta fatto clic e confermata l'azione, la riga sarà eliminata.

Nel caso in cui elimini una riga sincronizzata inclusa in uno o più template, questo interromperà il processo di sincronizzazione.

Aggiungere un colore o un'immagine di sfondo al tuo template

Se vuoi aggiungere uno sfondo determinato al tuo template, che sia un altro colore piatto o un'immagine di sfondo, tieni presente che dovrai modificare lo sfondo per ogni riga, poiché funzionano come blocchi indipendenti. I passaggi che devi seguire sono: 

• Fare doppio clic su una riga specifica (dai lati)
• Se vuoi cambiare il colore attuale con un altro, selezionalo a destra, in Colore di sfondo della riga all'interno di Proprietà della riga 
• Se vuoi cambiare lo sfondo con un'immagine specifica, attiva l'opzione Immagine di sfondo della riga. Poi seleziona l'immagine con il pulsante Cambia immagine. In questa opzione potrai scegliere che l'immagine di sfondo occupi l'intera larghezza (consigliato), appaia ripetuta come un mosaico o resti centrata. Se vuoi che tutte le righe abbiano questo sfondo specifico, dovrai ripetere il processo riga per riga. 

Impostazioni

In questa sezione potrai configurare le impostazioni generali che influiscono su tutto il template. 

Potrai definire la larghezza massima dell'area di contenuto, se vuoi che l'area di contenuto sia allineata a sinistra o centrata, il colore di sfondo, il colore dell'area di contenuto, il font predefinito e il colore dei link. Tutte queste proprietà potranno essere modificate individualmente in ogni modulo, ma quelle che selezioni qui saranno quelle che appariranno per impostazione predefinita. 

Anteprima / Mostra struttura

In questa sezione, nel margine superiore sinistro dell'editor, potrai trovare due pulsanti:

Anteprima

Se selezioni Anteprima, potrai visualizzare come si vedrà il tuo template su desktop e mobile. Questa è un'anteprima generica. 

Se hai bisogno di visualizzare l'anteprima del template su diversi dispositivi, browser o client di posta specifici, potrai farlo nel passaggio 5 della creazione della campagna.

Potrai anche apportare modifiche mentre vedi la vista desktop e mobile nell'opzione più in basso.

Mostra struttura

Se selezioni Mostra struttura, potrai vedere il layout con tutti i blocchi mentre modifichi il template.

Responsive per dispositivi mobili

Quando utilizziamo il termine «responsive» (adattabile) ci riferiamo alla capacità di adattamento di un design per essere visualizzato correttamente su diversi dispositivi, dai computer desktop a tablet e cellulari.

Oltre all'opzione di mostrare un'anteprima adattata a diversi dispositivi vista sopra, nell'editor stesso hai a disposizione strumenti specifici per facilitare questa adattabilità.

Vedere versione desktop e mobile

Oltre a poter accedere a un'anteprima del tuo template, puoi vedere come risulta sia nella versione desktop sia mobile in tempo reale, mentre lo stai modificando.

Nascondere su desktop o mobile

Tutti i blocchi di contenuto dispongono dell'opzione di essere nascosti sia nella versione desktop sia nella versione mobile. Potrai utilizzare questa opzione facendo clic su un blocco di contenuto, nel lato inferiore destro di Opzioni modulo.

Questa opzione ci dà la possibilità di duplicare il nostro contenuto e assicurarci che sia totalmente responsive. Ad esempio, se vediamo che un testo non si sta adattando correttamente alla versione mobile, possiamo sempre duplicare tale testo, nasconderne ciascuno su un dispositivo e adattare quello che verrà mostrato nella versione mobile per garantirne la corretta visualizzazione.

Impilare o meno su mobile

Questa opzione è disponibile affinché le colonne vengano visualizzate allo stesso modo sui dispositivi mobili e nella versione desktop. Va sottolineato che quante più colonne avranno le nostre righe mantenendo l'opzione “Non impilare su mobile” disattivata, più comprometteremo l'adattabilità del nostro design, specialmente nei moduli che contengono testo.

Per questo questa opzione è sempre attivata per impostazione predefinita e la nostra raccomandazione è che rimanga così. L'opzione migliore è che, anche se abbiamo realizzato un design specifico nella versione desktop, la versione mobile abbia un design diverso, in cui tutto il contenuto si impila e appare uno dopo l'altro, senza distinzione tra colonne, per garantire una migliore visualizzazione. 

Buone pratiche per evitare la cartella SPAM

Sia l'HTML sia il contenuto che includi nell'email hanno un'incidenza diretta sulla deliverability delle tue campagne. Per questo, quando modifichi il tuo template con l'editor, è opportuno tenere presenti queste buone pratiche per evitare errori che possano farlo arrivare nella cartella di posta indesiderata.

Costruzione dell'HTML

Tag "alt" nelle immagini

Tutte le immagini devono includere il rispettivo tag alt="contenuto_dell'immagine". Inoltre è molto utile nei gestori di email che non mostrano le immagini finché il destinatario non lo indica, poiché puoi includere un testo che si vedrà fin dall'inizio e che successivamente verrà sostituito dall'immagine. Ma attenzione, poiché includere un testo che contenga determinate parole, che elenchiamo più avanti, può far sì che la tua newsletter vada direttamente in SPAM.

Immagini troppo grandi o pesanti

Assicurati che le immagini delle tue email non superino i 500 kb; per questo, è consigliabile utilizzare formati come .jpg o .png, questi ultimi nel caso di immagini che richiedano trasparenza.

Anche se la tua immagine è leggera, assicurati che non abbia dimensioni molto grandi. Immagini di grandi proporzioni fanno guadagnare punti negativi ai tuoi invii. Come riferimento non superare i 600px x 400px, essendo questo già un limite pericoloso. Nel caso in cui sia necessario che la tua immagine abbia queste dimensioni, dividila in diversi "blocchi", che compongano le diverse parti di un puzzle formato da tabelle.

Rapporto immagine / testo

Includere una proporzione spaziale di immagini maggiore rispetto al testo è anch'esso un elemento negativo. Assicurati che la quantità spaziale di testo superi sempre la quantità spaziale di immagini. Evita di usare una dimensione del carattere eccessivamente piccola.

In questo caso non viene preso in considerazione il colore di sfondo di una tabella o di uno dei suoi componenti, quindi evita di utilizzare immagini se servono per riempire di un colore una parte della tabella.

Contenuto dell'HTML

Redazione del messaggio

Devi cercare di ridurre al minimo l'uso delle maiuscole nel tuo invio, così come le ripetizioni nei punti esclamativi (!!!) e interrogativi (???). Cerca di non duplicare contenuto all'interno del tuo invio, né ripetere frasi o parole più dello strettamente necessario, ancor più se si tratta di somme di denaro o simboli di valuta. Naturalmente, niente parolacce o parole inappropriate.

Cerca di evitare una redazione troppo commerciale: un tocco personale sarà sempre un punto a tuo favore. Puoi ottenerlo usando come mittente un'email personale, aggiungendo un post scriptum (la parte più letta all'interno di un'email) nel tuo template e usando un saluto personalizzato.

Infine, rivedi sempre con attenzione il tuo template per evitare qualsiasi errore ortografico nella redazione.

Generazione di testo con intelligenza artificiale

In alcuni blocchi è possibile generare automaticamente testi con l'aiuto dell'intelligenza artificiale. Questo è disponibile solo per utenti Pro e nei seguenti blocchi:

• Titolo
• Paragrafo
• Elenco
• Pulsante

Per generare il testo, basta andare nelle "Proprietà del contenuto" del blocco e fare clic sul pulsante "Scrivi con IA".

Questo apre una nuova vista con una casella di testo, dove puoi inserire una richiesta, a partire dalla quale verrà generato il testo (facendo clic sul pulsante "Genera").

Bisogna tenere presente che tutte le generazioni prendono come riferimento le richieste precedenti effettuate. Per reimpostare la cronologia, puoi fare clic su "Ricomincia con un nuovo tema".