Cos’è un’ancora o Anchor in HTML?
L’anchor o ancoraggio è il link di destinazione che specifichiamo quando creiamo un collegamento ipertestuale. Sono link che ci portano a un’altra pagina web, aprono un’email, un telefono, scaricano un file o, come vedremo in questo argomento, ci portano a un altro punto della stessa pagina. Vediamo un esempio:
<a href="https://lacolmenatecnologica.com/">La Colmena Tecnológica</a>Risultato: La Colmena Tecnológica
In questo esempio di codice HTML vediamo come il testo che si trova tra i tag <a> (apertura) e </a> (chiusura) conterrà un collegamento ipertestuale all’URL https://lacolmenatecnologica.com/. Cioè, cliccando sul testo La Colmena Tecnológica il browser ci invierà alla destinazione che abbiamo specificato nell’attributo href.
Naturalmente non è necessario conoscere l’HTML per creare un collegamento ipertestuale con Elementor, ma non fa male saperlo.
Tipi di ancora
Nella seguente tabella puoi vedere in verde vari tipi di ancore, alcune necessitano di un prefisso come l’email che deve essere preceduta da mailto: o un telefono che deve essere preceduto da tel:. Per forzare il download di un file invece della sua visualizzazione, dovremo aggiungere l’attributo download.
| Tipo | Codice HTML |
|---|---|
| URL o link | <a href=”https://lacolmenatecnologica.com/“>Pagina web</a> |
| <a href=”mailto:mario@lacolmenatecnologica.com“>Pagina web</a> | |
| Telefono | <a href=”tel:+34665123123“>Pagina web</a> |
| Scaricare file | <a href=”https://lacolmenatecnologica.com/AFI_grafico.pdf” download=”AFI Gráfico”>Pagina web</a> |
| Stessa pagina | <a href=”#inizio“>Pagina web</a> |
| Ancora a un’altra pagina | <a href=”https://lacolmenatecnologica.com/nome-della-pagina/#inizio“>Pagina web</a> |
Aggiungere un link alla stessa pagina con Elementor
Per aggiungere un link che vada a un altro punto della stessa pagina dovremo seguire questi passaggi.
- Clicchiamo sul widget a cui vogliamo spostarci quando facciamo clic, può essere una sezione o qualsiasi widget all’interno della pagina che stiamo modificando. In questo esempio useremo una sezione, quindi clicchiamo sulla sua scheda per selezionarla
- Poi nella colonna di sinistra clicchiamo sulla scheda Avanzate.
- Nella sezione Avanzate della scheda Avanzate inseriamo un nome di identificazione nel campo ID CSS.
Raccomandazioni per il nome di ID CSS:- Scrivere sempre in minuscolo.
- Sostituire gli spazi con trattino medio o basso, esempio: cosa_possiamo
- Usare solo caratteri alfabetici e numeri.
- Non confondiamoci, il simbolo # non è necessario metterlo qui, lo metteremo dopo nel collegamento ipertestuale.
- Questo nome è unico in tutta la pagina, non dobbiamo usarlo di nuovo per altri elementi. Un ID definisce un unico elemento.
- Ora cliccheremo sull’elemento della nostra pagina dove vogliamo aggiungere il collegamento ipertestuale, in modo che quando facciamo clic si sposti alla sezione a cui abbiamo assegnato l’ID cosa_possiamo. Possiamo mettere questo link in qualsiasi widget che ammetta link o in un testo attraverso l’editor di testo. In questo caso useremo un widget Icona per aggiungere questo link alla stessa pagina.
- Nella colonna di sinistra clicchiamo sulla scheda Contenuto e inseriamo il nome dell’ID nel campo Link, ora sì, preceduto dal simbolo cancelletto #. In questo caso: #cosa_possiamo
- Una volta fatto questo salviamo e abbiamo il nostro link alla stessa pagina completato.
Possiamo mettere questo stesso link in altri widget o testi della nostra pagina per collegarli a quella sezione. Questo tipo di link si usa solitamente in pagine il cui contenuto è esteso per facilitare all’utente l’accesso al contenuto di cui ha bisogno. Inoltre possiamo anche usare il collegamento ipertestuale completo in un’altra pagina, come vediamo di seguito, per aprire una pagina diversa e spostarsi al punto che vogliamo:
https://lacolmenatecnologica.com/#que_podemosDobbiamo solo aggiungere alla fine dell’URL della pagina l’ID preceduto dal simbolo cancelletto #. Ora possiamo usare questa ancora in qualsiasi altra pagina per portare l’utente non solo a una pagina, ma anche al punto specifico di quella pagina che vogliamo.