I link online pongono le basi per una semplice interattività online, sia che si tratti di inviare gli utenti a pagine web, documenti scaricabili o altre applicazioni.
Il bello è che potete creare link cliccabili in molte applicazioni, tra cui sistemi di gestione dei contenuti, creatori di siti web, word processor e client di posta elettronica.
In questa guida presentiamo tutto ciò che dovete sapere su come rendere un link cliccabile: vi spieghiamo anche le basi di un link e la terminologia che potreste incontrare durante la creazione di un link.
Nozioni di base sui collegamenti ipertestuali (Hyperlink)
Esistono diversi termini per indicare che un contenuto, come un testo o un’immagine, offre la possibilità di cliccare, ovvero di posizionare il cursore sul contenuto e navigare altrove.
Alcuni di questi termini includono:
- Link
- Collegamento ipertestuale
- Link cliccabile
Tecnicamente, tutti questi elementi hanno una propria definizione, ma al giorno d’oggi si usano in modo intercambiabile.
La capacità dell’utente di interagire con i contenuti online si basa su questi collegamenti ipertestuali, in cui l’utente può scorrere su un pezzo di testo, un’immagine o un pulsante e cliccarci sopra, inviandolo così a un altro contenuto (come una pagina web esterna) o a eseguire un’azione (come chiamare un numero di telefono dallo smartphone).
Una semplice versione codificata in HTML di un collegamento ipertestuale si presenta così:
<a href="https://example.com/">the hyperlink text</a>Ma diventa più complesso quando si aggiungono elementi opzionali come i target e gli elementi nofollow:
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text</a>Ecco gli elementi che compongono un collegamento ipertestuale:
Continuate a leggere per conoscere ciascuno di questi elementi e il loro funzionamento.
Il contenuto
Potete creare link cliccabili con due tipi di contenuto:
- Testo
- Grafica
Ciò significa che se l’applicazione che state utilizzando supporta i collegamenti ipertestuali, potete trovare qualsiasi riga di testo scritto o immagine all’interno del vostro contenuto e trasformarla in un link cliccabile.
Testo con collegamento ipertestuale
Il testo è una delle opzioni di contenuto per la creazione di link cliccabili.
Se usate un editor come WordPress, potete evidenziare il testo che desiderate nella schermata dell’editor e poi selezionare il pulsante Link.
In questo modo il link viene visualizzato sul frontend, di solito con un testo colorato e sottolineato.
Un collegamento ipertestuale di testo cambia aspetto quando un utente ci passa sopra con il mouse: può cambiare colore o cambiare lo stile della sottolineatura per specificare che si tratta di un link cliccabile.
Inoltre, quando si passa con il mouse su un link testuale, i browser di solito mostrano un’anteprima dell’URL collegato per vedere dove porta.
Immagini con collegamento ipertestuale
Molti programmi, tra cui WordPress, vi permettono di generare collegamenti ipertestuali utilizzando media online, come le immagini.
Questo funziona selezionando un’immagine nel backend (invece del testo) e aggiungendo l’URL desiderato tramite la funzione Link.
Una volta pubblicata, passando sopra l’immagine la freccia del cursore standard si trasformerà in un cursore a forma di mano, e il browser mostrerà un’anteprima dell’URL collegato.
Che si tratti di un link a un’immagine o a un testo, cliccando su di esso si attiva un’azione, per esempio l’invio dell’utente a un altro URL.
Come si presenta il codice
Il contenuto del testo o dell’immagine di un collegamento ipertestuale è rappresentato dalla stringa “The Link Text” nell’esempio seguente:
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">The Link Text</a>Per creare il vostro link cliccabile dovete sostituire il testo con il vostro contenuto.
Per un link testuale, il testo cliccabile si trova subito prima della parentesi di chiusura </a>.
I link alle immagini sono un po’ diversi perché devono includere l’URL dell’immagine (meglio se caricata nel database dei media del vostro sito).
L’URL va inserito tra le virgolette nella sezione img src=””.
Ci sono altri elementi da aggiungere ai link alle immagini, come per esempio:
- Un tag alt (alt=””): Un testo che descrive l’immagine per i motori di ricerca e per le persone cieche o ipovedenti che leggono con una tecnologia assistiva.
- Una classe (class=””): Un nome codificato per usare l’immagine in altre parti del codice o dei file del vostro sito web.
L’URL
Come parte di un collegamento ipertestuale, l’URL serve come destinazione o azione che si verifica quando si fa clic sul link.
Non tutti gli URL si riferiscono a una pagina web. Potreste scoprire che alcuni collegamenti ipertestuali hanno la funzionalità “click to call”, che permette agli utenti di chiamare un numero di telefono direttamente dal loro smartphone con un solo clic.
Un’altra opzione è quella di inserire una mappa che apre l’applicazione delle mappe installata nel telefono dell’utente.
Come si presenta il codice
Gli URL nei link cliccabili vengono inseriti tra virgolette nella parte <a href=”” del collegamento ipertestuale.
Per esempio, la parte https://www.example.com del codice del seguente collegamento ipertestuale è l’URL:
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 
Alcuni URL portano a documenti scaricabili, mentre altri richiedono una codifica speciale. Per esempio, un link “Click to call” (in italiano “clicca per chiamare”) richiede di inserire tel: e un numero di telefono tra le virgolette href=””.
Scheda di destinazione
La scheda di destinazione è una parte opzionale di un collegamento ipertestuale. Specifica se il contenuto si apre nella stessa scheda del browser o in una nuova scheda del browser.
Su WordPress e su molte altre applicazioni, potete aggiungere una scheda di destinazione senza toccare il codice ma usando l’editor visuale.
Basta disattivare l’interruttore “Apri in una nuova scheda” se volete che il link si apra nella stessa scheda visualizzata dall’utente.
In alternativa, potete attivare l’interruttore “Apri in una nuova scheda”, che aggiunge automaticamente un attributo _blank alla codifica del collegamento ipertestuale e apre l’URL in una nuova scheda quando viene cliccato.
Come si presenta il codice
Queste opzioni vengono attivate aggiungendo e modificando l’elemento target=”” in un collegamento ipertestuale.
Sebbene l’attributo target abbia diversi valori, come _blank, _parent, _self e _top, generalmente usiamo solo il valore _blank.
Un collegamento ipertestuale senza il target _blank ha questo aspetto:
Come vedete non è diverso da un normale collegamento ipertestuale. Questo perché i collegamenti ipertestuali, per impostazione predefinita, non si aprono in una nuova scheda. Quindi non dovete fare nulla per il link, a meno che non vogliate che si apra in una scheda separata del browser.
Un collegamento ipertestuale con l’obiettivo _blank, che fa sì che l’URL si apra in una scheda separata, ha un aspetto simile a questo:
<a href="https://www.example.com" target="_blank">View the entire menu.</a>
nofollow, noreferrer e noopener
Ai link cliccabili si possono aggiungere anche altri elementi, la maggior parte dei quali contribuisce alla sicurezza o a nasconderli dai motori di ricerca:
- nofollow: un attributo che impedisce al “SEO link juice” di raggiungere il sito web collegato. Questo aiuta a proteggere il vostro sito web e può nascondere il link ai motori di ricerca.
- noopener: è un attributo HTML che viene aggiunto automaticamente ai link di WordPress contrassegnati come “Apri in una nuova scheda”. Viene abbinato a noreferrer per ridurre al minimo alcuni problemi di sicurezza nell’apertura dei link in nuove schede.
- noreferrer: spesso abbinato a noopener, l’attributo noreferrer blocca il passaggio di tutte le informazioni di riferimento al sito di destinazione, aggiungendo ulteriore sicurezza e potenzialmente bloccando i dati provenienti da siti di tracciamento e siti di affiliazione.
Non è possibile identificare nessuno di questi attributi di link osservando un link sul frontend di un sito: per vederli è necessario analizzare il codice HTML.
Come si presenta il codice
Tutti questi attributi del link si trovano tra le virgolette nella parte rel=”” del link cliccabile.
È possibile includerli tutti in un unico link.
In alternativa, potreste notare che alcuni collegamenti ipertestuali includono solo l’attributo noreferrer noopener o un nofollow senza gli altri due. Tutto dipende da ciò che la persona che ha creato il link vuole ottenere.
Motivi per Rendere un Link Cliccabile
Quando imparate a rendere un link cliccabile, è importante capire tutte le ragioni che stanno alla base del collegamento ipertestuale. In questo modo, sarete consapevoli delle caratteristiche e potrete sfruttarle in futuro.
Ecco i principali motivi per cui potreste voler rendere un link cliccabile:
- Collegamento ipertestuale generale interno/esterno verso un URL: potete creare dei link testuali che conducono al di fuori del vostro sito web (per esempio per citare le fonti o per rafforzare un’argomentazione con uno studio di terze parti) o ad altre pagine del vostro sito (particolarmente utile per inviare i lettori a contenuti rilevanti e farli rimanere sul vostro sito per un periodo di tempo più lungo).
- Collegamento di immagini: potete aggiungere collegamenti ipertestuali a URL, file multimediali o pagine allegate a qualsiasi immagine su WordPress e su molti altri costruttori di siti web.
- Pulsanti con link: i pulsanti CSS offrono opzioni per l’aggiunta di collegamenti ipertestuali. Rendono più accattivante l’esperienza visiva del vostro link cliccabile rispetto al testo semplice.
- Numeri di telefono: spesso chiamati “Click to call”, i collegamenti ipertestuali che portano a numeri di telefono aprono applicazioni con funzionalità di chiamata, come l’app del telefono sul vostro dispositivo o Skype.
- Indirizzi: il collegamento ipertestuale a coordinate specifiche su Google o Apple Maps significa che l’utente che fa clic sul link avrà le informazioni automaticamente inserite nella sua applicazione GPS/mappa per la navigazione.
- Indirizzi email: è simile ai link “Click to call”, ma con gli indirizzi email. Attiva l’applicazione di posta elettronica su un telefono o un computer, insieme a una nuova composizione di email con un indirizzo email specifico aggiunto nel campo A.
- Creare link di ancoraggio: potete collegarvi a contenuti della stessa pagina usando i link di ancoraggio; si usano molto per creare un indice all’inizio di un lungo post del blog. A volte vengono chiamati “bookmark hyperlinks” (cioè collegamenti ipertestuali a segnalibro).
- Offrire un file scaricabile: WordPress – e altri costruttori di siti web – offrono strumenti per caricare file SVG, PDF, HTML e molto altro ancora; potete anche caricare elementi in blocco. Potete poi creare collegamenti ipertestuali all’interno degli articoli/pagine per consentire agli utenti di scaricare i file direttamente sui loro dispositivi.
Ora che abbiamo analizzato i tipi di collegamenti ipertestuali e i motivi per cui potreste volerne creare uno, continuate a leggere per scoprire come fare.
Come rendere un link cliccabile
Il metodo che scegliete per creare un link dipende dalla vostra esperienza. Potete optare per un metodo visivo più semplice o considerare l’uso del codice HTML.
Esistono quattro metodi principali per rendere un link cliccabile:
- Editor Classico di WordPress
- Editor dei Blocchi di WordPress (Gutenberg)
- HTML
- Una qualsiasi interfaccia grafica (GUI)
Tenete presente che tutti questi metodi funzionano in modo simile per gli articoli e le pagine di WordPress. Queste guide (in particolare il metodo 4) sono utili anche per altre applicazioni/siti web, ma alcune terminologie/funzionalità possono variare.
Metodo 1: Usare l’Editor Classico di WordPress
Se state lavorando con l’Editor Classico di WordPress, il modo più semplice per creare un link cliccabile su un articolo o una pagina è attraverso la scheda Editor visuale.
Per farlo, andate nella sezione Articoli o Pagine della vostra bacheca di WordPress e selezionate una pagina o un articolo che desiderate modificare, usando la scheda Visuale.
Passo 1: Evidenziare il testo che volete rendere cliccabile
Per un link testuale, è meglio che il testo sia già stato inserito nell’editor visuale. Poi usate il cursore per evidenziare la stringa di testo.
Se state trasformando un’immagine in un link cliccabile:
Selezionate l’immagine in modo da vedere una barra degli strumenti dell’editor e un bordo intorno all’immagine.
Passo 2: Fare clic sul pulsante Inserisci/Modifica Link
Con il testo ancora evidenziato, scorrete sul pulsante Inserisci/Modifica link nella barra degli strumenti dell’editor visivo. L’icona del pulsante ha l’aspetto della maglia di una catena.
Se state trasformando un’immagine in un link cliccabile:
Con l’immagine ancora selezionata, fate clic sul pulsante Inserisci/Modifica link (quello che assomiglia alla maglia di una catena).
Passo 3: Incollare un URL
In questo modo viene visualizzato un campo URL vuoto. Copiate (con Command + C o Ctrl + C) l’URL del link desiderato negli appunti del vostro dispositivo. Questo link può essere un URL esterno trovato su internet o un URL del vostro sito web.
Una volta copiato, incollatelo (con Command + V o Ctrl +V) nel campo.
Se state trasformando un’immagine in un link cliccabile:
Incollate l’URL desiderato nel campo rivelato, quindi fate clic sul pulsante Applica per attivare il link.
Passo 4: Applicare il link
Fate clic sul pulsante Applica per attivare il link e rendere il testo cliccabile.
Ora dovreste vedere la parte di testo con il collegamento ipertestuale sottolineata e potenzialmente di un colore diverso.
Se fate clic sul collegamento ipertestuale nell’editor, vedrete un link reale da testare, insieme agli strumenti di modifica nel caso in cui vogliate cambiare il collegamento ipertestuale.
Opzioni aggiuntive
Tratteremo i link cliccabili più avanzati nelle sezioni successive, ma vale la pena notare che ogni link creato nell’Editor Classico di WordPress ha un pulsante Opzioni link per aggiungere ulteriori impostazioni.
Qui potete:
- Regolare l’URL
- Modificare il testo del link
- Aprire il link in una nuova scheda
- Cercare e linkare i contenuti esistenti sul vostro sito
Se state trasformando un’immagine in un link cliccabile:
L’Editor Classico di WordPress offre un secondo modo per rendere le immagini cliccabili. È sufficiente selezionare l’immagine e scegliere il pulsante Modifica (simile a una matita) nella barra degli strumenti a comparsa.
Scorrete fino al campo Link a, che vi permette di collegarvi al campo URL personalizzato. Basta incollare l’URL desiderato nel campo sottostante e fare clic su Aggiorna.
Potete anche selezionare il menu a tendina Link a per creare un collegamento ipertestuale:
- File multimediali
- Pagine allegate
- URL personalizzati
- Nessuno
Metodo 2: Usare l’Editor dei Blocchi di WordPress (Gutenberg)
I collegamenti ipertestuali funzionano allo stesso modo sia negli articoli che nelle pagine dell’Editor dei Blocchi di WordPress.
Per iniziare, andate nella sezione Articoli o Pagine della vostra bacheca di WordPress. Selezionate un singolo articolo o una pagina che volete modificare, quindi seguite i passaggi seguenti.
Passo 1: Evidenziare il testo
Digitate del testo nell’editor. Con il cursore, evidenziate la parte di testo che volete rendere cliccabile. Nella barra degli strumenti a comparsa, fate clic sul pulsante Link.
Se state trasformando un’immagine in un link cliccabile:
Per rendere un’immagine cliccabile nell’Editor dei Blocchi di WordPress è necessario aggiungere un’immagine all’editor.
Per farlo, fate clic sul pulsante Aggiungi blocco, quindi selezionate il blocco Immagine. Caricate l’immagine a cui volete aggiungere il link.
- Aggiungete un blocco immagine
Fate clic sull’immagine in modo che sia evidenziata/selezionata, quindi scegliete il pulsante Inserisci link nella finestra a comparsa della barra degli strumenti.
Passo 2: Incollare l’URL e inviare il link
Verrà visualizzato un popup con un campo vuoto. Incollate l’URL che volete collegare, quindi fate clic su Invio sulla tastiera o sul pulsante Invia per attivare il link cliccabile.
Di conseguenza, il testo ipertestuale viene visualizzato con un colore diverso e potete fare clic sul link per vedere un’anteprima del contenuto e aggiungere impostazioni di collegamento più avanzate.
Se state trasformando un’immagine in un link cliccabile:
Esistono poi le opzioni per aggiungere link ai file multimediali e alle pagine degli allegati, se vi servono.
Altrimenti, incollate un URL nel campo vuoto del link. Fate clic sul pulsante Applica per attivare il link. Dopo la pubblicazione, chiunque clicchi sull’immagine verrà portato al link che avete specificato.
Per ulteriori opzioni, fate clic sul pulsante con l’icona della freccetta verso il basso (v) per:
- Aprire il link in una nuova scheda
- Aggiungere link Rel
- Aggiungere la classe CSS al link
Opzioni Aggiuntive
Approfondiremo le strutture avanzate dei collegamenti ipertestuali nelle sezioni successive, ma dovete sapere che il pulsante Modifica è disponibile se fate clic con il cursore sul collegamento appena creato.
La pagina di modifica mostra i campi per:
- Modificare il testo del link
- Modificare l’URL
- Aprire il link in una nuova scheda
Altri link cliccabili da creare nell’Editor dei Blocchi
L’Editor dei Blocchi di WordPress amplia le opzioni di link disponibili. Grazie alle decine di blocchi integrati potete creare una sorta di struttura di link cliccabili, tra cui:
- Pulsanti: un modo elegante per linkare i contenuti rispetto ai semplici link testuali.
- File: caricate rapidamente i file e includete un pulsante su cui gli utenti possono fare clic per scaricarli.
- Icone social: inserite icone sociali con link cliccabili.
- Navigazione: inserite pulsanti di navigazione in qualsiasi punto del sito con l’uso di link cliccabili.
- Leggi di più: si può usare per abbreviare i vostri contenuti e fornire un link alla versione più estesa.
- Login/logout: aggiungete un link rapido per consentire agli utenti di accedere al vostro sito.
- Articolo successivo: aggiungete un link/pulsante cliccabile al prossimo articolo del vostro sito.
- Articolo precedente: aggiungete un link/pulsante cliccabile che rimanda all’articolo precedente del vostro sito.
-
Metodo 3: Usare l’HTML
Rendere un link cliccabile con l’HTML funziona allo stesso modo indipendentemente dall’interfaccia del vostro editor.
Potete modificare l’HTML con:
Il pannello Testo nell’Editor Classico di WordPress
L’editor di codice nell’Editor dei Blocchi di WordPress
Un editor HTML/testo sul vostro dispositivo
Gli editor di testo come Atom, Sublime Text e Coda offrono l’interfaccia necessaria per scrivere e modificare l’HTML, soprattutto per i link cliccabili. È anche possibile usare gli editor markdown.
Dopo aver lavorato con l’editor di testo, potete:
- Caricare i vostri file per pubblicarli su internet, tramite FTP o SFTP. Vi consigliamo di usare FileZilla per un processo più fluido.
- Caricare in massa i file HTML nella directory dei file di WordPress.
- Usare uno dei tanti altri client FTP per caricare i file HTML su WordPress.
Dopo aver trovato un editor di testo – e dopo aver capito come caricare l’HTML su WordPress – passate ai passaggi successivi per rendere un link cliccabile con l’HTML.
Questo formato si usa per i collegamenti ipertestuali di base in HTML:
<a href="https://www.example.com">Link Text</a>
- Formato di link HTML di base
Note:
- Sostituite “https://www.example.com” con l’URL desiderato.
- Sostituite “Link Text” con il testo del link desiderato.
Una volta pronto il link, potete pubblicare l’articolo/pagina o caricare l’HTML sul vostro sito. È anche possibile ottenere un’anteprima visiva del link passando alla scheda Visual di WordPress.
Una versione pubblicata di quel link HTML mostra il link sottolineato e talvolta in un colore diverso. Spostando il mouse sul link si può vedere la sua destinazione nella parte inferiore del browser.
Metodo 4: Usare un’interfaccia grafica (GUI)
Anche se non possiamo trattare tutte le interfacce grafiche esistenti, imparare a rendere un link cliccabile usando qualcosa di diverso da WordPress o dall’HTML si fa di solito in modo simile a quanto già visto.
In generale, ogni interfaccia grafica può usare un nome di pulsante o un’icona leggermente diversi per creare un collegamento ipertestuale.
Il processo generale dovrebbe essere il seguente:
- Evidenziate il testo che volete collegare.
- Fate clic sull’icona Link (potrebbe avere un nome diverso) nell’editor.
- Incollate l’URL desiderato.
- Fate clic sul pulsante Aggiungi link (anche questo potrebbe avere un nome diverso).
Come esempio di base, un costruttore di negozi online come Shopify vi permette di rendere cliccabile un link in qualsiasi pagina o articolo, evidenziando il testo e facendo clic sul pulsante Inserisci link.
Dovrete quindi incollare l’URL di destinazione e fare clic sul pulsante Inserisci link.
In questo modo si ottiene un link cliccabile.
Come far aprire i link in una nuova scheda
Come abbiamo detto in precedenza, WordPress e altre interfacce offrono ulteriori opzioni di personalizzazione per i link cliccabili, come per esempio la possibilità di forzare l’apertura di un link in un’altra scheda.
Come si fa? Vediamolo subito.
Aprire il link in una nuova scheda con l’Editor Classico di WordPress
Una volta creato un link cliccabile nell’Editor Classico di WordPress, scegliete il pulsante Opzioni link.
Spuntate la casella Apri il link in una nuova scheda.
Poi fate clic sul pulsante Aggiorna.
Aprire un link in una nuova scheda usando l’Editor dei Blocchi di WordPress
Supponendo che abbiate già aggiunto un link nell’Editor dei Blocchi di WordPress, se fate clic sul link si apre un’anteprima del contenuto di destinazione.
Il pulsante Modifica consente di accedere ad altre impostazioni (tra cui l’opzione Apri in una nuova scheda), ma è più semplice attivare l’interruttore Apri in una nuova scheda che si trova nella parte inferiore della finestra popup.
Aprire un link in una nuova scheda usando l’HTML
Nell’editor di testo di WordPress, nell’editor di codice di WordPress o in un editor HTML generico, potete usare il seguente codice per fare in modo che il vostro link cliccabile si apra in una nuova scheda:
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link Text</a>- Sostituite “https://www.example.com” con l’URL di destinazione desiderato.
- Sostituite “Link Text” con il testo che volete collegare.
- L’attributo target=”_blank” è il segmento di codice che apre il link nella nuova scheda. È l’unica parte veramente necessaria per questa semplice funzione.
- Vi consigliamo di aggiungere gli attributi e i valori rel=”noreferrer noopener” per bloccare i problemi di sicurezza più comuni nell’apertura dei link nelle nuove schede. Potete anche escluderli dal codice e far sì che il link si apra in una nuova scheda.
Dopo la pubblicazione, il link ha lo stesso aspetto, ma quando viene cliccato, l’URL di destinazione si apre in una nuova scheda.
Come aggiungere il nofollow a un collegamento ipertestuale
Il valore HTML nofollow indica ai motori di ricerca di ignorare un link cliccabile e impedisce che il link juice dei motori di ricerca venga trasferito al sito web di destinazione. Lo scopo principale del nofollow è quello di ridurre i link di spam, ma chi crea contenuti lo usa per i link a pagamento, i commenti, i contenuti generati dagli utenti, gli incorporamenti o o ogni volta che si preferisce non essere percepiti come sostenitori del sito che si linka.
WordPress non ha un modo integrato per aggiungere un link nofollow, ma è possibile farlo attingendo all’HTML.
Il codice seguente presenta un link di base con valore nofollow:
<a href="https://www.example.com" rel="nofollow">The Link Text.</a>
Cosa fare:
- Sostituite il testo “https://www.example.com” con l’URL di destinazione desiderato.
- Sostituite la parte “Link Text” con il testo del link che volete aggiungere.
- Usate l’attributo e il valore rel=”nofollow” all’interno dell’HTML del link.
Quando viene pubblicato, o se si usa la vista Editor visuale, un link nofollow non appare diverso da un collegamento ipertestuale standard; tuttavia la funzionalità nofollow viene salvata nel codice del backend.
Come aggiungere link a un contenuto esistente
Il link a contenuti esistenti è una funzione esclusiva di WordPress, grazie alla quale potete cercare gli articoli e le pagine del blog creati in precedenza direttamente nell’editor di WordPress. In questo modo non è necessario richiamare gli URL in un’altra finestra del browser per copiarli e incollarli in un link cliccabile.
Link a contenuti esistenti nell’Editor Classico di WordPress
Create un link evidenziando il testo desiderato e facendo clic sul pulsante Inserisci/Modifica link (chainlink) nell’editor. In questo modo si aprirà un campo popup in cui potrete cliccare sul pulsante Opzioni link (icona dell’ingranaggio).
- Andate alla sezione denominata “Oppure inserisci un link a un contenuto esistente”.
- Digitate una parola chiave nella barra di ricerca e scegliete una pagina o un articolo esistente tra i risultati.
- Osservate come il link al contenuto esistente viene automaticamente inserito nel campo URL.
Fate clic sul pulsante Aggiungi link quando avete finito.
Questo produce un link immediato ad altri contenuti (noto anche come link interno) nell’editor.
Collegamento a un contenuto esistente nell’Editor dei Blocchi di WordPress
Evidenziate il testo/immagine che volete collegare, quindi fate clic sul pulsante Link nella barra degli strumenti a comparsa.
Il campo fornito ha due funzioni: potete incollare un URL o usarlo come barra di ricerca. Digitate quindi una parola chiave che si riferisca ad alcuni dei vostri contenuti esistenti per visualizzare i risultati correlati.
Una volta visualizzata la pagina o l’articolo desiderato, fateci clic sopra.
In questo modo si crea automaticamente un link al contenuto esistente nell’Editor dei Blocchi di WordPress.
Come creare link cliccabili per telefono, SMS ed email
Esistono alcuni modi per aggiungere azioni speciali ai link cliccabili, sostituendo la struttura standard dell’URL e collegandosi a qualcosa di diverso, per esempio:
- Un numero di telefono che apre l’applicazione Telefono.
- Un numero di telefono che apre l’app SMS.
- Un indirizzo email che apre automaticamente l’applicazione per le email dell’utente.
Come creare un link telefonico cliccabile
Un link telefonico o “Click to call” aggiunge automaticamente un numero di telefono specifico nell’app del telefono dell’utente o in un’app che supporta i numeri di telefono, come Skype.
In questo caso, invece di usare un URL, dovete inserire il codice tel: nell’HTML, seguito dal numero di telefono, come in questo caso:
<a href="tel:555-555-5555">Click To Call</a>Note:
- Sostituite il numero di telefono con il numero che volete che gli utenti chiamino.
- Sostituite il testo “Click to call” con quello che volete che il testo del link mostri.
Negli editor visuali come l’Editor Classico o l’Editor dei Blocchi di WordPress, basta digitare tel:555-555-5555 (con il numero di telefono desiderato) nel campo URL per aggiungere un link. Fate clic su Invio per generare automaticamente il link telefonico.
Quando qualcuno fa clic su questo link, si apre direttamente l’app più pertinente (l’app del telefono su uno smartphone) oppure viene richiesto di aprire un’app come Skype.
Come creare un link SMS cliccabile
I link SMS cliccabili funzionano come i link telefonici, ma scelgono di aprire automaticamente le app di messaggistica invece di quelle di chiamata.
Per aggiungere un link SMS, usate sms:555-555-5555 invece di un URL.
<a href="sms:555-555-5555">Click To Text</a>Note:
- Sostituite “555-555-5555” con un numero di telefono diverso.
- Sostituite “Click To Text” con il testo che volete usare per il link.
Sia l’Editor Classico che quello dei Blocchi di WordPress supportano i link via SMS quando inserite il valore sms:555-555-5555 nel campo URL per i link.
Come promesso, gli utenti visualizzano le app di messaggistica quando fanno clic su questo tipo di link.
Come creare un link email cliccabile
Quando vengono cliccati, i collegamenti ipertestuali per le email richiedono automaticamente al dispositivo dell’utente di aprire l’app di posta elettronica più importante: comparirà un nuovo messaggio email vuoto dove il campo destinatario è precompilato con l’indirizzo email che avete specificato.
Per farlo, aggiungete il codice mailto:, seguito da un indirizzo email, al posto di un URL di destinazione:
<a href="mailto:[email protected]">Click To Email</a>Note:
- Sostituite l’indirizzo email “[email protected]” con l’indirizzo email di destinazione desiderato.
- Sostituite il testo “Click To Email” con il testo del link che volete aggiungere.
Se usate gli editor WordPress classico o a blocchi, digitate il valore mailto:[email protected] nel campo URL quando create un link.
Dopo aver pubblicato il link, gli utenti che lo cliccano vengono reindirizzati alla loro app di posta elettronica e vedranno nel campo destinatario l’indirizzo email che avete specificato nel campo A:.
Riepilogo
L’aggiunta di link cliccabili (noti anche come collegamenti ipertestuali o semplicemente link) può migliorare l’interattività del vostro sito web, portare le persone a leggere i vostri contenuti e rimandare a informazioni importanti da altre parti di Internet. Per questo motivo, imparare a creare un link cliccabile è una delle lezioni fondamentali per la progettazione e la creazione di siti web.
Dopo aver letto questo articolo, dovreste essere in grado di riconoscere l’aspetto di un link cliccabile e sapere esattamente come crearne uno, sia che si tratti di aggiungere un link al testo o alle immagini. Inoltre, è bene sapere che esistono vari metodi per rendere un link cliccabile, per esempio attraverso l’Editor Classico di WordPress, l’Editor dei Blocchi, l’HTML o qualsiasi altra interfaccia grafica disponibile.
E, naturalmente, vi invitiamo a esplorare le opzioni di link cliccabili più avanzate, come i link per i numeri di telefono, gli indirizzi email e quelli con tag nofollow.
Se avete ancora dubbi su come rendere un link cliccabile, condividete le vostre domande e i vostri dubbi nei commenti qui sotto.
Lascia un commento