Evidenziare una voce di menu in WordPress può attirare l'attenzione dei visitatori su pagine importanti o offerte speciali. Questo può aiutare a migliorare la navigazione e l'interazione dell'utente.
Sia che tu voglia enfatizzare una nuova funzionalità, una vendita o un aggiornamento essenziale, far risaltare determinate voci di menu può aumentare l'efficacia del tuo sito.
Ad esempio, abbiamo evidenziato la pagina dei prezzi nel menu di navigazione principale su molti dei nostri brand partner per attirare l'attenzione degli utenti. Questo approccio ha incoraggiato più visitatori a esplorare i prezzi dei nostri prodotti e ha portato a un aumento delle conversioni.
In questo articolo, ti mostreremo come evidenziare facilmente una voce di menu in WordPress utilizzando il codice CSS.
Perché Evidenziare una Voce di Menu in WordPress?
Un menu di navigazione è un elenco di link che puntano ad aree importanti del tuo sito. Di solito sono presentati come una barra orizzontale nell'intestazione di ogni pagina di un sito WordPress.
Evidenziando una voce di menu nel tuo menu di navigazione, puoi facilmente dirigere l'attenzione dell'utente sulla tua call to action più importante.
Ad esempio, se vuoi che gli utenti visitino la pagina dei prezzi o un post specifico sul tuo blog WordPress, puoi evidenziare quella voce nel tuo menu di navigazione. Questo può aumentare il traffico su quella pagina e incrementare le vendite.
Detto questo, vediamo come puoi evidenziare una voce di menu in WordPress usando il CSS:
- Metodo 1: Evidenziare una voce di menu utilizzando l'editor del sito completo
- Metodo 2: Evidenziare una voce di menu utilizzando il personalizzatore del tema
- Personalizzare l'evidenziazione della voce di menu
Metodo 1: Evidenziare una voce di menu utilizzando l'editor del sito completo
Se stai utilizzando un tema abilitato ai blocchi, avrai l'Editor del sito completo invece del vecchio Personalizzatore del tema. Puoi facilmente evidenziare anche una voce di menu corrente in esso.
Innanzitutto, vai alla pagina Aspetto » Editor dalla dashboard di amministrazione di WordPress. Questo ti porterà all'editor del sito completo.
Qui, fai semplicemente doppio clic sulla voce di menu che desideri evidenziare, quindi fai clic sull'icona 'Impostazioni' in alto. Questo aprirà immediatamente le impostazioni di quella specifica voce di menu nel pannello dei blocchi.
Ora, scorri semplicemente verso il basso fino alla scheda 'Avanzate' e fai clic sulla freccia accanto ad essa per espanderla.
Questo aprirà un campo 'Classe CSS aggiuntiva' dove devi scrivere highlighted-menu.
Successivamente, fai clic sul pulsante 'Salva' in cima alla pagina per memorizzare le modifiche.
Dopodiché, dovrai aggiungere un piccolo pezzo di CSS al tuo tema per l'effetto di evidenziazione. Puoi correggere il Personalizzatore del tema mancante, oppure puoi utilizzare un plugin per snippet di codice per aggiungere codice CSS.
Come aggiungere snippet CSS utilizzando WPCode
Per aggiungere CSS a WordPress, consigliamo di utilizzare WPCode perché è il miglior plugin per snippet di codice WordPress sul mercato che rende sicuro e facile aggiungere codice personalizzato.
Innanzitutto, devi installare e attivare il plugin WPCode. Per ulteriori istruzioni, consulta la nostra guida passo passo su come installare un plugin di WordPress.
Nota: WPCode dispone anche di una versione gratuita. Tuttavia, puoi anche ottenere il piano premium per sbloccare la libreria cloud di snippet di codice, la logica condizionale intelligente e altro ancora.
Dopo l'attivazione, naviga alla pagina Snippet di codice » + Aggiungi snippet dal tuo pannello di amministrazione di WordPress.
Qui, passa il mouse sopra l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fai clic sul pulsante '+ Aggiungi snippet personalizzato' sotto di essa.
Quindi, devi selezionare 'Snippet CSS' come tipo di codice dall'elenco delle opzioni che appaiono.
Ora verrai indirizzato alla pagina ‘Crea Snippet Personalizzato’, dove potrai iniziare scegliendo un nome per il tuo snippet.
Successivamente, copia e incolla il seguente codice CSS nella casella ‘Anteprima Codice’:
/* Highlighted menu */ .highlighted-menu { background: #d3d3d3; border-radius: 35px; padding: 0px 20px; line-height: 50px; } Ecco come dovrebbe apparire:
Una volta fatto ciò, scorri verso il basso fino alla sezione ‘Inserimento’.
Qui, scegli semplicemente la modalità ‘Inserimento Automatico’ in modo che il codice possa essere eseguito automaticamente su tutto il tuo sito web.
Ora, vai in cima alla pagina e sposta l'interruttore da ‘Inattivo’ ad ‘Attivo’.
Quindi, fai semplicemente clic sul pulsante ‘Salva Snippet’ per memorizzare le tue impostazioni.
Hai ora evidenziato con successo una voce di menu in WordPress utilizzando un editor completo del sito.
Ecco come apparirà la tua voce di menu dopo aver aggiunto il codice CSS.
Come Accedere al Personalizzatore del Tema Utilizzando un Tema a Blocchi
Se desideri utilizzare il Personalizzatore del Tema e un tema FSE, copia e incolla semplicemente l'URL sottostante nel tuo browser. Assicurati di sostituire ‘example.com’ con il nome di dominio del tuo sito:
https://example.com/wp-admin/customize.php Questo aprirà il personalizzatore del tema per il tuo tema a blocchi, dove dovrai espandere la scheda ‘CSS aggiuntivo’.
Da qui, copia e incolla lo snippet CSS nella casella ‘CSS aggiuntivo’:
/* Highlighted menu */ .highlighted-menu { background: #FFB6C1; border-radius: 35px; padding: 0px 20px; line-height: 50px; } Dopodiché, fai semplicemente clic sul pulsante ‘Pubblica’ in alto per memorizzare le tue impostazioni.
Metodo 2: Evidenziare una voce di menu utilizzando il personalizzatore del tema
Se stai utilizzando un tema WordPress più vecchio, probabilmente avrai un personalizzatore del tema abilitato per impostazione predefinita. Evidenziare una voce di menu in un personalizzatore del tema è un processo abbastanza semplice.
Innanzitutto, vai semplicemente su Aspetto » Personalizza nella tua bacheca di WordPress per avviare il personalizzatore del tema. Una volta aperto, fai semplicemente clic sulla scheda ‘Menu’ nella barra laterale sinistra.
Da qui, fai clic sull'icona dell'ingranaggio in alto a destra per visualizzare le proprietà avanzate.
Ora, procedi e seleziona la casella ‘Classi CSS’.
Dopo di che, scorri verso il basso fino alla sezione ‘Menu’.
Se hai più menu di WordPress, fai semplicemente clic sul menu con le voci di menu che desideri evidenziare.
Questo aprirà una nuova scheda dove potrai selezionare la voce di menu che desideri evidenziare. Potrebbe essere ‘Contattaci’ come nel nostro esempio, oppure potrebbe essere la tua pagina dei prezzi o il link al tuo negozio online.
Fai semplicemente clic sulla voce di menu di tua scelta per espandere alcune impostazioni. Qui, fai clic sul campo ‘Classi CSS’.
Tutto quello che devi fare è scrivere 'highlighted-menu' nel campo. Puoi aggiungere questa Classe CSS a più voci di menu, e verranno tutte evidenziate.
Successivamente, vai semplicemente alla scheda ‘CSS aggiuntivo’ nel personalizzatore del tema.
Dopo di che, copia e incolla il seguente codice CSS:
/* Highlighted menu */ .highlighted-menu { background: #FFB6C1; border-radius: 35px; padding: 0px 20px; line-height: 50px; } Congratulazioni! Hai evidenziato con successo una voce di menu.
Nota: Il tuo tema potrebbe non avere un campo ‘CSS aggiuntivo’ nel personalizzatore del tema. In caso contrario, controlla le impostazioni del tema per scoprire come aggiungere CSS personalizzato. Se non riesci a trovarlo, potresti voler contattare lo sviluppatore o aggiungerlo usando WPCode.
Infine, non dimenticare di fare clic sul pulsante ‘Pubblica’ in alto per salvare le tue impostazioni.
Personalizzare l'evidenziazione della voce di menu
Ora che hai evidenziato la voce di menu, puoi modificare il codice CSS per personalizzare la tua voce di menu come preferisci.
Ad esempio, puoi cambiare il colore di sfondo della tua voce di menu.
Cerca semplicemente il seguente codice nello snippet CSS che hai appena incollato:
background: #FFB6C1 Dopo averlo individuato, puoi semplicemente sostituire il numero del codice colore rosa con il codice esadecimale di qualsiasi colore a tua scelta:
background: #7FFFD4; Sopra è riportato il codice esadecimale per l'acquamarina.
Puoi consultare la nostra guida per aggiungere facilmente CSS personalizzato per altre idee su come personalizzare la voce di menu evidenziata.
Dopo aver completato le tue scelte, fai semplicemente clic sul pulsante 'Pubblica' nel personalizzatore del tema o su 'Salva snippet' in WPCode per salvare le modifiche.
Speriamo che questo articolo ti abbia aiutato a imparare come evidenziare un'icona di menu in WordPress. Potresti anche voler consultare la nostra guida per principianti su come stilizzare i menu di navigazione di WordPress o il nostro tutorial su come aggiungere icone immagine ai menu di navigazione in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
Ho usato tecniche simili per attirare l'attenzione su pagine importanti. Un altro consiglio che aggiungerei è di considerare l'uso di animazioni CSS per un sottile effetto hover sull'elemento del menu evidenziato o un leggero battito sull'elemento evidenziato per renderlo ancora più evidente. Questo può essere coinvolgente senza essere eccessivo.
Ottimo post, comunque!
Jiří Vaněk
Grazie per il codice CSS. Ha reso la mia ricerca molto più facile. Funziona perfettamente con WPCode.