5 min.

Aggiungere anchor link in HTML ai messaggi email ne facilita lo scorrimento e la navigazione. Oggi scopriamo come fare, grazie a un breve tutorial.

Gli anchor link nelle email si dimostrano particolarmente utili per le newsletter lunghe e ricche di contenuti. Offrono la possibilità ai lettori di scorrere velocemente il testo e di passare direttamente alla sezione di loro interesse.

Ecco un rapido esempio preso da Mobile Marketing Watch, che utilizza i link di ancoraggio nella parte superiore della newsletter quotidiana in modo che i lettori possano navigare rapidamente tra le varie sezioni.

Anchor link 00

Il tutorial di oggi

Un’ottima notizia: l’aggiunta di un anchor link alla tua campagna email è più facile di quanto pensi. Devi solo essere in possesso di nozioni basilari sulla struttura HTML dei link di ancoraggio. Come vedremo, un anchor link è costituito da due parti: l’URL e l’effettivo tag di ancoraggio a cui il link rimanda all’interno dell’email.

Osserviamo un esempio specifico di newsletter per capire come replicare i suoi link di ancoraggio utilizzando l’editor BEE di MailUp e seguiamo la stessa procedura.  Ecco un breve video di riepilogo (in inglese):

L’ispirazione: un ottimo esempio di anchor link in email

Troviamo spesso link di ancoraggio molto efficaci in Lenny Letter, una newsletter ideata dall’attrice e regista Lena Dunham e dalla sua miglior amica e regista Jenni Konner. Lenny contiene principalmente testi lunghi, saggi e storie che invitano alla riflessione stimolando l’interesse dei lettori.

Tutti questi contenuti sono forniti all’interno dell’email stessa. L’intestazione include link di ancoraggio colorati che rimandano a ciascuna storia riportata nell’email. Ecco come vengono visualizzati i link nella parte in alto (si inizia da Jessica Grose per terminare con Lena Dunham):

Anchor link Lenny Letter

Ogni colore corrisponde alla storia dell’autore, quindi se ad esempio un lettore è incuriosito prima di tutto dalla storia di Kaitlyn Greenidge, toccando il rispettivo nome (l’anchor link arancione) verrà rimandato direttamente alla sezione di questa storia (in cui anche il titolo “I Love Betty” è di colore arancione).

Fai clic qui per visualizzare la versione integrale della newsletter (è stata tagliata a causa della lunghezza).

I 4 step per inserire l’anchor link nelle email

Ora che hai familiarità con il concetto di anchor link nelle email, scopriamo come aggiungere questi link con l’editor BEE di MailUp. Basta seguire i passaggi qui di seguito.

Step 1: Crea l’email

Per iniziare, ricreeremo l’email di Lenny Letter nell’editor BEE. L’intestazione è semplice: usando un layout di base a una colonna, trascina l’immagine di Lenny e aggiungi il testo (in Courier) sotto di essa. Quindi, trascina una struttura a quattro colonne per organizzare gli anchor link in alto.

Anchor link 01

Aggiungi ancora testo e immagini per ricreare l’intestazione, l’introduzione e la prima storia.

Anchor links 02

Dopo aver formattato il colore del testo, si possono aggiungere i link.

Anchor link 03

Step 2: Scegli un nome e una posizione per il link di ancoraggio

Adesso è il momento di rinominare e posizionare il primo ancoraggio nella sezione corretta dell’email. Per questo passaggio useremo il blocco di contenuto HTML personalizzato presente nel menu Contenuto per aggiungere l’ancoraggio (devi pensare a questo elemento come a un segnalibro).

Anchor link 05

Trascina e rilascia il blocco HTML nel punto a cui desideri che il link “salti”; nel nostro caso, proprio sopra la storia di Jessica Grose intitolata “Namaslay”.

Anchor link 06

Ecco come appare il blocco HTML una volta in posizione, ma prima di aggiungere il codice:

Anchor link 07

Per creare l’ancoraggio, incolla quanto segue in una riga di codice HTML nel campo Proprietà Contenuto del blocco HTML personalizzato sulla destra: <a name=”grose”> </a> <br />

Anchor link 08

Il nome tra virgolette (“grose”) può essere scelto a piacere, ma deve essere facile da ricordare (idealmente una parola) perché questa è la parola chiave utilizzata quando effettui il collegamento al tag di ancoraggio.

Step 3: Collega l’ancoraggio

Ora che è stata specificata la posizione dell’ancoraggio, è necessario collegare il testo dell’intestazione. Basta evidenziare “Jessica Grose” e scegliere l’opzione Inserisci link nella barra degli strumenti.

Anchor text 09

Nel menu, collega l’ancoraggio inserendo #grose nel campo URL.

Anchor link 10

Affinché il collegamento possa funzionare, ricordati di includere l’hashtag (#) prima del nome e assicurati che il nome corrisponda a quello scelto in precedenza. E, naturalmente, più il nome è breve e semplice, più è facile da ricordare!

Ora hai creato le due parti dei link di ancoraggio: il testo di ancoraggio e il link che rimanda ad esso. Clona l’icona: ​​duplica il blocco di contenuti HTML, quindi copialo e trascinalo nella sezione successiva. Aggiorna il nome tra virgolette e collega il testo nella parte superiore ai nuovi ancoraggi creati.

Anchor link 11

Step 4: Invia un’email di prova per testare i link di ancoraggio

Scegli Invio veloce dal menù in alto a destra per inviare una preview dell’email al tuo indirizzo di posta elettronica.

Anchor link 12

Una volta ricevuta l’email, fai clic sui link di ancoraggio e osserva la magia, come dimostrato in questa breve animazione:

Anchor link 13

Voilà! Finito. Funziona!

Compatibilità degli anchor link con i client di posta elettronica

I link di ancoraggio non sono supportati da tutti i client di posta elettronica. Tieni presente questo fattore quando devi decidere se aggiungere un indice alle tue newsletter. Ecco un rapido riepilogo dei client di posta elettronica più diffusi (per approfondire il tema, fai riferimento al rapporto relativo alle quote di mercato dei principali client di posta elettronica):

Compatibilità client con anchor link

Inizia subito a creare email con anchor link

Hai provato ad aggiungere link di ancoraggio alle tue email? A prescindere dai problemi di compatibilità con i client di posta elettronica, l’aggiunta di anchor link alle email è una tattica di design piuttosto semplice ed efficace per facilitare gli utenti nella lettura dei contenuti delle newsletter.

Se non utilizzi ancora MailUp e il suo intuitivo editor drag & drop, iscriviti per una prova gratuita e ottieni l’accesso a modelli e funzionalità di design avanzate.

Prova MailUp per 30 giorni

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

4 modi per segmentare i destinatari e inviare email performanti

Un'email uguale per tutti inviata settimanalmente non ti darà risultati 40 volte migliori rispetto ai social media. Vediamo allora 4 diversi modi per segmentare gli ...

Continua a leggere

Email Marketing d’agosto: 6 consigli strategici e 4 trend di Email Design

Tempo di vacanze, da godersi non prima di aver impostato alcune attività: dall’automazione dei flussi alle frequenze, fino ai migliori layout da intonare alla bella ...

Continua a leggere

Come fare Email Marketing nel 2019: i must per una strategia avanzata

Il canale email conoscerà un’ulteriore espansione nei prossimi anni. Restando al di qua di scenari avveniristici, vediamo le attività imprescindibili per fare Email Marketing nell’anno ...

Continua a leggere

Segmentazione + Personalizzazione + Automation: tutto quello che puoi fare con i Filtri

Dopo averteli presentati, vediamo le attività che possono essere condotte con i nuovi filtri di MailUp, per portare la tua strategia di Email Marketing a ...

Continua a leggere

Personalizzare le email: i 2 tool fondamentali

Immagina di inviare email che si compongono automaticamente con i contenuti più in linea per ciascun destinatario. Puoi farlo: scopriamo due funzioni di personalizzazione con ...

Continua a leggere

Come ha fatto Walmart Argentina ad arricchire l’esperienza d’acquisto?

Abbiamo chiesto alla multinazionale di raccontarci come, grazie all’integrazione tra MailUp e VTEX, ha raggiunto un livello di comunicazione ultra-personalizzata per ciascuna fase del rapporto ...

Continua a leggere