Come cambiare il colore dei link in WordPress (Guida per principianti)

‘Come faccio a far risaltare i miei link?’ Questa è una domanda che sentiamo regolarmente dai nostri lettori di WPBeginner.

Sebbene possa sembrare un dettaglio minore, i colori dei link svolgono un ruolo importante nell'usabilità e nei tassi di conversione del tuo sito web. Ecco perché utilizziamo il colore arancione per i link su WPBeginner.

La buona notizia è che cambiare i colori dei link in WordPress è diventato molto più facile di quanto non fosse in passato. Non è necessario essere esperti di CSS o assumere uno sviluppatore: ora esistono soluzioni semplici che chiunque può utilizzare, indipendentemente dalle proprie competenze tecniche.

In questa guida, ti illustreremo i passaggi esatti per cambiare i colori dei tuoi link in WordPress.

Perché cambiare il colore dei link in WordPress?

I motivi principali per cambiare i colori dei link in WordPress sono per abbinare l'identità del tuo marchio e migliorare la leggibilità dei tuoi contenuti. Personalizzando questi colori, guidi l'attenzione dei tuoi visitatori sulle parti più importanti della tua pagina.

Ecco alcuni benefici specifici della personalizzazione dei colori dei tuoi link:

• Migliore accessibilità: Aumentare il contrasto cromatico tra il testo e lo sfondo rende il tuo sito più facile da leggere per le persone con problemi di vista.
• Coerenza del marchio: Puoi allineare i tuoi link al tuo logo e allo schema di colori generale per un aspetto professionale.
• Tassi di clic più elevati: L'utilizzo di un colore distinto per i link (come pulsanti o chiamate all'azione) incoraggia i visitatori a fare clic, aumentando le conversioni.

Detto questo, vediamo come cambiare il colore dei link sul tuo sito WordPress. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che preferisci:

Come cambiare il colore dei link nei temi classici di WordPress

Alcuni temi classici hanno opzioni integrate per cambiare i colori dei link, ma dovrai prima controllare le impostazioni specifiche del tuo tema.

Per vedere se il tuo tema ha questa opzione, vai su Aspetto » Personalizza. Cerca quindi un'impostazione che dica 'Colori' o qualcosa di simile. Nel tema Sydney, è etichettata semplicemente come 'Colori'.

Successivamente, trova un'impostazione che ti permetta di cambiare i colori dei link.

Sydney rende questo semplice con le opzioni 'Colore del link' sia per lo stato predefinito che per lo stato al passaggio del mouse.

Il colore del link al passaggio del mouse è quello che appare quando un visitatore passa il mouse sopra un link, quindi è un ottimo modo per attirare la loro attenzione e migliorare il tuo tasso di clic.

Puoi quindi fare clic su 'Pubblica' per salvare le modifiche.

Tieni presente che alcuni temi non dispongono di impostazioni dirette per il colore dei link. Invece, il colore del link potrebbe essere collegato globalmente ai colori primari o secondari del tuo tema.

Se il tuo tema non offre la personalizzazione diretta del colore dei link, non preoccuparti! Puoi passare al quarto metodo, dove ti mostreremo come cambiare il colore del tuo link usando il codice.

Come cambiare il colore dei link nei temi a blocchi di WordPress

Se utilizzi un tema a blocchi, dovrai utilizzare l'editor completo del sito per personalizzare i colori dei tuoi link.

Vai su Aspetto » Editor nella tua bacheca di WordPress.

Vedrai tutti i menu per personalizzare l'aspetto del tuo sito.

Qui, fai clic su 'Stili'.

Vedrai visualizzati gli stili predefiniti del tuo tema.

Cerca e fai clic sul pulsante 'Modifica' a forma di matita per iniziare la personalizzazione.

L'editor completo del sito si aprirà con una barra laterale per la modifica degli stili del tuo tema.

Fai clic su 'Colori' in questa barra laterale per accedere alle opzioni di personalizzazione del colore.

Trova l'opzione Link e fai clic su di essa per visualizzare le impostazioni del colore sia per gli stati predefiniti che per quelli al passaggio del mouse. Dovresti scegliere un colore che corrisponda al design del tuo sito web.

Tuttavia, è anche importante assicurarsi che ci sia un elevato contrasto tra lo sfondo e il colore del link. Ciò garantisce che il tuo sito sia accessibile e facile da leggere per tutti.

Una volta soddisfatto delle modifiche, fai semplicemente clic su 'Salva' per renderle attive sul tuo sito.

Come cambiare i colori dei singoli link nell'editor a blocchi

A volte, potresti voler cambiare il colore dei singoli link. Ad esempio, potresti voler attirare l'attenzione del visitatore sul call to action su una landing page.

Per fare ciò, evidenzia semplicemente il link specifico che desideri personalizzare.

Quindi, fai clic sull'icona a forma di freccia nella barra degli strumenti e seleziona 'Evidenzia' dal menu a discesa.

Successivamente, fai clic sulla scheda 'Testo'. Ora puoi selezionare il colore per quel link specifico.

Fatto ciò, procedi e seleziona il colore che desideri utilizzare.

Per personalizzare altri link, ripeti semplicemente questi passaggi.

Quando sei soddisfatto dell'aspetto dei link, fai clic su 'Salva' per rendere attive le tue modifiche.

Come cambiare il colore dei link in WordPress con il codice (tutti i temi)

Se il tuo tema non offre l'opzione per cambiare il colore dei link, il modo più semplice è aggiungere CSS personalizzato al tuo sito WordPress.

Spesso, troverai snippet di codice nei tutorial di WordPress con istruzioni per aggiungerli al file functions.php del tuo tema.

Il problema più grande è che anche un piccolo errore nello snippet di codice personalizzato può compromettere il tuo sito WordPress e renderlo inaccessibile. Perderai anche tutte le tue personalizzazioni la prossima volta che aggiornerai il tuo tema WordPress.

È qui che entra in gioco WPCode.

Dopo un'attenta valutazione, abbiamo concluso che è il modo più sicuro e semplice per aggiungere codice personalizzato al tuo sito web. Per maggiori dettagli, consulta la nostra recensione di WPCode.

La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet.

Qui, posiziona semplicemente il mouse su ‘Aggiungi il tuo codice personalizzato (Nuovo snippet).’

Quindi, fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ quando appare.

Successivamente, devi selezionare ‘Snippet CSS’ come tipo di codice dall'elenco di opzioni visualizzate sullo schermo.

Dopo di che, digita un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella dashboard di WordPress.

Ora puoi procedere e aggiungere uno snippet CSS personalizzato nella casella di codice. Vediamo alcuni dei diversi snippet che puoi utilizzare.

Cambia il colore dei link sul tuo sito WordPress

Per iniziare, potresti voler personalizzare il colore generale dei link. Questo è il colore che i visitatori vedranno prima di fare clic su un link.

Per fare ciò, aggiungi semplicemente il seguente snippet nella casella di codice WPCode:

a {
     color: #FFA500;
}

Nota: Questo codice CSS cambia il colore dei link per l'intero sito web. Ciò include menu di navigazione, pulsanti e link nel footer.

Nell'esempio sopra, il codice esadecimale # cambierà il colore del link in arancione, quindi dovrai cambiare #FFA500 con il colore che desideri utilizzare.

Se non sei sicuro di quale codice esadecimale utilizzare, puoi esplorare diversi colori e ottenere i loro codici sul sito web HTML Color Codes.

Quando sei soddisfatto dell'aspetto del tuo codice, fai clic sull'interruttore 'Inattivo' in modo che mostri invece 'Attivo'. Infine, fai clic su 'Salva snippet' per rendere attivo lo snippet CSS.

Ora, se visiti il tuo sito web WordPress, vedrai il nuovo colore del link in azione.

Cambia il colore al passaggio del mouse sui link in WordPress

Per cambiare il colore del link al passaggio del mouse, incolla semplicemente il seguente snippet nell'editor di WPCode:

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Il codice sopra cambierà il colore del link in rosso e sottolineerà il testo quando i visitatori ci passeranno sopra il mouse. Come prima, puoi cambiare il codice esadecimale #FF0000 con qualsiasi colore tu voglia usare.

Quando sarai pronto per andare online, potrai pubblicare lo snippet di codice seguendo lo stesso processo descritto sopra.

Cambia il colore del link dopo la visita in WordPress

Successivamente, potresti voler cambiare il colore del link dopo che un utente ha cliccato sul link. Questo può aiutare i visitatori a orientarsi nel tuo blog WordPress mostrando quali link hanno già cliccato.

Puoi usare il codice CSS qui sotto per cambiare il colore del link visitato:

a:visited {
     color: #0000FF;
}

Come sempre, assicurati di cambiare il codice esadecimale blu #0000FF con il colore che vuoi usare nei tuoi link.

Fatto ciò, fai clic sull'interruttore 'Inattivo' in modo che cambi in 'Attivo'. Quindi, fai semplicemente clic su 'Salva Snippet' per rendere il codice live sul tuo sito, blog o negozio online.

Tutorial video

Se non ti piace seguire istruzioni scritte, puoi guardare il nostro tutorial video invece:

Domande frequenti sulla modifica del colore dei link in WordPress

Ecco alcune domande che i nostri lettori hanno posto frequentemente riguardo alla modifica dei colori dei link sul loro sito web:

Posso cambiare il colore di un hyperlink?

Sì, la maggior parte dei temi di WordPress ti consente di cambiare i colori degli hyperlink a livello globale tramite le impostazioni di Aspetto o l'Editor del sito. Puoi anche cambiare il colore dei singoli link direttamente all'interno dell'editor dei post evidenziando il link e selezionando un colore dalla barra degli strumenti.

Come personalizzare un link in WordPress?

Puoi personalizzare un link selezionandolo nell'editor a blocchi e utilizzando le opzioni della barra degli strumenti. Questo ti consente di cambiare l'URL di destinazione, impostarlo per aprirlo in una nuova scheda o regolare le impostazioni di colore e stile nella barra laterale destra.

Come personalizzo il mio link URL?

Per cambiare il testo dell'URL stesso (lo slug), vai alle impostazioni del 'Post' nella barra laterale destra e cerca la sezione 'URL'. Se vuoi cambiare l'aspetto visivo del link, come il font o il colore, usa le impostazioni 'Stile' nell'editor a blocchi.

Per maggiori dettagli, consulta il nostro tutorial su come cambiare gli URL del tuo sito WordPress.

Come si cambiano i link in WordPress?

Fai semplicemente clic sul testo del link esistente nell'editor di contenuti e seleziona il pulsante 'Modifica' (icona a forma di matita) nella barra degli strumenti mobile. Da lì, puoi incollare un nuovo URL o modificare il testo che desideri mostrare ai tuoi visitatori.

Come posso cambiare il link della mia pagina?

Puoi cambiare il link di una pagina modificando lo slug del permalink nella barra laterale delle impostazioni della pagina, nella sezione 'URL'. Se la pagina è già pubblicata, ti consigliamo di impostare un reindirizzamento 301 in modo che i visitatori che utilizzano il vecchio link vengano inviati alla nuova pagina corretta.

Come cambiare l'icona del link in WordPress?

WordPress non ha un'impostazione predefinita per aggiungere o cambiare le icone dei link, quindi di solito dovrai utilizzare un plugin. Plugin come External Links possono aggiungere automaticamente icone ai link in uscita, oppure puoi aggiungere manualmente icone utilizzando FontAwesome e CSS personalizzato.

Speriamo che questo articolo ti abbia aiutato a imparare come cambiare il colore del link in WordPress. Potresti anche voler consultare la nostra guida su come cambiare il colore del testo in WordPress o la nostra guida definitiva agli elementi di design WordPress più efficaci.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.