Vuoi imparare come cambiare il colore del collegamento in WordPress?

Cambiare il colore del tuo link ti dà un maggiore controllo sul design del tuo sito web e può rendere più facile la navigazione per i tuoi visitatori.

In questo articolo, ti mostreremo come cambiare il colore del collegamento in WordPress, passo dopo passo.

Perché cambiare il colore del collegamento in WordPress?

Quando tu aggiungi un collegamento in WordPress, il tuo tema determinerà automaticamente il colore del collegamento.

A volte il tuo Temi WordPress le opzioni di colore predefinite saranno esattamente ciò che desideri, ma altre volte vorrai un maggiore controllo sull’aspetto dei collegamenti.

Ad esempio, potresti voler cambiare il colore dei tuoi link in modo che corrispondano al marchio della tua attività o logo. In alternativa, potresti voler aumentare il contrasto dei colori per migliorare l’accessibilità al Web per i lettori con problemi di vista.

Alcuni temi ti consentono di cambiare il colore del collegamento direttamente dal pannello delle opzioni del tema o dal Personalizzatore di temi WordPress, quindi assicurati di controllare la documentazione del tema prima di modificare il colore del collegamento con CSS.

Detto questo, diamo un’occhiata ad alcuni modi in cui puoi cambiare il colore del link sul tuo Sito Web WordPress.

Metodo 1. Cambia il colore del collegamento in WordPress modificando i CSS

Un modo per cambiare il colore del collegamento in WordPress è aggiungere personalizzato CSS codice.

La prima cosa che devi fare è accedere alla dashboard di amministrazione di WordPress e andare su Aspetto » Personalizza e quindi fare clic sull’opzione di menu “CSS aggiuntivo”.

Personalizzatore di WordPress per CSS aggiuntivi

Questo ti porterà a una schermata in cui puoi aggiungere il tuo codice CSS personalizzato sul lato sinistro della pagina.

Aggiungerai gli snippet di codice CSS degli esempi seguenti a questa sezione del tuo editor.

Schermata Aggiungi codice CSS aggiuntivo

Per prima cosa, personalizzeremo il colore generale del collegamento. Questo è il colore che vedranno i tuoi visitatori se non hanno mai cliccato sul link prima.

Puoi utilizzare il codice CSS di seguito come esempio.


a {
     color: #FFA500;
}

Questo cambierà il colore del collegamento predefinito in arancione. Assicurati di cambiare il #FFA500 colore al colore che si desidera utilizzare.

Cambia il colore del link al passaggio del mouse in WordPress

La prossima cosa che cambieremo è il colore del passaggio del mouse. In questo modo, quando un utente passa il cursore su un collegamento, cambierà colore per attirare la sua attenzione.

Puoi utilizzare il codice CSS di seguito come esempio.


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

Il codice sopra cambierà il colore del collegamento in rosso e sottolineerà il testo quando i visitatori ci passano sopra. Assicurati di cambiare il #FF0000 colore a quello che preferisci.

Usiamo l’effetto hover di sottolineatura del collegamento qui su WPBeginner sui nostri collegamenti.

Cambia il colore del collegamento dopo la visita in WordPress

Un’altra cosa che potresti voler cambiare è il colore del collegamento dopo che un utente fa clic su un collegamento. Questo può aiutare i visitatori a navigare facilmente nel tuo blog WordPress e vedere quali link hanno già cliccato.

Puoi utilizzare il codice CSS di seguito per modificare il colore del collegamento visitato.


a:visited {
     color: #0000FF;
}

Assicurati di cambiare il blu #0000FF colore al colore di vostra scelta.

Ecco come apparirà tutto il codice CSS sopra all’interno del personalizzatore di WordPress.

Codice di personalizzazione di WordPress

Dopo aver apportato le modifiche, fai clic sul pulsante “Pubblica” per rendere attive le modifiche.

Il codice CSS sopra cambierà il colore di tutti i link sul tuo sito.

Se vuoi personalizzare solo i link che sono nel tuo post e pagine, quindi puoi utilizzare l’esempio di codice riportato di seguito.


.entry-content a {
     color: #FFA500;
}

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

.entry-content a:visited {
     color: #0000FF;
}

Questo codice fa la stessa cosa degli esempi di codice sopra, ma .entry-content prende di mira solo i link all’interno dei tuoi contenuti.

Cambia il colore dei tuoi collegamenti di navigazione in WordPress

Un ultimo stile di collegamento che puoi anche personalizzare sono i collegamenti del menu di navigazione.

Personalizza i collegamenti del menu di navigazione

Per maggiori dettagli, consulta la nostra guida su come modellare i menu di navigazione di WordPress.

Se non desideri aggiungere codice direttamente al tuo tema WordPress, puoi utilizzare un plug-in CSS per aggiungere codice al tuo sito web.

In questo modo, le tue modifiche CSS verranno applicate anche se decidi di farlo cambia il tuo tema WordPress.

La prima cosa che devi fare è installare e attivare il CSS e JS personalizzati semplici collegare. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l’attivazione, vai su CSS e JS personalizzati » Aggiungi CSS personalizzato nel pannello di amministrazione di WordPress.

Qui puoi aggiungere lo stesso codice CSS di cui sopra.

Aggiungi codice CSS personalizzato con il plugin

Dopo aver aggiunto il codice, assicurati di fare clic sul pulsante “Pubblica” o “Aggiorna”.

Metodo 2. Cambia il colore del collegamento senza modificare CSS

Se non ti senti a tuo agio nel modificare i file CSS, questo metodo fa per te.

Invece di aggiungere il codice CSS direttamente al tuo sito web, puoi utilizzare un plug-in di stile CSS per modificare visivamente il tuo sito senza scrivere alcun codice.

Si consiglia di utilizzare il Eroe CSS collegare. È molto adatto ai principianti e ti consente di personalizzare visivamente il tuo sito web in modo simile a a trascina e rilascia il generatore di pagine.

Una volta installato il plug-in, è necessario fare clic sul pulsante “Procedi all’attivazione del prodotto” sopra l’elenco dei plug-in per attivarlo e collegare il tuo account.

Attiva CSS Hero

Questo ti porterà a una schermata in cui puoi inserire il tuo nome utente e password.

Tutto quello che devi fare è seguire le istruzioni sullo schermo e verrai reindirizzato al tuo sito web dopo la verifica del tuo account.

Quindi, fai clic su “Personalizza con” Eroe CSS‘ nella parte superiore della barra degli strumenti di amministrazione di WordPress.

Personalizza con CSS Hero

Questo aprirà il tuo sito web con CSS Hero in esecuzione su di esso. CSS Hero usa quello che viene chiamato editor What You See is What You Get (WYSIWYG).

Basta fare clic su qualsiasi elemento della pagina e verrà visualizzata una barra degli strumenti che ti consente di effettuare personalizzazioni.

Quindi, fai clic su uno dei link sul tuo sito web. Inizieremo con uno dei link ai post del blog.

Fare clic sul collegamento al sito Web

Successivamente, seleziona la voce di menu “Tipografia” e puoi scegliere un nuovo colore per il tuo link.

Puoi scegliere un nuovo colore dall’elenco o aggiungere il tuo codice colore.

Seleziona l'opzione tipografia

Cambia il colore del menu di navigazione di WordPress

Successivamente, puoi cambiare il colore del tuo Menu di navigazione di WordPress collegamenti.

Passa il mouse sopra il menu di navigazione e fai clic su una delle voci del menu.

Fare clic sul collegamento del menu di navigazione

Quindi, seleziona l’opzione “Tipografia” e puoi personalizzare il colore direttamente sotto.

Noterai che quando cambi il colore del collegamento al menu, le modifiche vengono visualizzate immediatamente nell’anteprima.

Personalizza il colore del menu CSS Hero

Una volta terminata la modifica dei colori del collegamento, è necessario fare clic sul pulsante “Salva e pubblica” per rendere attive le modifiche.

Speriamo che questo articolo ti abbia aiutato a imparare come cambiare il colore del collegamento in WordPress. Potresti anche voler vedere la nostra guida su come scegliere il miglior software di web design, o il nostro elenco di plugin WordPress indispensabili.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i video tutorial di WordPress. Ci trovi anche su Twitter e Facebook.



Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.