Come usare l'Email Builder e il suo Editor Inline
Semplifica la creazione delle tue email con l'efficiente editor inline dell'Email Builder per Template e Campaign. Questo strumento offre un'esperienza dinamica e intuitiva, garantendo output di qualità con maggiore velocità e praticità.
Cos'è l'Editor Inline dell'Email Builder?
L'Editor Inline dell'Email Builder è uno strumento potente integrato nella piattaforma Template e Campaign che ti permette di creare e personalizzare email con efficienza e semplicità senza precedenti. Presenta un'interfaccia intuitiva che elimina la complessità del design e della formattazione delle email.
L'Editor Inline sfrutta il principio di editing "What You See Is What You Get" (WYSIWYG). Immagina di stare scrivendo un'email e di decidere di mettere in grassetto una frase, inserire un'immagine dopo un paragrafo o cambiare il colore di un'intestazione. Mentre apporti queste modifiche nell'editor, vengono immediatamente riflesse, esattamente come appariranno nell'email finale. Questo ti offre un'anteprima in tempo reale e un'esperienza di editing diretta.
Questo strumento supporta varie funzionalità di personalizzazione: stile del contenuto con più formati di intestazioni e paragrafi, font supportati, dimensioni del testo da 8px a 96px, colore del testo tramite codice hex, formattazione grassetto/corsivo/sottolineato/barrato e hyperlink. Supporta inoltre valori personalizzati e generazione di contenuti assistita dall'IA.
Nota: Per mantenere l'uniformità nella struttura delle tue email, abbiamo implementato un aggiornamento del padding predefinito. Ora puoi gestire la spaziatura intorno al contenuto. I valori predefiniti sono:
Top Padding: 12
Bottom Padding: 12
Left Padding: 24
Right Padding: 24
Quali sono alcuni casi d'uso pratici per questa funzionalità?
- Campaign email promozionale: Usa colori vivaci in linea con il tuo brand, font accattivanti e immagini di alta qualità. Considera un layout a colonna singola per la leggibilità mobile e posiziona il pulsante CTA in modo prominente.
- Newsletter stagionale: Il layout multi-sezione è ideale. Ogni sezione può contenere una diversa categoria di prodotto con immagini ottimizzate e brevi descrizioni.
- Campaign di re-engagement: Massimizza le funzionalità di personalizzazione. Usa un layout a colonna singola con colori caldi e contenuto dinamico per inserire il nome del destinatario.
- Email per carrello abbandonato: Un layout a due colonne funziona bene, con un lato per i prodotti nel carrello e l'altro per un promemoria e un'offerta speciale.
- Invito a un evento: Layout a colonna singola e design minimalista con CTA chiaro. Considera un componente timer per il conto alla rovescia (codice personalizzato).
- Serie di email educative: Usa un layout a colonna singola o multi-sezione con testo, immagini e video. Usa elenchi puntati per i punti chiave.
- Email di apprezzamento clienti: Molto personalizzata. Usa contenuto dinamico per includere il nome del cliente e dettagli specifici sulla sua interazione con la tua azienda.
- Email di follow-up post-acquisto: Layout semplice a colonna singola. Usa contenuto dinamico per dettagli sull'ordine e suggerimenti di prodotti correlati.
- Sequenza di onboarding: Serie di email con layout a colonna singola, testo chiaro e immagini per guidare il nuovo utente passo-passo.
- Lancio di prodotto: Layout a colonna singola con colori vivaci, font grandi per i dettagli essenziali e immagini di prodotto di alta qualità.
- Annuncio webinar: Layout a colonna singola con titolo prominente, pulsante CTA e contenuto dinamico in base agli interessi del destinatario.
- Digest settimanale: Layout multi-sezione con ogni sezione contenente un riepilogo di contenuti diversi e un CTA "Read More" o "Watch Now".
- Invito a un Survey: Layout a colonna singola con spiegazione chiara dello scopo e pulsante CTA prominente. Design semplice e testo conciso.
- Richiesta di donazione: Layout a colonna singola con contenuto coinvolgente, immagini della causa e CTA in grassetto per donare.
- Richiesta di testimonianza: Email semplice e personale a colonna singola con CTA diretto.
- Promemoria rinnovo Membership: Layout multi-sezione: una parte per il promemoria del rinnovo, l'altra per evidenziare i vantaggi.
- Invito beta tester: Layout a colonna singola con titolo convincente, breve descrizione e CTA chiaro per aderire.
- Revisione di fine anno: Layout multi-sezione con riepilogo per mese o trimestre. Usa grafici e immagini.
- Comunicazione interna: Layout a colonna singola con struttura chiara (annunci, aggiornamenti, promemoria).
- Email di cross-sell/upsell: Layout a colonna singola o multi-sezione con immagini dei prodotti, brevi descrizioni e CTA per acquistare.
Principali vantaggi dell'Editor Inline dell'Email Builder
- Coerenza visiva: Puoi mantenere un aspetto uniforme impostando il padding predefinito a Top 12, Bottom 12, Left 24 e Right 24 per tutte le email.
- Supporto font personalizzati: Supporta Arial, Georgia, Verdana e altri font per allineare lo stile delle email all'estetica del tuo brand.
- Stile del testo preciso: Opzioni come grassetto, corsivo, sottolineato e barrato per enfatizzare i punti critici.
- Opzioni colore flessibili: I codici hex forniscono un controllo preciso sui colori di testo ed evidenziazione.
- Aggiunta di hyperlink: Aggiungi hyperlink a parole o frasi per consentire ai lettori di accedere direttamente ai contenuti correlati.
- Creazione di contenuti assistita dall'IA: Content AI riduce il tempo di scrittura e editing suggerendo automaticamente testo in base ai tuoi input iniziali.
- Formattazione del testo: L'editor supporta copia-incolla da altre fonti rimuovendo la formattazione originale, così puoi applicare lo stile della tua email.
Come usare l'Email Builder e il suo Editor Inline
- Vai su "Marketing" > "Emails" > "Templates"
- Qui puoi creare un nuovo template o modificare uno esistente.
Navigare nella nuova interfaccia utente
Accedendo all'Email Builder, sarai accolto da un'interfaccia utente elegante e intuitiva. In cima troverai una barra degli strumenti con diverse funzionalità:
Il pulsante "Add Elements" ti permette di introdurre nuovi contenuti nella tua email, da testo e immagini a strutture più complesse.
L'opzione "Manage Elements" offre una panoramica di tutti gli elementi nella tua email, permettendoti di selezionarli e modificarli facilmente.
L'impostazione "Appearance" ti permette di controllare lo stile globale della tua email, inclusi colore di sfondo, Divider, stile CSS personalizzato e formattazione mobile.
Queste funzionalità ti danno il pieno controllo sul design della tua email, dai singoli componenti all'aspetto generale.
Aggiungere elementi
Cliccando su "Add Elements" viene visualizzato un elenco completo dei tipi di contenuto aggiungibili. Ecco una breve descrizione di ciascuno:
Text:
Questo versatile elemento può essere usato per intestazioni, paragrafi, didascalie e altro. Con l'editor inline, puoi perfezionare ogni aspetto del testo, dallo stile del font al colore, all'allineamento. Per il testo di intestazione (H1–H4), seleziona l'intestazione e usa il pulsante Bold (B) nella barra degli strumenti per attivare o disattivare il grassetto mantenendo lo stesso livello di intestazione.
Image:
Se vuoi includere foto, grafici o qualsiasi altro contenuto visivo, l'elemento Image è lo strumento di cui hai bisogno. Puoi caricare immagini direttamente dal tuo computer o collegarle da una fonte esterna.
Image Upload: Carica un'immagine direttamente dal tuo dispositivo. La dimensione massima di caricamento è 10MB.
Image URL: In alternativa, collega un'immagine da una fonte esterna o dalla Media Library del tuo CRM incollando l'URL nel campo apposito.
Alt Text: Migliora l'accessibilità dell'email per i destinatari che usano screen reader o quando l'immagine non si carica.
Link (opzionale): Inserisci un link nel campo apposito se vuoi che l'immagine reindirizza a un URL specifico quando viene cliccata.
Width e Height: Imposta valori in pixel specifici o seleziona "Set height and width to auto" per il dimensionamento automatico.
Padding: Controlla lo spazio intorno all'immagine impostando i valori per i lati superiore, inferiore, sinistro e destro.
Alignment: Imposta l'allineamento dell'immagine: "Center", "Left" o "Right".
Layout di modifica flessibile (pannello sinistro/destro)
Ancora il pannello di modifica a destra (o torna a sinistra) per lavorare in modo più efficiente — specialmente quando usi Email AI affiancato alle modifiche manuali.
Cosa fa (perché è utile)
Positionare il pannello a destra crea un'area di lavoro divisa naturale che velocizza l'iterazione e mantiene il focus sui risultati.
Prerequisito
Per vedere Email AI e il controllo di cambio pannello nell'editor, abilita Email AI nelle Impostazioni Agency Labs → funzionalità sub-account.
Come cambiare la posizione del pannello
-
Apri Marketing → Emails, poi apri una Campaign o un Template in modalità modifica.
-
Attiva Email AI (se prevedi di usare l'IA in affiancamento).
-
Clicca sul controllo di cambio pannello nell'editor per ancorare il pannello a destra o spostarlo a sinistra.
-
Continua a modificare con Email AI e il canvas visibili insieme.
Suggerimento: Usa il pannello ancorato a destra quando prevedi molti suggerimenti dall'IA; passa a sinistra per parità con altri strumenti se preferisci.
Tap to unmute
HITLEAD 99.1K subscribers
Altri tutorial dalla community
Button:
Migliora l'interazione dell'utente con l'elemento Button. Puoi collegarlo a una pagina web, avviare un download o attivare qualsiasi altra azione basata su clic.
Button Text: Inserisci il testo da visualizzare sul pulsante.
Font e Size: Scegli il font e la dimensione più adatti all'estetica della tua email.
Font Color: Seleziona il colore del testo del pulsante con codice hex, es. "#ffffff" per il bianco.
Actions:
- URL: Indirizza il destinatario a una pagina web specifica.
- Mail: Apre il client email del destinatario per comporre un nuovo messaggio.
- File Download: Avvia il download di un file tramite URL diretto.
- Telephone: Avvia una telefonata al numero inserito (ottimo per utenti mobile).
- Other: Per azioni non coperte dalle categorie precedenti.
Alignment: "Left", "Center" o "Right".
Total Width: Estende il pulsante per tutta la larghezza del contenitore.
Background Color: Colore di sfondo del pulsante tramite codice hex.
Valori personalizzati nei campi colore (rendering in tempo reale)
Puoi usare Custom Values negli input colore (ad esempio Background Color, Body Color o Button Color). Quando inserisci un token Custom Value, il builder applica il colore immediatamente sul canvas. Non devi passare alla modalità Preview per confermare le modifiche ai colori.
Border Radius: Personalizza l'arrotondamento degli angoli del pulsante. Un valore di "75" darà una forma ovale.
Padding: Spazio tra il testo del pulsante e il bordo, regolabile per i quattro lati.
Divider:
L'elemento Divider introduce separazioni nette tra le diverse sezioni della tua email. Personalizza colore, larghezza e stile.
Height: Spessore della linea. Un valore più alto produce una linea più spessa.
Width (%): Estensione orizzontale del Divider espressa come percentuale del contenitore.
Line Type: "Solid", "Dashed" o "Dotted".
Alignment: "Left", "Center" o "Right".
Color: Codice hex per il colore della linea, es. "#FED7E2" per un rosa tenue.
Padding: Spazio tra il Divider e gli altri elementi, regolabile per i quattro lati.
Social:
L'elemento Social ti permette di includere facilmente icone collegate a varie piattaforme social.
Social Items: Aggiungi piattaforme come Facebook, Instagram e Twitter inserendo handle o URL del profilo.
Icon Styles: Scegli tra stili, forme e design diversi.
Display: "Icon", "Text" o "Icon and Text".
Align: "Left", "Center" o "Right".
Font: Font per il nome della piattaforma (con modalità "Icon and Text").
Font Color: Colore delle icone tramite codice hex.
Size: Dimensione delle icone.
Space: Spazio tra le icone social.
Padding: Spaziatura intorno alla sezione icone, regolabile per i quattro lati.
Footer:
Usa l'elemento Footer per includere informazioni essenziali come dettagli di contatto, indirizzo aziendale o link per annullare l'iscrizione.
Modifica testo: Clicca sul testo del footer per attivare l'editor inline e modificarlo direttamente.
Font e stile: Modifica font, dimensione e colore del testo selezionato tramite la barra degli strumenti.
Link: Seleziona il testo, clicca l'icona "link" e inserisci l'URL per aggiungere hyperlink.
Allineamento e spaziatura: Allinea a sinistra, destra o centro e controlla l'interlinea.
Code:
L'elemento Code ti permette di inserire codice HTML personalizzato direttamente nella tua email per layout e componenti avanzati.
Nota: Il blocco Code è destinato agli utenti esperti di HTML. Ti consigliamo di familiarizzare con i fondamenti dell'HTML prima di usare questa funzionalità. I client email possono avere diversi livelli di supporto per HTML e CSS, quindi testa sempre le tue email prima di inviarle.
Video:
Inserisci un elemento Video e collegalo al tuo contenuto video ospitato per coinvolgere i destinatari con contenuti multimediali.
Video Type: YouTube, Vimeo, Wistia o HTML 5 video.
Video URL: URL diretto al video sulla piattaforma selezionata.
Video Thumbnail: Immagine visualizzata prima della riproduzione. Caricabile (max 10MB) o tramite URL.
Width e Height: Dimensioni del player video. Opzione "auto" disponibile.
Play Button Size: Small, Medium o Large.
Play Button Opacity: Visibilità del pulsante di riproduzione.
Padding: Spazio intorno al player video, regolabile per i quattro lati.
Shopping Cart:
L'elemento Shopping Cart è utile per includere dettagli dei prodotti, prezzi e link diretti al tuo negozio online, ricordando ai clienti i prodotti di interesse.
Padding: Spazio intorno al contenuto del carrello, regolabile per i quattro lati.
Font: Font per il testo nel carrello.
Text Color: Colore del testo nel carrello.
Background Color: Colore dello sfondo del carrello.
Per ogni prodotto nel carrello vengono visualizzati:
Product Name: Nome del prodotto come appare sul tuo sito.
Price: Prezzo individuale del prodotto.
Quantity: Numero di unità scelte dal cliente.
Line Price: Prezzo totale per quella riga (Prezzo × Quantità).
RSS Header:
Il blocco RSS Header ti permette di popolare dinamicamente i tag <channel> del tuo RSS Feed nella tua Campaign email.
Ecco i tag e i corrispondenti valori personalizzati:
<title> corrisponde a {{rss_feed.title}}
<description> corrisponde a {{rss_feed.description}}
<link> corrisponde a {{rss_feed.url}}
<lastBuildDate> corrisponde a {{rss_feed.date}}
Puoi scegliere tra "Basic" e "Custom" quando usi il blocco RSS Header.
"Basic" aggiungerà testo non modificabile nell'editor come:
<h1 class="h1">{{rss_feed.title}}</h1> {{rss_feed.description}}<br /> <br />
"Custom" aggiungerà testo modificabile come:
Updates from {{rss_feed.url}} <h1>{{rss_feed.title}}</h1> <strong>{{rss_feed.description}}</strong><br /> <br /> <strong>In the {{rss_feed.date}} edition:</strong><br />
Queste variabili <channel> RSS possono essere utilizzate anche nel campo oggetto della tua Campaign email.
RSS Items:
L'elemento "RSS Items" funziona come un segnaposto di contenuto dinamico che popola il contenuto dal feed RSS nella tua Campaign email.
Opzioni di modifica RSS disponibili:
Excerpts: Mostra solo un riepilogo o estratto del contenuto originale di ogni elemento RSS.
Excerpts with Image: Come Excerpts, ma include anche un'immagine associata all'elemento RSS.
Title: Mostra solo il titolo di ogni elemento RSS.
Full Content: Importa l'intero contenuto di ogni elemento RSS nell'email.
Custom: Scegli quali informazioni del feed RSS includere e come visualizzarle.
Attributi dinamici importabili per ogni RSS item:
Titolo del post ({{rss_item.title}})
Riepilogo o descrizione ({{rss_item.content}})
URL diretto al post originale ({{rss_item.url}})
Data di pubblicazione ({{rss_item.date}})
Autore del post ({{rss_item.author}})
Puoi anche regolare il padding (superiore, inferiore, sinistro, destro) e scegliere se includere un'immagine da ogni post.
Layouts:
I Layout determinano la struttura del contenuto della tua email. Hai varie opzioni, da semplici layout a colonna singola a strutture più complesse.
1: Struttura a colonna singola. Ottimo per la leggibilità, specialmente su dispositivi mobili.
2: Struttura a due colonne. Ideale per visualizzare due gruppi di contenuti affiancati.
1/3 : 2/3 e 2/3 : 1/3: Due colonne diseguali. Ottime per evidenziare un contenuto più dell'altro.
1/4 : 3/4 e 3/4 : 1/4: Una colonna occupa 1/4 dello spazio e l'altra 3/4. Utile quando un contenuto è significativamente più importante.
4: Struttura a quattro colonne uguali. Utile per presentare più contenuti di uguale importanza affiancati.
Per aggiungere un elemento alla tua email, trascinalo sul canvas. Quando selezioni un elemento per la modifica, si aprirà l'Editor Inline con numerose opzioni di personalizzazione.
Gestione di testo e formattazione
L'editor inline ti permette di gestire facilmente testo e formattazione. Quando evidenzi una porzione di testo, diventano disponibili diverse opzioni.
Puoi cambiare il tipo di intestazione.
Seleziona un font diverso, regola la dimensione del font e modifica il colore del testo.
Sono disponibili anche opzioni per grassetto, corsivo, sottolineato e barrato.
Puoi aggiungere hyperlink al tuo testo controllando testo visualizzato e URL di destinazione.
Add/Edit Link: Aggiunge un nuovo hyperlink o modifica uno esistente.
Link URL: Indirizzo web di destinazione del link. Verifica sempre che sia corretto e funzionante.
Text to Display: Testo cliccabile visibile nell'email. Mantienilo conciso e descrittivo del contenuto collegato.
Title: Attributo opzionale che appare come tooltip al passaggio del cursore.
Open Link in New Window: Se selezionato, il link si apre in una nuova finestra o scheda del browser.
Link List: Menu a tendina con link usati o salvati in precedenza per un accesso rapido.
Puoi anche regolare l'allineamento del testo e l'altezza delle righe o introdurre elenchi puntati.
Tipi di elenco puntato disponibili:
Disc: Cerchio pieno. Stile predefinito per gli elenchi non ordinati in HTML.
Circle: Cerchio vuoto. Usato tipicamente per punti secondari o terziari.
Square: Quadrato pieno. Alternativa a disc o circle per varietà o enfasi.
Decimal: Numeri standard (1, 2, 3, ecc.). Per elenchi ordinati dove la sequenza conta.
Lower Alpha: Lettere minuscole (a, b, c, ecc.). Spesso per sotto-punti in un elenco ordinato.
Lower Greek: Lettere greche minuscole (alfa, beta, gamma, ecc.).
Lower Roman: Numeri romani minuscoli (i, ii, iii, ecc.). Per documenti formali o tradizionali.
Upper Alpha: Lettere maiuscole (A, B, C, ecc.). Per i punti principali in un elenco ordinato.
Upper Roman: Numeri romani maiuscoli (I, II, III, ecc.). Per documenti formali o tradizionali.
Opzioni di modifica avanzate
L'editor inline include anche opzioni di modifica avanzate. La funzionalità "Clear Format" rimuove qualsiasi formattazione esistente da una sezione di testo, utile quando si incolla testo da fonti esterne.
Valori personalizzati: Aggiungono un tocco personalizzato alle email incorporando dettagli specifici del destinatario come nome o posizione, migliorando i tassi di coinvolgimento.
Trigger links: Consentono ai destinatari di eseguire azioni direttamente dall'email, come confermare un'iscrizione, annullarla o accedere a un'offerta speciale.
La funzionalità "ContentAI" sfrutta l'intelligenza artificiale per generare contenuto testuale. Fornendo titoli, descrizioni e parole chiave, lo strumento genera automaticamente contenuto pertinente. Maggiori informazioni in
Contesto: Specifica il tema generale del contenuto da generare. Più è specifico, più accurato sarà il risultato.
Content Title: Tema principale o idea guida per il contenuto da creare.
Fornisci una breve descrizione del contenuto: Dettagli specifici o angolazioni da considerare nella generazione del contenuto.
Aggiungi parole chiave: Parole o frasi che descrivono il contenuto, utili anche per scopi SEO.
Writing Tone: Definisce il tono della scrittura: professionale, amichevole, informale, autorevole, ecc.
Number of Variations: Numero di versioni diverse da generare (fino a cinque variazioni).
Gestione degli elementi
La funzione "Manage Elements" ti dà il controllo su ogni elemento nella tua email, permettendoti di modificarne la visibilità per desktop, mobile o entrambi.
Le impostazioni di visibilità ti permettono di controllare come certi elementi appaiono su diversi dispositivi.
La visibilità mobile si riferisce a come gli elementi della tua email appaiono su smartphone o tablet. Dato il formato dello schermo più piccolo, potresti scegliere di nascondere certi elementi o semplificare il contenuto per una fruizione mobile più facile.
La visibilità desktop si riferisce a come gli elementi vengono visualizzati su dispositivi desktop. Poiché gli schermi desktop sono più grandi, puoi includere elementi aggiuntivi che non si adatterebbero bene a uno schermo mobile, inclusi elementi con azioni al passaggio del cursore.
Ogni elemento può essere modificato in modo indipendente, permettendoti di cambiarne le proprietà.
Puoi rimuovere un elemento dalla sezione "Manage Elements" se non si adatta alla tua email.
Ogni volta che passi il cursore e clicchi su una sezione, colonna o elemento nella sezione Manage Elements, la schermata scorre verso l'elemento selezionato.
Aspetto e stile
La funzione "Appearance" è il punto di riferimento per modificare l'aspetto e lo stile del tuo template.
Template
Qui puoi scegliere la combinazione di colori per il tuo template, caricare un'immagine di sfondo e definire la larghezza del contenuto della tua email.
Background Color: Colore che appare dietro tutti i contenuti nell'email. Un colore di sfondo ben scelto migliora leggibilità e appeal visivo.
Valori personalizzati nei campi colore (rendering in tempo reale)
Puoi usare Custom Values negli input colore (Background Color, Body Color o Button Color). Quando inserisci un token Custom Value, il builder applica il colore immediatamente sul canvas senza dover passare alla modalità Preview.
Body Color: Colore dell'area del contenuto principale. Deve fornire un buon contrasto con testo e altri elementi.
Content Width: Larghezza dell'area del contenuto. Il valore predefinito è 600px. Un contenuto molto largo potrebbe non visualizzarsi bene su dispositivi mobili.
Background Image: Immagine di sfondo dell'email. Non tutti i client email supportano le immagini di sfondo, quindi imposta sempre un colore di fallback.
Background Image URL: In alternativa al caricamento, inserisci l'URL di un'immagine ospitata online o nella Media Library del CRM. Usa URL sicuri (HTTPS).
Button:
La sezione "Button" nelle Impostazioni di aspetto ti permette di stilizzare i pulsanti a livello globale.
Corner Radius: Arrotondamento degli angoli del pulsante. Un valore di 9 dà angoli moderatamente arrotondati.
Button Color: Colore del pulsante in linea con il tuo brand.
Font: Tipo e dimensione del font per il testo del pulsante.
Text Styling: Puoi impostare colori individuali per testo in grassetto, corsivo e sottolineato all'interno del pulsante.
Divider:
La sezione "Divider" nelle Impostazioni di aspetto ti permette di incorporare linee personalizzate per strutturare il contenuto.
Height: Spessore della linea del Divider. Predefinito: 2 pixel.
Color: Colore della linea del Divider, in linea con lo schema cromatico dell'email.
Style: Aspetto della linea del Divider.
Custom CSS:
La sezione "Custom CSS" ti permette di aggiungere stili CSS per personalizzare ulteriormente il layout della tua email. Richiede una buona comprensione del CSS e delle sue implicazioni nel design delle email.
Risorse utili:
- CSS Tricks: Ampia documentazione CSS con molti articoli specifici sull'uso del CSS nelle email.
- Litmus: Blog con articoli approfonditi sulla codifica delle email.
- Smashing Magazine: An Introduction To Building And Sending HTML Email For Web Developers: Panoramica completa di HTML e CSS nelle email.
- MDN Web Docs: Using CSS: Guida alle proprietà personalizzate CSS.
- Email Design Workshop: CSS in Email: Panoramica chiara delle basi del CSS nelle email.
- Can I email…: Verifica quali proprietà CSS ed elementi HTML sono supportati dai principali client email.
Formattazione mobile
L'Editor Inline dell'Email Builder offre una sezione speciale per la formattazione mobile, dove puoi specificare quali intestazioni, paragrafi e pulsanti devono essere visibili su dispositivi mobili.
Queste configurazioni influiranno esclusivamente sulla versione mobile del tuo template email e sono applicabili nei client email compatibili con le media query.
Heading H1:
Font Size: Abbastanza grande da attirare l'attenzione ma non così grande da dominare lo schermo o causare scroll eccessivo.
Text Alignment: L'allineamento al centro funziona spesso bene per il mobile, adattandosi alla natura verticale degli schermi.
Line Height: Un'adeguata spaziatura tra le righe è critica per la leggibilità su schermi più piccoli. Il valore 1.5 fornisce una lettura confortevole.
Heading H2:
Font Size: Più piccolo di H1 ma ancora abbastanza prominente da distinguere la gerarchia delle informazioni.
Text Alignment: L'allineamento al centro funziona spesso bene, ma dipende dal contenuto e dal design specifici.
Line Height: Stessi principi di H1: critici per la facilità di lettura su schermi piccoli.
Heading H3:
Font Size: Distinto ma non dominante. Più piccolo di H1 e H2, ma ancora leggibile su schermi mobili.
Text Alignment: Mantenilo coerente con H1 e H2 per la coerenza visiva.
Line Height: Garantisce che il contenuto sia accessibile e facile da leggere anche su schermi piccoli.
Paragraph:
Font Size: Leggermente più grande di quello desktop per garantire la leggibilità su schermi mobili.
Text Alignment: Tipicamente giustificato a sinistra per le lingue che si leggono da sinistra a destra.
Line Height: Spaziatura confortevole per contenuti di lunga durata, per renderli meno densi e più facili da seguire.
Button:
Font Size: Il testo sui pulsanti deve essere facile da leggere e toccare su un dispositivo mobile. Una dimensione maggiore previene clic accidentali.
Ricorda, questi sono punti di partenza: regola le impostazioni in base al tuo contenuto, pubblico e design per ottimizzare l'esperienza mobile.
Best practice per la configurazione della visualizzazione mobile delle email
Usa un layout a colonna singola: I layout a colonna singola si scalano meglio per schermi più piccoli. Più colonne possono risultare disordinate su mobile.
Ottimizza le immagini: Usa immagini di alta qualità con dimensioni del file ridotte per un caricamento rapido. Usa immagini responsive e includi sempre il testo alternativo.
Pulsanti touch-friendly: Assicurati che i pulsanti siano abbastanza grandi da essere facilmente toccati. Si raccomanda una dimensione minima di 44px × 44px.
Limita la quantità di testo: Sii conciso e suddividi il testo in piccoli blocchi. Usa elenchi puntati e sottotitoli.
Usa un design email responsive: Garantisce che l'email si adatti automaticamente a qualsiasi dispositivo.
Anteprima e test: Visualizza sempre in anteprima e testa le email su diversi dispositivi e client email.
Includi spazio bianco: Lo spazio bianco rende l'email più pulita e leggibile su schermi piccoli.
Dimensione e stile del font: Si raccomanda dimensione 14 per il testo e 22 per i titoli. Evita font elaborati difficili da leggere.
CTA chiare e concise: La call-to-action deve essere chiara, concisa e facile da trovare, preferibilmente al centro dello schermo.
Ottimizza righe oggetto e testo di preheader: Mantieni le righe oggetto brevi e coinvolgenti. Usa il preheader per un riepilogo o teaser. Esegui A/B test su diverse versioni.
Preferisci il testo semplice alle immagini: Alcuni client email non visualizzano automaticamente le immagini, quindi usa il testo il più possibile.
Opzione di cancellazione iscrizione: Rendi facile per i destinatari rinunciare alle tue email. È un requisito legale e migliora l'esperienza utente.
Accessibilità: Usa font più grandi, garantisci un buon contrasto tra testo e sfondo, e includi testo alternativo per le immagini.
Risorse utili:
- Mobile Email Design — Ulteriori letture: https://www.emailonacid.com/blog/article/email-development/mobile-design-best-practices/
- Utilizzo dei colori nel design delle email — Ulteriori letture: https://www.creativebloq.com/inspiration/8-free-apps-for-picking-a-colour-scheme
- Ottimizzare le immagini per uso mobile — Ulteriori letture: https://www.sendinblue.com/blog/optimize-images-email/
- Suggerimenti per il design CTA — Ulteriori letture: https://unbounce.com/email-marketing/cta-buttons-guide/
- Miglior uso dello spazio — Ulteriori letture: https://stripo.email/blog/email-layout-optimizer-8-rules-for-structuring-emails/
- Miglior uso dello scroll — Ulteriori letture: https://www.campaignmonitor.com/blog/email-marketing/2019/07/should-you-use-the-fold-in-email-marketing/
- È necessario l'A/B testing delle email? — Ulteriori letture: https://sendpulse.com/blog/ab-testing-email-campaign
- Linee guida di accessibilità per le email — Ulteriori letture: https://www.emailonacid.com/blog/article/email-marketing/email-accessibility-in-plain-english/
- Email mobile-friendly vs. design email responsive — Ulteriori letture: https://litmus.com/blog/understanding-media-queries-in-html-email
- Best practice per la configurazione email mobile — Ulteriori letture: https://www.mailup.com/resources/mailup-blog/email-design-responsive-design-and-mobile-email-marketing/
Come usare la funzione "Preview in Browser" nell'Email Builder
Tap to unmute
HITLEAD 99.1K subscribers
Altri tutorial dalla community
Ora puoi includere facilmente un link "Preview in Browser" nelle tue Campaign nuove ed esistenti per rappresentare accuratamente il design dell'email.
Come aggiungere:
Inclusione predefinita: Tutti i template email vuoti includeranno il link "Preview in Browser" in cima per impostazione predefinita.
Aggiunta manuale a Campaign/template esistenti:
- Vai all'email marketing e apri una Campaign o un template.
- Aggiungi l'elemento - Preview URL.
- Personalizza lo stile/formattazione del testo modificandolo o usando l'opzione "add link".
Come testarlo?
- Puoi visualizzare l'anteprima dell'email e cliccare sul link di anteprima per vedere la versione browser del documento.
- Puoi anche inviare un'email di test e cliccare sul link "view in browser".
Nota: Se nelle Impostazioni l'agenzia o la location ha fornito un API Domain, questo verrà usato per impostazione predefinita nell'URL di anteprima in conformità con le linee guida white-label.
Domande frequenti
D: Voglio testare diversi elementi email per vedere cosa funziona meglio. Come può aiutarmi l'email builder?
Puoi utilizzare la funzionalità di A/B testing supportata come descritto qui: Guida all'A/B Testing. Questo ti permette di testare diversi componenti email, come righe oggetto, contenuto e CTA.
D: Sono proprietario di un ristorante e voglio informare i clienti sui nuovi articoli del menu. Quale template dovrei usare?
Usa il template "Restaurant Generic". Offre una varietà di layout adatti per presentare nuovi piatti.
D: Gestisco uno studio legale e devo annunciare nuovi servizi. Quale template funzionerà meglio?
I template "Legal Minds" o "Justice Law Firm" sono professionali e perfetti per presentare i servizi.
D: Gestisco un'organizzazione di beneficenza. Come posso usare l'email builder per raccogliere donazioni?
Usa i template "Helping Hand Charity" o "Giving Back Foundation" per creare messaggi convincenti sulla tua causa.
D: Ho una clinica di fisioterapia e voglio condividere consigli di salute ed esercizi. Quale template dovrei usare?
I template "Physical Therapy" sono progettati per condividere consigli sulla salute e informazioni sugli esercizi.
D: Gestisco uno studio di contabilità e voglio inviare newsletter con consigli sulla gestione finanziaria. Quale template funzionerebbe meglio?
Usa i template "Accurate Accounting Agency" o "Accounting Generic" per condividere consigli finanziari.
D: Gestisco un'agenzia immobiliare. Come posso usare l'email builder per presentare nuove proprietà?
Puoi usare qualsiasi template "Real Estate". Ognuno offre un layout professionale per la presentazione delle proprietà.
D: Gestisco un salone di bellezza e voglio annunciare nuovi servizi e promozioni. Quale template dovrei usare?
I template "Radiance Beauty" o "Hair Salon Generic" sono progettati per evidenziare servizi di bellezza e offerte.
D: Gestisco un'agenzia di viaggi e voglio promuovere i nostri pacchetti vacanza. Cosa consiglieresti?
I template "Pinnacle Travel" e "Getaways Travel" sono progettati per presentare pacchetti di viaggio.
D: Gestisco uno studio dentistico e voglio inviare promemoria per i controlli. Quale template è migliore?
I template "Dentist" sono progettati per gli studi dentistici.
D: Gestisco uno studio yoga e voglio condividere orari delle lezioni e consigli sulla salute. Quale template suggeriresti?
Usa qualsiasi template "Yoga Generic" o numerati "Yoga". Sono perfetti per orari delle lezioni e consigli sulla salute.
D: Gestisco un'officina di riparazione auto. Come posso usare l'email builder per annunciare servizi e promozioni?
Puoi usare i template "Auto Repair" per promuovere i tuoi servizi e offerte.
D: Sono proprietario di una palestra e voglio condividere consigli fitness e orari delle lezioni. Cosa consiglieresti?
Considera l'uso di qualsiasi template "Gym", progettati specificamente per contenuti legati al fitness.
D: Gestisco un centro di benessere olistico e voglio condividere consigli di benessere. Quale template dovrei usare?
Il template "Holistic Wellness Image Layer Generic" è perfetto per consigli e suggerimenti sul benessere.
D: Gestisco una medspa e voglio annunciare nuovi trattamenti e promozioni. Quale template è migliore?
I template "MedSpa" sono progettati per presentare trattamenti e offerte in una medspa.
D: Gestisco un servizio di paesaggistica. Come posso usare l'email builder per presentare il mio lavoro?
Il template "Landscaping Image Layer Generic 1" offre un layout professionale per lavori e servizi di paesaggistica.
D: Gestisco un'azienda di punteggio creditizio e voglio condividere consigli finanziari. Quale template sarebbe più adatto?
Usa i template "Credit Score", appositamente progettati per condividere consigli finanziari.
D: Gestisco un'azienda di energia solare. Quale template dovrei usare per annunciare nuovi prodotti e servizi?
I template "Solar Generic" o numerati "Solar" sono ideali per presentare prodotti e servizi solar.
D: Sono proprietario di uno studio legale e voglio inviare newsletter con consigli legali. Quale template funzionerebbe meglio?
Puoi usare i template "Attorney Generic" o "Legal Minds" per condividere consigli e aggiornamenti legali.
D: Gestisco una palestra di arrampicata. Come posso usare l'email builder per promuovere i corsi di allenamento?
Usa il template "Peak Climbing" per presentare le tue lezioni di arrampicata e sessioni di allenamento.
D: Gestisco un rifugio per animali e voglio inviare aggiornamenti sugli animali disponibili per l'adozione. Quale template dovrei usare?
I template "Dog Shelter" e "Cat's Cradle" sono perfetti per promuovere gli animali disponibili per l'adozione.
Questo articolo è stato utile?