Aggiungere link di ancoraggio al contenuto dell'email con l'HTML

Un link di ancoraggio permette al lettore di saltare direttamente a una sezione precisa della tua email, ad esempio da un sommario in alto a un articolo più in basso. È particolarmente utile nelle newsletter lunghe o che trattano più argomenti (notizie, eventi, raccolte fondi).

In Yapla Newsletter, i link di ancoraggio si creano con due porzioni di codice HTML: un’ancora, posizionata nel punto di destinazione, e un link che punta a quell’ancora.

Alcune app di posta, tra cui l’app Gmail, non supportano i link di ancoraggio. Il resto dell’email viene visualizzato normalmente, ma il clic sul link non ha alcun effetto. Fai sempre un test della tua email prima dell’invio.

Aggiungere l’ancora nel punto di destinazione

Nell’editor dell’email, trascina un blocco HTML appena sopra la sezione a cui deve portare il link.
Incolla il codice seguente nel blocco, sostituendo eventi con un nome breve che descriva la sezione:

<a id="eventi" name="eventi"></a>

Il nome dell’ancora non deve contenere spazi, accenti o caratteri speciali e deve essere unico nell’email.

Aggiungere il link all’ancora

Nel punto in cui deve comparire il link (in un sommario, ad esempio), aggiungi un blocco HTML e incolla il codice seguente, riprendendo esattamente lo stesso nome preceduto dal simbolo #:

<p><a href="#eventi">Scopri i nostri prossimi eventi</a></p>

Ripeti l’operazione per ogni sezione: un’ancora e un link per ogni destinazione.

Esempio completo

Ecco un esempio di sommario che rimanda a due sezioni della stessa email:

<p><strong>In questa newsletter:</strong></p>
<ul>
  <li><a href="#eventi">I nostri prossimi eventi</a></li>
  <li><a href="#volontari">Cerchiamo volontari</a></li>
</ul>

<!-- Più in basso nell’email -->
<a id="eventi" name="eventi"></a>
<h2>I nostri prossimi eventi</h2>

<a id="volontari" name="volontari"></a>
<h2>Cerchiamo volontari</h2>

Risoluzione dei problemi

Il link non porta da nessuna parte

Verifica che il nome dopo il # del link corrisponda esattamente al nome dell’ancora (maiuscole comprese).
Assicurati che nessun’altra ancora abbia lo stesso nome nell’email.
Verifica che il nome non contenga spazi o caratteri speciali.

Il codice compare così com’è nell’email

Usa un blocco HTML e non un blocco di testo.
Verifica che ogni tag aperto sia chiuso correttamente.

Il link funziona su computer, ma non su mobile o in Gmail

È un limite dell’app di posta del destinatario. Mantieni le sezioni brevi e con titoli chiari, così la lettura resta facile anche senza i link.