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

Quando abbiamo iniziato a personalizzare i siti WordPress, pensavamo che i colori dei link fossero solo un dettaglio di design minore. Ma dopo anni di test e ottimizzazioni, abbiamo imparato che una cosa così semplice come il colore dei link può rendere o distruggere l’esperienza utente del sito.

Chi siamo. I link guidano i visitatori attraverso il sito web, mettono in evidenza i contenuti che importano e riflettono l’identità del brand. Una scelta di colori sbagliata può rendere i link difficili da individuare o stonare con il vostro design, mentre la scelta giusta attira naturalmente l’attenzione e incoraggia a fare clic.

In questa guida, quindi, vi mostreremo diversi modi per modificare i colori dei link in WordPress, dai metodi più semplici al codice personalizzato.

Perché cambiare il colore dei link in WordPress?

Quando si aggiunge un link in WordPress, il tema determina automaticamente il colore del link. A volte i colori predefiniti del tema di WordPress sono esattamente quelli che desiderate, ma potreste aver bisogno di un maggiore controllo sull’aspetto dei link.

Ad esempio, potreste voler cambiare il colore dei link per adattarlo al vostro marchio o logo personalizzato. Oppure potreste aumentare il contrasto dei colori per rendere il vostro sito più accessibile ai lettori con problemi di vista.

Detto questo, vediamo come cambiare il colore dei link sul vostro sito web WordPress, indipendentemente dal tema che state utilizzando. Utilizzate semplicemente i link rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:

Come modificare il colore dei link nei temi di WordPress classico

Alcuni temi classici hanno opzioni integrate per modificare i colori dei link, ma è necessario verificare prima le impostazioni del tema specifico.

Per vedere se il tema ha questa opzione, andare su Aspetto ” Personalizza. Cercare l’impostazione “Colori” o qualcosa di simile. In OceanWP è etichettata semplicemente come “Colori”.

Nota: se il personalizzatore del tema di WordPress è assente, molto probabilmente si sta utilizzando un tema a blocchi e occorre passare alla sezione successiva.

Quindi, trovare un’impostazione che consenta di modificare i colori dei link.

OceanWP lo rende semplice con le opzioni “Colore del link” sia per gli stati predefiniti che al passaggio del mouse. Il colore del passaggio del mouse è quello che appare quando un visitatore passa con il mouse su un link, quindi è un ottimo modo per attirare la sua attenzione e migliorare il tasso di clic.

Si può quindi fare clic su “Pubblica” per salvare le modifiche.

Tenere presente che alcuni temi, come Neve, non hanno impostazioni dirette per il colore dei link. Invece, il colore dei link potrebbe essere legato ai colori primari o secondari del tema a livello globale.

Se il tema non offre la possibilità di personalizzare direttamente il colore dei link, non preoccupatevi! Potete passare al quarto metodo, dove vi mostreremo come modificare il colore dei link utilizzando il codice.

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

Se si utilizza un tema a blocchi, è necessario utilizzare l’editor del sito per personalizzare i colori dei link.

Andate su Aspetto ” Editor nella vostra dashboard di WordPress.

Si vedranno tutti i menu per personalizzare l’aspetto del sito.

Qui, fare clic su “Stili”.

Verranno visualizzati gli stili predefiniti del tema.

Cercare e fare clic sul pulsante a matita “Modifica” per iniziare a personalizzare.

Si aprirà l’editor del sito completo con una barra laterale per la modifica degli stili del tema.

Fare clic su “Colori” in questa barra laterale per accedere alle opzioni di personalizzazione dei colori.

Individuare l’opzione Link e fare clic su di essa per visualizzare le impostazioni dei colori per gli stati predefiniti e al passaggio del mouse. Assicuratevi di selezionare i colori in corrispondenza del design del vostro sito web.

Una volta soddisfatti delle modifiche, basta fare clic su “Salva” per renderle effettive sul sito.

Come modificare i colori dei singoli link nell’editor a blocchi

A volte è possibile modificare il colore dei singoli link. Ad esempio, si potrebbe voler attirare l’attenzione del visitatore verso l’invito all’azione su una landing page.

Per farlo, è sufficiente evidenziare il link che si desidera personalizzare. Quindi, fare clic sull’icona della freccia nella mini barra degli strumenti e selezionare “Evidenzia”.

A questo punto è possibile selezionare “Sfondo” o “Testo”, a seconda della modifica che si desidera apportare.

A questo punto, selezionare il colore che si desidera utilizzare.

Per personalizzare altri collegamenti, è sufficiente ripetere questi passaggi.

Quando si è soddisfatti dell’aspetto dei link, fare clic su “Salva” per rendere effettive le modifiche.

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

Se il tema non offre l’opzione di modificare il colore dei link, il modo più semplice è aggiungere CSS personalizzati al sito WordPress.

Spesso nei tutorial di WordPress si trovano frammenti di codice con le istruzioni per aggiungerli al file functions.php del tema.

Il problema più grande è che anche un piccolo errore nello snippet di codice personalizzato può rompere il vostro sito WordPress e renderlo inaccessibile. Inoltre, al successivo aggiornamento del tema WordPress, perderete tutte le vostre personalizzazioni.

È qui che entra in gioco WPCode.

Questo plugin gratuito consente di aggiungere facilmente CSS personalizzati senza mettere a rischio il sito.

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

Dopo l’attivazione, andare su Code Snippets ” Add Snippet.

Qui, è sufficiente fare il passaggio del mouse su “Aggiungi codice personalizzato (nuovo snippet)”.

Quindi, fare clic sul pulsante “+ Add-on Personalizzato” quando appare.

Successivamente, è necessario selezionare “CSS Snippet” come tipo di codice dall’elenco delle opzioni visualizzate sulla schermata.

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

Ora è possibile aggiungere uno snippet CSS personalizzato alla casella di codice. Vediamo alcuni dei diversi snippet che si possono usare.

Cambiare il colore dei link nel vostro sito WordPress

Per cominciare, si può personalizzare il colore generale del link. Si tratta del colore che i visitatori vedranno prima di cliccare su un link.

Per farlo, è sufficiente aggiungere il seguente snippet nel boxed del codice WPCode:

Nell’esempio precedente, il codice esadecimale # cambia il colore del collegamento in arancione, quindi è necessario cambiare#FFA500 con il colore che si desidera utilizzare.

Se non siete sicuri del codice esadecimale da utilizzare, potete esplorare i diversi colori e ottenere i relativi codici sul sito web HTML Color Codes.

Quando si è soddisfatti dell’aspetto del codice, fare clic sulla levetta “Inattivo” in modo da visualizzare “Attivo”. Infine, fare clic su “Salva snippet” per rendere attivo lo snippet CSS.

Ora, se visitate il vostro sito WordPress, vedrete il nuovo colore dei link in azione.

Cambiare il colore dei link in WordPress

Per modificare il colore al passaggio del mouse del link, è sufficiente incollare il seguente snippet nell’editor di WPCode:

Il codice qui sopra cambia il colore del link in rosso e sottolinea il testo quando i visitatori ci passano sopra. Come in precedenza, è possibile cambiare il codice esadecimale #FF0000 con qualsiasi colore si desideri utilizzare.

Quando si è pronti per la pubblicazione, si può pubblicare lo snippet di codice seguendo la stessa procedura descritta sopra.

Cambiare il colore del link dopo la visita in WordPress

Poi, si può cambiare il colore del link dopo che l’utente ha fatto clic sul link. Questo può aiutare i visitatori a orientarsi nel vostro blog WordPress, mostrando i link che hanno già cliccato.

Per modificare il colore del link visitato, è possibile utilizzare il codice CSS riportato di seguito:

Come sempre, assicuratevi di cambiare il codice blu #0000FFhexcon il colore che volete usare nei vostri link.

Fatto questo, cliccate sull’attiva/disattiva in modo che diventi attiva. Quindi, basta cliccare su “Salva snippet” per rendere il codice attivo sul vostro sito, blog o negozio online.

Video tutorial

Se non vi piace seguire le istruzioni scritte, potete consultare il nostro video tutorial:

Subscribe to WPBeginner

Speriamo che questo articolo vi abbia aiutato a capire come cambiare il colore dei link in WordPress. Potreste anche 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 questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.