Ricevi aggiornamenti
su Messenger
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

Dolcetto o scherzetto? 9 idee per le newsletter di Halloween

Halloween si avvicina e la casella inbox è già piena di newsletter a tema. Qui trovi 9 idee per dare un irresistibile tocco dark alle ...

Continua a leggere

Riattiva i contatti dormienti del tuo e-commerce: la strategia in 5 step

Ti spieghiamo come recuperare clienti – dunque conversioni e vendite – del tuo store online. Alla scoperta delle strategie di Email Marketing dedicate alla riattivazione ...

Continua a leggere

Nessuno apre le tue email? Inizia a lavorare sul subject

L'Email Marketing resiste con successo da oltre due decenni. In effetti, sembra che l'Email Marketing sia più forte che mai, raggiungendo un ROI medio del ...

Continua a leggere

Cosa rende un’email davvero geniale? 7 fattori

Oggetto, focus, follow-up e altro ancora. Ecco 7 indirizzi operativi per creare email geniali, efficaci e incentrate sul cliente. Ogni volta che qualcosa di nuovo arriva ...

Continua a leggere

Come Iperal ha incrementato del 30% i clic nelle email

Abbiamo chiesto alla realtà della Grande distribuzione di raccontarci come ha raggiunto performance di Email Marketing nettamente superiori alla media di settore. Nel nostro blog spesso ...

Continua a leggere

Ci sono 5 ottimi motivi per inserire video nelle tue newsletter

Il formato video rappresenterà oltre l'80% del traffico web totale entro il 2019: se come motivazione non bastasse, ecco 5 ragioni per integrare il potenziale ...

Continua a leggere