Ottimizza il processo di creazione delle email con l'efficiente editor in-linea dell'Email Builder per Template e Campagne email. Questo strumento offre un'esperienza dinamica e intuitiva, garantendo un output di qualità con maggiore velocità e praticità.
INDICE DEI CONTENUTI
- Cos'è l'editor in-linea dell'Email Builder?
- Quali sono alcuni casi d'uso pratici di questa funzione?
- Vantaggi principali dell'editor in-linea dell'Email Builder
- Come usare l'Email Builder e il suo editor in-linea
- Navigare nella nuova interfaccia utente
- Gestire testo e formattazione
- Usare le opzioni di modifica avanzate
- Gestire gli elementi
- Regolare aspetto e stile
- Formattazione mobile
- Best practice per la configurazione della visualizzazione mobile delle email
- Come usare l'anteprima nel browser nell'Email Builder
- Altri tutorial dalla Community
- Domande frequenti
- Articoli correlati
Cos'è l'editor in-linea dell'Email Builder?
L'editor in-linea dell'Email Builder è uno strumento potente integrato nella piattaforma di Template e Campagne email di Squadd, che ti consente 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 in-linea dell'Email Builder 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 titolo. Man mano che 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 modifica immediata, aiutandoti a creare email migliori in modo più efficiente.
Questo robusto strumento supporta diverse funzionalità di personalizzazione, consentendoti di stilizzare il contenuto delle tue email utilizzando vari formati di intestazione e paragrafo. Puoi scegliere tra una selezione di font supportati, applicare diverse dimensioni di testo che vanno da 8px a 96px e colorare il testo usando il codice hex per una selezione precisa del colore. Puoi anche applicare formattazioni come grassetto, corsivo, sottolineato e barrato, oppure aggiungere hyperlink per i reindirizzamenti.
Inoltre, l'editor in-linea consente valori personalizzati (Custom Values), offrendoti un maggiore controllo sui contenuti. Lo strumento supporta anche la generazione di contenuti assistita dall'AI, che può aiutarti a creare contenuti email coinvolgenti più rapidamente.
Nota bene: Per mantenere l'uniformità nella struttura delle tue email, abbiamo implementato un aggiornamento del padding predefinito. Hai ora la possibilità di gestire la spaziatura attorno al contenuto. Tieni presente che le impostazioni predefinite per il padding sono le seguenti:
Padding superiore: 12
Padding inferiore: 12
Padding sinistro: 24
Padding destro: 24
Questa funzione ti offre un maggiore controllo sul layout e sull'aspetto della tua email.Quali sono alcuni casi d'uso pratici di questa funzione?
- Campagna email promozionale: Trattandosi di un'email promozionale, è fondamentale catturare l'attenzione del destinatario. Usa colori vivaci in linea con il tuo brand, font accattivanti e immagini di alta qualità. Nelle impostazioni di layout, considera una struttura a colonna singola per una maggiore leggibilità su mobile. Posiziona il pulsante CTA in un punto prominente e usa le impostazioni del pulsante per farlo risaltare con colori decisi.
- Newsletter stagionale: Per una newsletter, l'architettura dell'informazione è fondamentale. Il layout multi-sezione è perfetto per questo scopo. Ogni sezione può contenere una categoria di prodotto diversa con immagini ottimizzate e brevi descrizioni. È meglio scegliere un colore di sfondo che si abbini alle immagini e un font di facile lettura.
- Campagna di re-engagement: In questo caso, le funzionalità di personalizzazione vanno sfruttate al massimo. Usa un layout a colonna singola per un formato più personale, simile a una lettera. Scegli colori caldi e invitanti e font adeguati. Usa le impostazioni dei contenuti dinamici per inserire il nome del destinatario e personalizzare il messaggio in base alle sue interazioni precedenti.
- Email carrello abbandonato: Un layout a due colonne può funzionare bene qui, con un lato che mostra i prodotti lasciati nel carrello e l'altro che fornisce un promemoria e un'offerta speciale. Per un tocco più personalizzato, usa le impostazioni dei contenuti dinamici per inserire automaticamente immagini e dettagli degli articoli abbandonati.
- Invito a un evento: L'email deve essere pulita e diretta. Usa un layout a colonna singola e un design minimalista con un CTA chiaro. Considera l'uso di un componente countdown timer (tramite codice personalizzato) per creare un senso di urgenza.
- Serie di email educative: A seconda della complessità dell'argomento, è possibile utilizzare un layout a sezione singola o multi-sezione. Una combinazione di testo, immagini e video (se supportato) può aiutare a spiegare meglio l'argomento. Utilizza le impostazioni per rendere i link prominenti e fornisci un elenco o punti chiave in stile bullet point.
- Email di ringraziamento al cliente: Questo tipo di email deve essere molto personalizzato. Utilizza le impostazioni dei contenuti dinamici per includere il nome del cliente e dettagli specifici sulla sua interazione con la tua azienda (es. durata come cliente, prodotti acquistati). Usa un layout a colonna singola e colori rilassanti per creare un tono caldo e di apprezzamento.
- Email di follow-up post-acquisto: Usa un layout semplice a colonna singola. Lo schema cromatico dell'email dovrebbe corrispondere al tuo brand e il messaggio deve essere chiaro e conciso. Le impostazioni dei contenuti dinamici possono fornire dettagli specifici sull'ordine del cliente e suggerire altri prodotti pertinenti.
- Sequenza di onboarding: Usa l'Email Builder per creare una serie di email che guidano un nuovo utente o cliente attraverso il tuo prodotto o servizio. Puoi utilizzare un layout a colonna singola, testo chiaro e conciso, immagini e persino video (se supportato dal tuo builder) per fornire istruzioni passo dopo passo. Usa le impostazioni dei contenuti dinamici per personalizzare l'email con il nome dell'utente.
- Lancio di prodotto: Un'email entusiasmante per il lancio di un prodotto può avere un impatto significativo. Considera l'uso di un layout a colonna singola con colori vivaci, grandi dimensioni del font per i dettagli essenziali e immagini di prodotto di alta qualità. Se il tuo Email Builder dispone di questa funzione, crea un senso di urgenza con un componente countdown timer.
- Annuncio webinar: Per tali annunci è necessario un design pulito e diretto. Un layout a colonna singola con un titolo prominente, un pulsante CTA e contenuti dinamici per personalizzare l'email in base agli interessi del destinatario funzionerà bene.
- Digest settimanale: Un layout multi-sezione è il più adatto a questo scopo, con ogni sezione contenente un riepilogo di contenuti diversi (articoli, video, prodotti) e un CTA per "Leggi di più" o "Guarda ora".
- Invito a sondaggio: Un layout a colonna singola con una chiara spiegazione dello scopo del sondaggio e un pulsante CTA prominente per avviarlo sarebbe ideale. Mantieni il design semplice e il testo conciso.
- Richiesta di donazione: Per una richiesta di donazione, un layout a colonna singola con contenuti toccanti, immagini che illustrano la causa e un CTA in grassetto per donare funzionerà meglio. Usa i contenuti dinamici per personalizzare il messaggio.
- Richiesta di testimonianza: Dopo che un cliente è con te per un certo periodo, potresti voler richiedere una testimonianza. Un'email semplice, personale e a colonna singola con un CTA diretto può incoraggiare una risposta positiva.
- Promemoria rinnovo Membership: Potrebbe prevedere un layout multi-sezione, con una parte che ricorda delicatamente al destinatario il rinnovo imminente e l'altra che evidenzia i vantaggi di cui ha goduto e ciò che guadagnerà.
- Invito a tester beta: Un layout a colonna singola con un titolo convincente, una breve descrizione di cosa ci si aspetta dai tester beta e un CTA chiaro per iscriversi funzionerà bene.
- Revisione di fine anno: Potrebbe avere un layout multi-sezione, con ogni parte che riepiloga un mese o un trimestre dell'anno. Usa molti elementi visivi (grafici, tabelle, immagini) e mantieni il testo conciso.
- Comunicazione interna ai dipendenti: Se stai usando un Email Builder per la comunicazione interna, un layout a colonna singola con una struttura chiara (es. annunci, aggiornamenti, promemoria) può mantenere i dipendenti informati e coinvolti.
- Email di cross-sell/upsell: Un'email che suggerisce prodotti correlati o premium può aumentare le vendite dopo un acquisto del cliente. Usa un layout a colonna singola o multi-sezione con immagini dei prodotti, brevi descrizioni e CTA per visualizzare o acquistare il prodotto.
Vantaggi principali dell'editor in-linea dell'Email Builder
- Coerenza visiva: L'editor in-linea ti consente di garantire la coerenza visiva nelle tue email. Ad esempio, puoi mantenere un aspetto uniforme impostando il padding predefinito a Superiore 12, Inferiore 12, Sinistro 24 e Destro 24 per tutte le email.
- Supporto di font personalizzati: Con il supporto per vari font come Arial, Georgia, Verdana e altri, puoi allineare lo stile della tua email all'estetica del tuo brand. Ad esempio, se il tuo brand usa Helvetica nelle comunicazioni, puoi usarlo anche nelle email per coerenza.
- Stilizzazione precisa del testo: L'editor in-linea ti consente di ottimizzare l'aspetto del testo con opzioni come grassetto, corsivo, sottolineato e barrato. Potresti evidenziare i punti critici nelle tue email rendendoli in grassetto o corsivo per attirare l'attenzione.
- Opzioni di colore flessibili: L'aggiunta di colori tramite codici hex fornisce un controllo preciso sul colore del testo e delle evidenziazioni. Ad esempio, se il colore del tuo brand è #AFAFAF, puoi assicurarti che questo esatto colore venga utilizzato nel testo o nelle evidenziazioni della tua email.
- Aggiunta di hyperlink: Lo strumento ti consente di aggiungere hyperlink a parole o frasi, consentendo ai lettori di accedere direttamente ai contenuti correlati. Ad esempio, potresti collegare il nome di un prodotto alla sua pagina sul tuo sito web, offrendo un percorso fluido al lettore.
- Creazione di contenuti assistita dall'AI: La funzione ContentAI per generare contenuti più velocemente può ridurre significativamente il tempo dedicato alla scrittura e alla modifica delle email. Ad esempio, potrebbe suggerire automaticamente il testo in base ai tuoi input iniziali, rendendo la creazione di email più efficiente.
- Formattazione del testo: L'editor supporta il copia-incolla da altre fonti e rimuove la stilizzazione quando fai clic sulla formattazione del testo. Questo è utile quando importi testo da un documento ma vuoi applicare lo stile della tua email.
Come usare l'Email Builder e il suo editor in-linea
- Vai su "Marketing" > "Email" > "Template"
- Qui puoi creare un nuovo template o modificarne uno esistente.
Navigare nella nuova interfaccia utente
Accedendo all'Email Builder, sarai accolto da un'interfaccia utente elegante e intuitiva. In alto troverai una barra degli strumenti con diverse funzionalità:
Il pulsante 'Aggiungi elementi' ti consente di introdurre nuovi contenuti nella tua email, dal testo e alle immagini fino a strutture più complesse.
L'opzione 'Gestisci elementi' fornisce una panoramica di tutti gli elementi presenti nella tua email, consentendoti di selezionarli e modificarli facilmente.
Infine, l'impostazione 'Aspetto' ti consente di controllare lo stile globale della tua email, inclusi elementi come colore di sfondo, divisore, stilizzazione CSS personalizzata e formattazione mobile.
Queste funzionalità sono progettate per darti il pieno controllo sul design della tua email, dai singoli componenti all'aspetto e all'atmosfera generale.
Aggiungere elementi
Facendo clic sul pulsante 'Aggiungi elementi' viene visualizzato un elenco completo dei tipi di contenuto che puoi aggiungere alla tua email. Ecco una breve descrizione di ciascuno:
Testo:
Questo elemento versatile può essere usato per intestazioni, paragrafi, didascalie e altro ancora. Con l'editor in-linea, puoi ottimizzare ogni aspetto del testo, dallo stile e colore del font all'allineamento. Per il testo delle intestazioni (H1–H4), seleziona l'intestazione e usa il pulsante Grassetto (B) nella barra degli strumenti per attivare o disattivare la formattazione in grassetto mantenendo lo stesso livello di intestazione.
Immagine:
Se vuoi includere foto, grafiche o qualsiasi altro contenuto visivo, l'elemento Immagine è lo strumento di cui hai bisogno. Puoi caricare immagini direttamente dal tuo computer o collegarle da una fonte esterna.
Caricamento immagine: Usa la funzione di caricamento per aggiungere un'immagine direttamente dal tuo dispositivo. La dimensione massima di caricamento è 10MB, garantendoti capacità sufficiente per foto ad alta risoluzione.
URL immagine: In alternativa, puoi collegare un'immagine da una fonte esterna o dalla Libreria Media del tuo CRM. Incolla l'URL dell'immagine nel campo apposito.
Testo alternativo (Alt Text): Il testo alternativo aiuta a migliorare l'accessibilità dell'email per i destinatari che usano lettori di schermo o quando l'immagine non viene caricata. Descrivi l'immagine in modo breve e chiaro in questo campo.
Link (opzionale): Se vuoi che la tua immagine reindirizzi a un URL specifico quando viene cliccata, puoi inserire il link desiderato nel campo Link.
Larghezza e altezza: Regola le dimensioni dell'immagine usando questi campi. Puoi impostare valori specifici in pixel o spuntare la casella "Imposta altezza e larghezza su automatico" per il ridimensionamento automatico in base alle proporzioni originali dell'immagine.
Padding: Controlla lo spazio attorno alla tua immagine regolando il padding. Imposta il padding per i lati superiore, inferiore, sinistro e destro in base alle tue preferenze di design.
Allineamento: Imposta l'allineamento della tua immagine. Ad esempio, seleziona 'Centro' per centrare l'immagine nel suo contenitore. Le altre opzioni includono l'allineamento 'Sinistra' e 'Destra'.
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.
Funzione e utilità
Posizionare il pannello a destra crea un'area di lavoro divisa naturale che accelera le iterazioni e mantiene il focus sui risultati, non sugli strumenti.
Prerequisito
Per vedere Email AI e il selettore del pannello nell'editor, attiva Email AI nelle Impostazioni Agency Labs → funzionalità della sub-account.
Come cambiare la posizione del pannello
1) Vai su Marketing → Email, poi apri una Campagna email o un Template in modalità di modifica.
2) Attiva Email AI (se prevedi di usare l'AI in affiancamento).
3) Clicca sul controllo del selettore del pannello nell'editor per ancorarlo a Destra o spostarlo a Sinistra.
4) Continua a modificare con Email AI e il canvas visibili insieme.
Suggerimento: Usa il pannello ancorato a destra quando prevedi molti suggerimenti dall'AI; passa a sinistra per uniformità con altri strumenti, se preferito.Altri tutorial dalla Community
Pulsante:
Migliora l'interazione degli utenti con l'elemento Pulsante. Puoi collegarti a una pagina web, avviare un download o attivare qualsiasi altra azione basata sul clic.
Testo del pulsante: Inserisci il testo che vuoi visualizzare sul pulsante. Ad esempio, potresti usare 'Seguimi' per invitare i lettori a seguire un link alla tua pagina social.
Font e dimensione: Scegli il font e la dimensione che meglio si adattano all'estetica della tua email. Ad esempio, potresti usare 'Arial' con dimensione '14' per un aspetto classico e leggibile.
Colore del font: Seleziona il colore del testo del pulsante. I colori sono specificati usando codici esadecimali, es. '#ffffff' per il bianco.
Azioni:
- URL: questa è l'azione pulsante più comune. Puoi indirizzare il destinatario a una pagina web specifica. Inserisci l'URL della pagina a cui vuoi collegare il pulsante.
- Mail: questa azione aprirà il client email predefinito del destinatario per comporre un nuovo messaggio. Puoi impostare un indirizzo email destinatario predefinito.
- Download file: se vuoi che il pulsante attivi un download di file, scegli questa azione. Dovrai fornire l'URL di download diretto del file.
- Telefono: questa azione è ideale per gli utenti mobile. Quando il destinatario clicca sul pulsante, il suo dispositivo avvierà una telefonata al numero inserito.
- Altro: se hai in mente un'azione unica non coperta dalle categorie precedenti, scegli questa opzione.
Allineamento: Scegli l'allineamento del pulsante. Le opzioni includono 'Sinistra', 'Centro' o 'Destra'.
Larghezza totale: Se vuoi che il pulsante si estenda per tutta la larghezza del suo contenitore, abilita questa opzione.
Colore di sfondo: Scegli il colore per lo sfondo del pulsante. Come per il colore del font, questo viene specificato usando un codice esadecimale. Ad esempio, '#000000' renderà lo sfondo del pulsante nero.
Valori personalizzati nei campi colore (rendering in tempo reale)
Puoi usare Valori personalizzati (Custom Values) negli input di colore (ad esempio Colore di sfondo, Colore del corpo o Colore del pulsante).
Quando inserisci un token di Valore personalizzato, il builder applica immediatamente il colore sul canvas. Non è necessario passare alla modalità Anteprima per confermare le modifiche al colore.
Raggio del bordo: Personalizza la rotondità degli angoli del pulsante regolando il raggio del bordo. Un numero più alto produrrà angoli più arrotondati. Ad esempio, impostare il raggio su '75' darà al pulsante una forma a pillola.
Padding: Imposta lo spazio tra il testo del pulsante e il bordo del pulsante regolando i valori di padding per i lati superiore, inferiore, sinistro e destro.
Usando queste impostazioni puoi progettare pulsanti che si adattino all'aspetto generale della tua email e incoraggino i destinatari ad agire.
Divisore:
L'elemento Divisore ti consente di introdurre separazioni nette tra le diverse sezioni della tua email. Personalizza il colore, la larghezza e lo stile per adattarli al tuo design.
Altezza: Imposta lo spessore della linea del divisore. Un numero maggiore produrrà una linea più spessa. Ad esempio, impostare l'altezza su '2' crea una linea moderatamente spessa.
Larghezza (%): Determina l'estensione orizzontale del divisore all'interno del suo contenitore. Espressa come percentuale della larghezza del contenitore. Ad esempio, una larghezza del '100' significa che il divisore si estenderà per tutta la larghezza del suo contenitore.
Tipo di linea: Scegli lo stile della linea del divisore. Le opzioni solitamente includono 'Continua', 'Tratteggiata' o 'Punteggiata'.
Allineamento: Scegli l'allineamento del divisore. Le opzioni includono 'Sinistra', 'Centro' o 'Destra'.
Colore: Specifica il colore del divisore usando un codice esadecimale. Ad esempio, '#FED7E2' potrebbe essere usato per un divisore rosa tenue.
Padding: Regola lo spazio tra il divisore e gli altri elementi. Puoi impostare diversi valori di padding per i lati superiore, inferiore, sinistro e destro del divisore.
Social:
Vuoi che i tuoi destinatari visitino i tuoi profili social? L'elemento Social ti consente di includere facilmente icone collegate a varie piattaforme social.
Elementi social: Aggiungi le tue piattaforme social. Puoi solitamente aggiungere icone per Facebook, Instagram e Twitter. Basta cliccare sulla piattaforma e inserire il tuo handle o l'URL del profilo.
Stili delle icone: Determina l'aspetto delle icone social. Puoi scegliere tra stili, forme e design diversi per adattarsi meglio all'estetica della tua email.
Visualizzazione: Scegli la modalità di visualizzazione per le icone: può essere 'Icona', 'Testo' o 'Icona e testo'.
Allineamento: Regola l'allineamento delle icone all'interno dell'email. Puoi allinearle a 'Sinistra', 'Centro' o 'Destra'.
Font: Imposta il font per il nome della piattaforma che appare con l'icona. Se stai usando la visualizzazione 'Icona e testo', questo sarà il font del testo.
Colore del font: Specifica il colore delle icone social usando un codice esadecimale. Ad esempio, '#00a4bd' potrebbe essere usato per un colore verde acqua.
Dimensione: Regola la dimensione delle icone per assicurarti che siano facilmente visibili ma non eccessive.
Spazio: Imposta la quantità di spazio tra ciascuna icona social.
Padding: Regola lo spazio tra le icone social e gli altri elementi. Puoi impostare diversi valori di padding per i lati superiore, inferiore, sinistro e destro della sezione delle icone social.
Impostando correttamente questi valori, puoi integrare senza soluzione di continuità la tua presenza social nelle email, fornendo ai destinatari un modo semplice per connettersi con te su queste piattaforme.
Footer:
Usa l'elemento Footer per includere informazioni essenziali come dati di contatto, indirizzo aziendale o link di disiscrizione.
Modifica del testo: Clicca sul testo del footer per attivare l'editor in-linea. Puoi quindi modificare il testo in base alle tue esigenze. Puoi digitare direttamente nel footer, che tu voglia aggiungere l'indirizzo della tua azienda, link alla privacy policy o un link di disiscrizione.
Font e stile: L'editor in-linea ti consente di modificare il font, la dimensione e il colore del testo del footer. Evidenzia il testo che vuoi modificare e scegli tra le opzioni nella barra degli strumenti di modifica. Puoi rendere il testo in grassetto, corsivo, sottolinearlo o aggiungere un barrato.
Link: Usando l'editor in-linea, puoi aggiungere facilmente hyperlink nel footer. Evidenzia il testo che vuoi trasformare in link, clicca sull'icona 'link' nella barra degli strumenti e inserisci l'URL desiderato. Questo è utile per collegarsi al sito web della tua azienda o indirizzare a una pagina specifica come i termini di servizio o la privacy policy.
Allineamento e spaziatura: Allinea il testo a sinistra, destra o centro, in base alle tue esigenze di design. Controlla anche l'interlinea per garantire che il testo del footer sia leggibile e ben presentato.
Codice:
Hai bisogno di funzionalità più avanzate? L'elemento Codice ti consente di inserire codice HTML personalizzato direttamente nella tua email. Qui è dove inserisci il tuo codice personalizzato. Questo ti consente di creare layout e componenti più avanzati all'interno della tua email.
Nota bene: Il blocco Codice è destinato agli utenti esperti di HTML. Come precauzione, ti consigliamo di familiarizzare con i fondamenti dell'HTML prima di utilizzare questa funzione. Per una guida, potresti trovare utili queste risorse:
Basi delle email HTML
Usare i blocchi di codiceIntegrando HTML personalizzato, puoi creare esperienze email altamente personalizzate, consentendoti di andare oltre le capacità di design standard dei template email. Tieni presente, tuttavia, che i client email possono avere diversi livelli di supporto per HTML e CSS, quindi testa sempre le tue email prima di inviarle.
Video:
Coinvolgi i tuoi destinatari con contenuti multimediali. Inserisci un elemento Video e collegalo al tuo contenuto video ospitato.
Tipo di video: Seleziona la piattaforma dove è ospitato il tuo video. Può essere YouTube, Vimeo, Wistia o video HTML5.
URL video: Incolla l'URL del video che desideri incorporare. Deve essere il link diretto al video sulla piattaforma selezionata.
Miniatura del video: Questa è l'immagine che gli utenti vedranno prima di riprodurre il video. Puoi caricare una miniatura personalizzata (dimensione massima: 10MB) o usare un URL immagine. Ad esempio, si potrebbe usare un'immagine segnaposto dalla tua Libreria Media.
Larghezza e altezza: Imposta le dimensioni del lettore video all'interno della tua email. Hai anche la possibilità di impostare altezza e larghezza su 'automatico', che adatta le dimensioni in base al rapporto d'aspetto del video e allo spazio disponibile nell'email.
Dimensione del pulsante Play: Scegli la dimensione del pulsante play che appare sulla miniatura del video. Le opzioni solitamente includono Piccolo, Medio o Grande.
Opacità del pulsante Play: Regola la visibilità del pulsante play. Puoi renderlo più o meno opaco in base alle tue esigenze di design.
Padding: È lo spazio attorno al lettore video. Puoi regolare il padding superiore, inferiore, sinistro e destro per adattare perfettamente il video al layout della tua email.
Carrello acquisti:
Se operi nel settore e-commerce, l'elemento Carrello acquisti è uno strumento utile per includere dettagli dei prodotti, prezzi e link diretti al tuo negozio online. È un modo per ricordare ai clienti i prodotti a cui sono interessati e incoraggiarli a completare gli acquisti. 
Ecco come personalizzare questa sezione:
Padding: Regola lo spazio attorno al contenuto del carrello acquisti per separarlo visivamente dalle altre sezioni dell'email. Il padding può essere regolato in alto, in basso, a sinistra e a destra della sezione carrello.
Font: Scegli il font per il testo nel carrello acquisti. Può essere quello predefinito di sistema o un altro stile coerente con il design della tua email.
Colore del testo: Personalizza il colore del testo nel carrello acquisti. Può essere nero (#000) o qualsiasi altro colore che si abbini al design della tua email.
Colore di sfondo: Seleziona il colore di sfondo del carrello acquisti. Può essere bianco (#ffffff) o qualsiasi altro colore che renda il testo facile da leggere.
All'interno dell'elemento Carrello acquisti, solitamente vengono visualizzate le seguenti informazioni per ogni prodotto:
Nome del prodotto: Il nome del prodotto come appare sul tuo sito web o negozio online.
Prezzo: Il prezzo individuale del prodotto.
Quantità: Il numero di quel particolare prodotto scelto dal cliente.
Prezzo di riga: Il prezzo totale per quella voce (Prezzo x Quantità).
Ripeti questi passaggi per ogni prodotto nel carrello acquisti. Visualizzare queste informazioni dettagliate garantisce trasparenza e aiuta i clienti a rivedere i loro ordini, rendendoli più propensi a procedere al checkout.
Personalizzare la sezione Carrello acquisti in questo modo garantisce una migliore esperienza utente, si allinea al design complessivo della tua email e alla fine favorisce le conversioni.
Intestazione RSS:
Il blocco Intestazione RSS nell'Email Builder è uno strumento potente che ti consente di popolare dinamicamente i tag <channel> del tuo feed RSS nella tua campagna email.
Ecco i tag e i corrispondenti valori personalizzati che puoi usare:
<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 'Base' e 'Personalizzato' quando usi il blocco Intestazione RSS.
'Base' aggiungerà testo non modificabile nell'editor di testo in questo modo:
<h1 class="h1">{{rss_feed.title}}</h1> {{rss_feed.description}}<br /> <br />
'Personalizzato' aggiungerà testo modificabile nell'editor di testo in questo modo:
Aggiornamenti da {{rss_feed.url}} <h1>{{rss_feed.title}}</h1> <strong>{{rss_feed.description}}</strong><br /> <br /> <strong>Nell'edizione del {{rss_feed.date}}:</strong><br />
Queste variabili <channel> RSS possono essere utilizzate anche nel campo oggetto della tua campagna email.
Elementi RSS:
Quando si lavora con i feed RSS, l'elemento "Elementi RSS" è una parte fondamentale dell'Email Builder nelle piattaforme di email marketing. Funziona essenzialmente come segnaposto di contenuto dinamico che popola il contenuto dal feed RSS nella tua campagna email. Gli elementi RSS possono includere post di blog, aggiornamenti di notizie, articoli o qualsiasi contenuto pubblicato accessibile tramite un feed RSS.
Hai le seguenti opzioni di modifica RSS: Estratti: Questa opzione visualizzerà solo un riassunto o uno snippet del contenuto originale di ogni elemento del feed RSS. Questa opzione è utile quando vuoi dare agli iscritti un'anteprima del contenuto, spingendoli a cliccare per leggere l'articolo completo sul tuo sito web.
Estratti con immagine: Come l'opzione Estratti, mostra anche un riassunto o snippet del contenuto originale. Tuttavia, include anche un'immagine associata all'elemento del feed RSS. Questo è particolarmente utile per l'impatto visivo e può migliorare significativamente i tassi di coinvolgimento.
Titolo: Se selezioni questa opzione, verrà visualizzato solo il titolo di ogni elemento del feed RSS. Questo è un approccio minimalista e può essere efficace quando i titoli stessi sono abbastanza descrittivi o intriganti da motivare il lettore a cliccare e leggere di più.
Contenuto completo: Scegliere questa opzione importerà l'intero contenuto di ogni elemento del feed RSS nell'email. Questo può essere utile se gli elementi del feed RSS sono brevi o se vuoi fornire informazioni complete all'interno dell'email. Tuttavia, questo potrebbe portare a email molto lunghe se gli elementi del feed sono estesi.
Personalizzato: L'opzione Personalizzato ti consente di scegliere quali informazioni del feed RSS includere nell'email e come visualizzarle. Ad esempio, puoi includere il titolo, un breve estratto, il nome dell'autore e un link all'articolo completo. Questa opzione richiede una configurazione maggiore ma offre la massima flessibilità nella presentazione degli elementi del feed nella tua email.
Questo elemento può importare dinamicamente diversi attributi relativi a ogni elemento RSS. Questi attributi possono essere:
Titolo del post/elemento ({{rss_item.title}})
Riepilogo o descrizione del post/elemento ({{rss_item.content}})
URL link diretto al post/elemento originale ({{rss_item.url}})
Data di pubblicazione del post/elemento ({{rss_item.date}})
L'autore del post/elemento ({{rss_item.author}})
Quando incorpori l'elemento "Elementi RSS" nella tua email, puoi decidere quali informazioni visualizzare e come presentarle. Puoi mostrare solo il titolo, il titolo con un riepilogo o anche un hyperlink al post completo.
Le opzioni di personalizzazione si estendono anche agli aspetti del design. Ad esempio, puoi regolare il padding (superiore, inferiore, sinistro, destro) attorno all'elemento per adattarlo all'estetica della tua email. Inoltre, puoi scegliere se includere o meno un'immagine di ogni post nell'email.
Layout:
I layout determinano la struttura del contenuto della tua email. Hai varie opzioni, dai semplici layout a colonna singola a strutture più complesse.
Ecco una spiegazione dettagliata di ogni layout:
1: Questo layout rappresenta una struttura a colonna singola. Tutti i contenuti sono disposti in una linea verticale. È il layout più semplice e uno dei più comuni usati nelle email. È ottimo per la leggibilità, specialmente su schermi più piccoli come i dispositivi mobile.
2: Questo layout corrisponde a una struttura a due colonne. Il contenuto dell'email è diviso in due colonne verticali. Questo layout è ideale per visualizzare due gruppi di contenuto affiancati, come un'immagine e un blocco di testo o due articoli di un feed RSS.
1/3: 2/3 e 2/3: 1/3: Questi layout rappresentano una struttura in cui il contenuto è diviso in due colonne di dimensioni diverse. In 1/3: 2/3, una colonna occupa 1/3 della larghezza e l'altra 2/3. È invertito nel layout 2/3: 1/3. Sono ottimi per evidenziare un contenuto rispetto all'altro, come un'immagine con la sua descrizione, in cui l'immagine è il focus principale.
1/4: 3/4 e 3/4: 1/4: Simile al precedente, ma qui una colonna occupa 1/4 dello spazio e l'altra 3/4, e viceversa. Questo layout è utile quando un contenuto è significativamente più importante dell'altro, come un piccolo menu di navigazione accanto a un'ampia area di contenuto.
4: Questo layout si riferisce a una struttura a quattro colonne. Il contenuto dell'email è distribuito su quattro colonne verticali uguali. Questo è utile per presentare più contenuti di uguale importanza affiancati, come una griglia di immagini o più articoli di un feed RSS.
Questi layout offrono vari modi di strutturare e presentare i tuoi contenuti, a seconda delle tue esigenze specifiche e del tipo di email che stai inviando. Comprendendo le diverse opzioni, puoi scegliere il layout più efficace per la tua email.
Per aggiungere qualsiasi elemento alla tua email, trascinalo e rilascialo sul canvas. Quando selezioni un elemento per modificarlo, apparirà l'editor in-linea, fornendoti numerose opzioni per personalizzare l'elemento scelto in base alle tue esigenze.
Gestire testo e formattazione
L'editor in-linea è uno strumento potente che ti consente di gestire facilmente il testo e la sua formattazione. Quando evidenzi una porzione di testo, nell'editor diventano disponibili una serie di opzioni.
Puoi cambiare il tipo di intestazione.
Selezionare un font diverso, regolare la dimensione del font e modificare il colore del testo.
Non è tutto: sono disponibili anche opzioni per grassetto, corsivo, sottolineato e barrato.
Se desideri aggiungere un hyperlink al tuo testo, l'editor in-linea ti consente di farlo, dandoti il controllo sul testo visualizzato e sull'URL di destinazione.
Aggiungi/Modifica link: Questa opzione ti consente di aggiungere un nuovo hyperlink alla tua email o modificarne uno esistente.
URL del link: È l'indirizzo web (URL) a cui si desidera che l'hyperlink indirizzi quando viene cliccato. Può essere una pagina web, un file scaricabile o un'altra risorsa online. Assicurati sempre che l'URL sia corretto e funzionante.
Testo da visualizzare: È il testo visibile che apparirà nella tua email e sarà cliccabile. Potrebbe essere un invito all'azione come "Leggi di più", "Scarica ora" o semplicemente il nome della pagina web a cui stai collegando. È meglio mantenere questo testo conciso e descrittivo del contenuto collegato.
Titolo: L'attributo title è opzionale e può fornire informazioni aggiuntive sul link. Spesso appare come tooltip quando un utente passa il mouse sull'hyperlink. Può fornire contesto aggiuntivo o spiegare dove porterà il link.
Apri link in nuova finestra: Questa opzione, quando selezionata, significa che quando il destinatario clicca il link, si aprirà in una nuova finestra o scheda del browser invece che in quella corrente. Può essere utile quando non vuoi che l'utente abbandoni l'email o la pagina web corrente.
Elenco link: Questo menu a discesa potrebbe contenere un elenco di link usati o salvati in precedenza. Può rendere più rapido e semplice aggiungere link che usi frequentemente.
Puoi anche regolare l'allineamento del testo e l'interlinea, o introdurre punti elenco nel tuo testo.
Ecco una descrizione di ogni tipo di punto elenco:
Disco: Un cerchio pieno. È lo stile predefinito per gli elenchi non ordinati in HTML.
Cerchio: Un cerchio vuoto o un anello. Viene tipicamente usato per punti secondari o terziari in un elenco non ordinato.
Quadrato: Un quadrato pieno. Può essere un'alternativa ai punti elenco disco o cerchio per varietà o enfasi.
Decimale: Marcatori di elenco numerici standard (1, 2, 3, ecc.). Tipicamente usati per elenchi ordinati in cui la sequenza è importante.
Alfa minuscolo: Marcatori di elenco alfabetici minuscoli (a, b, c, ecc.). Spesso usati per sottopunti all'interno di un elenco ordinato.
Greco minuscolo: Marcatori di elenco alfabetici greci minuscoli (alfa, beta, gamma, ecc.). Non comunemente usati, ma possono essere un'alternativa interessante ai marcatori standard.
Romano minuscolo: Marcatori di elenco con numeri romani minuscoli (i, ii, iii, ecc.). Spesso usati per documenti formali o tradizionali, come documenti legali.
Alfa maiuscolo: Marcatori di elenco alfabetici maiuscoli (A, B, C, ecc.). Spesso usati per i punti principali in un elenco ordinato.
Romano maiuscolo: Marcatori di elenco con numeri romani maiuscoli (I, II, III, ecc.). Come i numeri romani minuscoli, sono spesso usati in documenti formali o tradizionali.
Usare le opzioni di modifica avanzate
L'editor in-linea è dotato anche di opzioni di modifica avanzate. La funzione 'Cancella formato' ti consente di rimuovere qualsiasi formattazione esistente da una sezione del testo, uno strumento utile quando si incolla testo da fonti esterne.
Valori personalizzati: Aggiungono un tocco personale alle tue email incorporando dettagli specifici del destinatario come il nome o la posizione. Questa personalizzazione può migliorare la pertinenza della tua email per ogni destinatario, migliorando così i tassi di coinvolgimento.
Link di Trigger: Consentono ai destinatari di eseguire determinate azioni direttamente dall'email, come confermare un'iscrizione, disiscriversi o accedere a un'offerta speciale. Questi elementi interattivi possono favorire il coinvolgimento e aumentare le conversioni semplificando le azioni degli utenti.
Inoltre, la funzione 'ContentAI' sfrutta l'intelligenza artificiale per aiutare a generare contenuti testuali. Lo strumento può generare automaticamente contenuti testuali pertinenti fornendo titoli di contenuto, descrizioni e parole chiave. Maggiori dettagli in
Contesto: In questo campo puoi specificare il contesto per il contenuto che vuoi far generare all'AI. Questo aiuta l'AI a capire quale deve essere il tema o l'argomento generale. Può essere qualsiasi cosa, da "Digital Marketing" a "Ricette salutari". Più specifico è il contesto, più accurato sarà il contenuto generato.
Titolo del contenuto: Qui dovresti fornire il tema o l'idea principale per il contenuto che vuoi creare. Questo titolo guiderà l'AI nella generazione del contenuto desiderato. Potrebbe essere il titolo di un blog, una riga dell'oggetto per un'email o la descrizione di un prodotto.
Fornisci una breve descrizione del contenuto: In questo campo devi fornire una breve descrizione del contenuto desiderato. Potrebbe includere dettagli specifici o angolazioni che vuoi che l'AI consideri nella generazione del contenuto.
Aggiungi parole chiave: Le parole chiave sono le parole o frasi specifiche che descrivono il tuo contenuto. Queste guideranno l'AI nell'incorporare questi termini in modo naturale nel contenuto generato. Questo può essere particolarmente utile per la SEO.
Tono di scrittura: Questa opzione ti consente di definire il tono della scrittura. Può essere professionale, amichevole, informale, autorevole, ecc. L'AI adatterà il contenuto generato al tono selezionato.
Numero di varianti: Qui specifichi quante versioni diverse del contenuto vuoi che l'AI generi. Questo ti consente di scegliere tra vari output e selezionare quello che meglio soddisfa le tue esigenze. Puoi creare fino a cinque varianti.
Gestire gli elementi
La funzione 'Gestisci elementi' ti dà il controllo su ogni elemento all'interno della tua email. Selezionando un elemento in questa sezione puoi modificarne la visibilità per diversi dispositivi: desktop, mobile o entrambi.
Le impostazioni di visibilità ti consentono di controllare come certi elementi appaiono su diversi dispositivi. In particolare, le impostazioni di "visibilità mobile" e "visibilità desktop" ti consentono di scegliere quali elementi della tua email o pagina web devono essere visualizzati quando visualizzati su desktop o dispositivo mobile.
La visibilità mobile si riferisce a come gli elementi della tua email o pagina web appaiono sui dispositivi mobile come smartphone o tablet. Date le dimensioni dello schermo più piccole di questi dispositivi, potresti scegliere di nascondere certi elementi che non vengono visualizzati bene o semplificare il contenuto per una fruizione mobile più agevole. Può anche comportare la ristrutturazione o il ridimensionamento degli elementi per un layout più mobile-friendly.
La visibilità desktop si riferisce a come gli elementi della tua email o pagina web vengono visualizzati sui dispositivi desktop. Poiché gli schermi desktop sono più grandi e forniscono più spazio, puoi includere elementi aggiuntivi che non si adatterebbero bene a uno schermo mobile. Inoltre, gli elementi che richiedono azioni al passaggio del mouse, non applicabili sui dispositivi mobile, possono essere visualizzati.
Inoltre, ogni elemento può essere modificato in modo indipendente, consentendoti di cambiarne le proprietà.
Puoi rimuovere un elemento dalla sezione 'Gestisci elementi' se non si adatta alla tua email.
Ogni volta che passi il mouse e clicchi su una sezione, colonna o elemento nella sezione Gestisci elementi, lo schermo scorre fino alla sezione, colonna o elemento su cui hai posizionato il cursore.
Regolare aspetto e stile
La funzione 'Aspetto' è il tuo punto di riferimento per modificare l'aspetto e l'atmosfera del tuo template.
Template
Qui puoi scegliere lo schema cromatico del tuo template, caricare un'immagine di sfondo e persino definire la larghezza del contenuto della tua email.
Colore di sfondo: È il colore che appare dietro tutto il contenuto nella tua email. Puoi selezionare qualsiasi colore che si adatti al design e all'atmosfera del tuo messaggio. Un colore di sfondo ben scelto può migliorare significativamente la leggibilità e l'attrattiva visiva della tua email.
Valori personalizzati nei campi colore (rendering in tempo reale)
Puoi usare Valori personalizzati (Custom Values) negli input di colore (ad esempio Colore di sfondo, Colore del corpo o Colore del pulsante).
Quando inserisci un token di Valore personalizzato, il builder applica immediatamente il colore sul canvas. Non è necessario passare alla modalità Anteprima per confermare le modifiche al colore.
Colore del corpo: È il colore dell'area del contenuto principale o del corpo della tua email. È dove sono ospitati testo, immagini e altri elementi. Il colore del corpo deve fornire un buon contrasto con il testo e gli altri elementi per garantire la leggibilità.
Larghezza del contenuto: È la larghezza dell'area del contenuto all'interno della tua email. Per impostazione predefinita, potrebbe essere impostata a una larghezza standard di 600 pixel. Tuttavia, puoi regolarla in base alle tue esigenze di design e al tipo di contenuto che includi. Nota che contenuti molto larghi potrebbero non visualizzarsi bene su tutti gli schermi, specialmente i dispositivi mobile.
Immagine di sfondo: Qui puoi caricare un'immagine che verrà visualizzata come sfondo della tua email. Questo può essere un ottimo modo per aggiungere interesse visivo e branding ai tuoi messaggi. Ricorda che non tutti i client email supportano le immagini di sfondo, quindi è buona norma impostare un colore di riserva.
La dimensione massima di caricamento si riferisce al file immagine più grande che puoi caricare come sfondo. I file più grandi possono richiedere più tempo per il caricamento e potrebbero non essere completamente supportati da tutti i client email, quindi di solito è meglio usare immagini ottimizzate per il web.
URL immagine di sfondo: Invece di caricare un'immagine dal tuo computer, puoi inserire l'URL di un'immagine ospitata online esternamente o nella Libreria Media del tuo CRM. L'email caricherà l'immagine da questo URL quando viene aperta. Assicurati che l'URL dell'immagine sia sicuro (HTTPS) e affidabile per caricarsi correttamente per tutti i destinatari.
Pulsante:
La sezione "Pulsante" nelle impostazioni di aspetto ti consente di progettare e stilizzare pulsanti orientati all'azione per email interattive e coinvolgenti.
Raggio degli angoli: Modifica la rotondità degli angoli del pulsante. Un valore di 9 gli darà bordi moderatamente arrotondati.
Colore del pulsante: Qui puoi specificare il colore del pulsante per corrispondere al tuo brand o al tema della tua email.
Font: Scegli il tipo e la dimensione del font per il testo sul pulsante. In questo caso, è selezionato il font 'Arial' con dimensione '16'.
Stilizzazione del testo:
Hai la possibilità di impostare colori individuali per il testo in grassetto, corsivo e sottolineato all'interno del pulsante. Questo può aiutare a enfatizzare parole chiave o frasi e creare pulsanti visivamente più dinamici.
Divisore:
La sezione "Divisore" nelle impostazioni di aspetto ti consente di incorporare linee personalizzate per strutturare e separare il contenuto dell'email.
Altezza: L'impostazione dell'altezza definisce lo spessore della linea del divisore. Per impostazione predefinita è impostata a 2 pixel, ma puoi modificarla per adattarla all'estetica della tua email. Un divisore più spesso potrebbe essere più visibile, mentre uno più sottile può separare le sezioni in modo discreto.
Colore: Questa impostazione ti consente di scegliere il colore della linea del divisore. Il colore dovrebbe idealmente completare lo schema cromatico generale dell'email, garantendo coerenza visiva.
Stile: Qui puoi selezionare l'aspetto della linea del divisore.
CSS personalizzato:
La sezione "CSS personalizzato" ti consente di aggiungere stili CSS per personalizzare ulteriormente il layout della tua email. Tuttavia, questo richiede una buona comprensione del CSS e delle sue implicazioni nel design delle email. Il CSS nelle email funziona in modo leggermente diverso rispetto al web design, a causa della varietà di client email e delle loro capacità di rendering.
Ecco alcune risorse utili per iniziare:
CSS Tricks: Questo sito web fornisce una grande quantità di informazioni su CSS e su come usarlo efficacemente, inclusi molti articoli specificamente sull'uso del CSS nelle email.
Litmus: Litmus è un noto strumento di testing per email e il suo blog contiene molti articoli approfonditi sulla codifica delle email, incluso il CSS.
Smashing Magazine: An Introduction To Building And Sending HTML Email For Web Developers: Questa guida fornisce una panoramica completa di HTML e CSS nelle email.
MDN Web Docs: Using CSS: La rete per sviluppatori di Mozilla è una risorsa affidabile per i web developer. Questa guida spiega come usare le proprietà CSS personalizzate, che possono essere utili nel blocco CSS personalizzato.
Email Design Workshop: CSS in Email: Questa guida fornisce una chiara panoramica delle basi dell'utilizzo del CSS nelle email.
Can I email…: Come "Can I use…" ma per le email. Un'ottima risorsa per verificare quali proprietà CSS ed elementi HTML sono supportati dai principali client email.
Formattazione mobile
Nel mondo di oggi è importante che le tue email abbiano un buon aspetto su tutti i dispositivi. Con questo in mente, l'editor in-linea dell'Email Builder fornisce una sezione speciale per la formattazione mobile. Qui puoi specificare quali intestazioni, paragrafi e pulsanti devono essere visibili quando la tua email viene visualizzata su un dispositivo mobile. Questo garantisce che le tue email siano ottimizzate sia per la visualizzazione desktop che mobile.
Queste configurazioni influenzeranno esclusivamente la versione mobile del tuo template email e sono applicabili nei client email compatibili con le media query.
Intestazione H1:
Dimensione del font: La dimensione del tuo header principale su mobile deve essere abbastanza grande da attirare l'attenzione ma non così grande da dominare lo schermo o causare scorrimento eccessivo. L'esperienza di visualizzazione mobile differisce considerevolmente dal desktop a causa delle dimensioni minori dello schermo, quindi trovare un equilibrio è fondamentale.
Allineamento del testo: L'allineamento nella visualizzazione mobile può influenzare quanto facilmente il contenuto viene fruito. L'allineamento al centro è spesso usato per il mobile in quanto fornisce equilibrio e si adatta bene alla natura verticale degli schermi mobile.
Interlinea: Nella visualizzazione mobile, un'adeguata spaziatura delle righe è ancora più critica per la leggibilità a causa dello schermo più piccolo. L'impostazione 1.5 fornisce una comoda esperienza di lettura.
Intestazione H2:
Dimensione del font: Questa impostazione definisce la dimensione dei tuoi header secondari su uno schermo mobile. Più piccola di H1, ma ancora abbastanza prominente da distinguere la gerarchia delle informazioni.
Allineamento del testo: Come per H1, l'allineamento al centro spesso funziona bene per la visualizzazione mobile, ma l'allineamento ottimale può dipendere dal tuo contenuto e design specifici.
Interlinea: Gli stessi principi si applicano qui come per H1. L'interlinea è fondamentale per quanto facilmente i lettori possono passare da una riga all'altra, in particolare su schermi mobile più piccoli.
Intestazione H3:
Dimensione del font: I tuoi header terziari devono essere distinti ma non preponderanti. Una dimensione del font più piccola differenzia H3 dalle intestazioni H1 e H2, ma deve comunque essere leggibile sugli schermi mobile.
Allineamento del testo: L'allineamento per H3 può variare in base alle tue esigenze di design e al contenuto specifico. Mantenerlo coerente con H1 e H2 di solito aiuta la coerenza visiva.
Interlinea: Un'interlinea adeguata può garantire che il tuo contenuto sia accessibile e facile da leggere, anche su schermi piccoli.
Paragrafo:
Dimensione del font: Il testo dei paragrafi deve essere comodo da leggere su uno schermo mobile, il che spesso significa dimensioni del font leggermente più grandi rispetto a quelle che potresti usare su desktop.
Allineamento del testo: I paragrafi nella visualizzazione mobile sono tipicamente giustificati a sinistra per le lingue che si leggono da sinistra a destra, ma questo può dipendere dal tuo contenuto e dalle esigenze di design specifiche.
Interlinea: Mantenere una spaziatura delle righe comoda nel testo dei paragrafi è particolarmente cruciale per i contenuti di lunga durata. Rende il testo meno denso e più facile da seguire su schermi piccoli.
Pulsante:
Dimensione del font: Il testo sui pulsanti deve essere facile da leggere e toccare su un dispositivo mobile. Una dimensione del font più grande può aiutare a prevenire clic errati e rendere le call-to-action più chiare.
Ricorda, questi sono tutti punti di partenza: a seconda del tuo contenuto, pubblico e design generale, potrebbe essere necessario regolare queste impostazioni per ottenere un'esperienza di visualizzazione mobile ottimale.
Best practice per la configurazione della visualizzazione mobile delle email
Quando configuri le email per mobile, devi prestare molta attenzione ad alcune aree chiave che contribuiscono all'usabilità e all'efficacia generale delle tue email:
Usa un layout a colonna singola: I layout a colonna singola funzionano meglio per il mobile in quanto sono più facili da ridimensionare per schermi più piccoli. Più colonne possono risultare disordinate su uno schermo mobile e possono essere confuse per gli utenti da navigare.
Ottimizza le immagini: Assicurati che le tue immagini siano di alta qualità ma mantieni le dimensioni del file ridotte per un caricamento rapido. Considera l'uso di immagini responsive che si adatteranno automaticamente allo schermo su cui vengono visualizzate. Non dimenticare di includere il testo alternativo per l'accessibilità.
Pulsanti adatti al tocco: Sui dispositivi mobile, le tue CTA verranno molto probabilmente toccate con un dito piuttosto che cliccate con un mouse. Assicurati che i tuoi pulsanti siano abbastanza grandi da essere facilmente toccati: è consigliata una dimensione minima di 44px x 44px.
Limita la quantità di testo: Sui dispositivi mobile, il testo eccessivo può risultare scoraggiante. Sii conciso e suddividi il testo in piccoli blocchi gestibili. Usa punti elenco e sottotitoli per una facile leggibilità.
Usa un design email responsive: Questo garantirà che la tua email si adatti automaticamente allo schermo di qualsiasi dispositivo su cui viene visualizzata.
Anteprima e test: Fai sempre un'anteprima e testa le tue email su diversi dispositivi e client email per assicurarti che vengano visualizzate correttamente.
Includi spazio bianco: Lo spazio bianco non è spazio sprecato. Rende la tua email più pulita e facile da leggere su uno schermo piccolo.
Dimensione e stile del font: Mantieni la dimensione del font abbastanza grande da essere leggibile su schermi piccoli. Una dimensione di 14 per il testo e 22 per i titoli è spesso consigliata. Evita font elaborati che potrebbero essere difficili da leggere.
CTA chiare e concise: Assicurati che la tua call-to-action sia chiara, concisa e facile da trovare. Il posto migliore per un pulsante CTA è generalmente al centro dello schermo.
Ottimizza le righe dell'oggetto e il testo di anteprima: Mantieni le righe dell'oggetto brevi e coinvolgenti, e utilizza il testo di anteprima per fornire un riepilogo o un'anticipazione del contenuto della tua email. È anche una buona idea fare test A/B di diverse versioni delle righe dell'oggetto per trovare ciò che funziona meglio per il tuo pubblico.
Preferisci il testo normale alle immagini: Alcuni client email potrebbero non visualizzare automaticamente le immagini. Per garantire che il tuo messaggio arrivi, usa il testo il più possibile e usa le immagini solo quando necessario.
Opzione di disiscrizione: Rendi facile per i destinatari rinunciare alle tue email. Non solo è un requisito legale, ma migliora anche l'esperienza utente.
Accessibilità: Rendi la tua email accessibile a tutti. Ciò include l'uso di font più grandi, garantendo un buon contrasto tra testo e sfondo e includendo il testo alternativo per le immagini.
Ricorda, le best practice per la configurazione delle email mobile possono variare a seconda del tuo pubblico specifico e del tipo di contenuto che stai inviando. Testa sempre approcci diversi per vedere cosa funziona meglio per il tuo pubblico.
Ecco alcune risorse che potrebbero aiutare a consolidare ulteriormente le best practice per il design delle email mobile:
Letture di approfondimento sul design delle email mobile: https://www.emailonacid.com/blog/article/email-development/mobile-design-best-practices/
Letture di approfondimento sull'uso dei colori nel design delle email: https://www.creativebloq.com/inspiration/8-free-apps-for-picking-a-colour-scheme
Letture di approfondimento sull'ottimizzazione delle immagini per l'uso mobile: https://www.sendinblue.com/blog/optimize-images-email/
Letture di approfondimento sui suggerimenti per il design CTA: https://unbounce.com/email-marketing/cta-buttons-guide/
Letture di approfondimento sul miglior uso dello spazio: https://stripo.email/blog/email-layout-optimizer-8-rules-for-structuring-emails/
Letture di approfondimento sul miglior uso dello scroll: https://www.campaignmonitor.com/blog/email-marketing/2019/07/should-you-use-the-fold-in-email-marketing/
L'A/B testing delle email è necessario? Letture di approfondimento: https://sendpulse.com/blog/ab-testing-email-campaign
Letture di approfondimento sulle linee guida di accessibilità per le email: https://www.emailonacid.com/blog/article/email-marketing/email-accessibility-in-plain-english/
Letture di approfondimento sul design email mobile-friendly vs. responsive: https://litmus.com/blog/understanding-media-queries-in-html-email
Letture di approfondimento sulle best practice per la configurazione delle email mobile: https://www.mailup.com/resources/mailup-blog/email-design-responsive-design-and-mobile-email-marketing/
Come usare l'anteprima nel browser nell'Email Builder
Altri tutorial dalla Community
Gli utenti possono ora includere facilmente un link "Anteprima nel browser" nelle campagne email nuove ed esistenti, per rappresentare accuratamente il design dell'email.
Come aggiungere:
- Vai all'email marketing e apri qualsiasi campagna/template.
- Aggiungi l'elemento - URL di anteprima.
- Personalizza lo stile/la formattazione del testo modificandolo o usando l'opzione aggiungi 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 visualizza nel browser.
Domande frequenti
D: Voglio testare diversi elementi email per vedere cosa funziona meglio. Come può aiutarmi l'Email Builder?
Puoi utilizzare la funzione di test A/B, supportata come descritto qui: Guida al test A/B.
Questo ti consente di testare diversi componenti email, come righe dell'oggetto, contenuti e CTA, per vedere cosa risuona con il tuo pubblico.
Usa il template "Restaurant Generic". Offre una varietà di layout adatti a presentare nuovi piatti.
D: Gestisco uno studio legale e ho bisogno di annunciare nuovi servizi. Quale template funzionerà meglio?
I template "Legal Minds" o "Justice Law Firm" sono indicati. Sono professionali e perfetti per presentare i servizi.
D: Gestisco un'organizzazione di beneficenza. Come posso usare l'Email Builder per sollecitare donazioni?
Usa i template "Helping Hand Charity" o "Giving Back Foundation" per creare messaggi convincenti sulla tua causa e sull'importanza delle donazioni.
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 per la gestione finanziaria. Quale template funzionerà meglio?
Usa i template "Accurate Accounting Agency" o "Accounting Generic". Sono perfetti per condividere consigli e consulenze finanziarie.
D: Gestisco un'agenzia immobiliare. Come posso usare l'Email Builder per mostrare nuove proprietà?
Puoi usare qualsiasi template "Real Estate". Ognuno offre un layout professionale per presentare le proprietà.
D: Gestisco un salone di bellezza e voglio annunciare nuovi servizi e promozioni. Quale template devo usare?
I template "Radiance Beauty" o "Hair Salon Generic" sarebbero perfetti. Sono progettati per evidenziare servizi e offerte di bellezza.
D: Gestisco un'agenzia di viaggi e voglio promuovere i nostri pacchetti vacanza. Cosa consigliate?
I template "Pinnacle Travel" e "Getaways Travel" sono progettati per presentare pacchetti di viaggio.
D: Gestisco uno studio dentistico e voglio inviare promemoria per le visite di controllo. Quale template è il migliore?
I template "Dentist" sono progettati per gli studi dentistici.
Usa qualsiasi template "Yoga Generic" o i template "Yoga" numerati. Sono perfetti per condividere orari delle lezioni e consigli sulla salute.
D: Gestisco un'officina di riparazione auto. Come posso usare l'Email Builder per annunciare i miei servizi e promozioni?
Puoi usare i template "Auto Repair" per promuovere i tuoi servizi e offerte.
Dovresti considerare di usare qualsiasi template "Gym". Sono progettati specificamente per contenuti legati al fitness.
Il template "Holistic Wellness Image Layer Generic" sarebbe una scelta eccellente. È perfetto per consigli e suggerimenti sul benessere.
D: Gestisco un centro medico estetico e voglio annunciare nuovi trattamenti e promozioni. Quale template è il migliore?
I template "MedSpa" sono progettati per presentare trattamenti e offerte in un centro medico estetico.
D: Gestisco un servizio di giardinaggio/paesaggistica. Come posso usare l'Email Builder per mostrare il mio lavoro?
Il template "Landscaping Image Layer Generic 1" offre un layout professionale per presentare lavori e servizi di paesaggistica.
Usa i template "Credit Score". Sono specificamente progettati per condividere consigli e suggerimenti finanziari.
D: Gestisco un'azienda di energia solare. Quale template devo usare per annunciare nuovi prodotti e servizi?
I template "Solar Generic" o i template "Solar" numerati sono ideali per presentare prodotti e servizi solar.
D: Gestisco uno studio legale e voglio inviare newsletter con consigli legali. Quale template funzionerà meglio?
Puoi usare i template "Attorney Generic" o "Legal Minds" per condividere consulenze e aggiornamenti legali.
D: Gestisco una palestra di arrampicata. Come posso usare l'Email Builder per promuovere le nostre classi di allenamento?
Usa il template "Peak Climbing" per presentare le tue classi di arrampicata e sessioni di allenamento.
D: Gestisco un rifugio per animali e voglio inviare aggiornamenti sugli animali disponibili per l'adozione. Quale template devo usare?
I template "Dog Shelter" e "Cat's Cradle" sono perfetti per promuovere gli animali disponibili per l'adozione.