Quando progetti il ​​tuo sito web con temi a blocchi WordPress, potresti aver notato che la navigazione principale del tuo sito ha opzioni di stile limitate. Ad esempio, quando fai clic sul collegamento di una pagina nella navigazione principale per visitare una pagina del tuo sito web, il collegamento alla pagina attiva non cambia colore all'interno della navigazione principale. In altre parole, non c'è alcuna indicazione per l'utente su quale pagina si trova attualmente.

Una buona esperienza utente dice che i visitatori del sito dovrebbero sempre avere una sorta di indicazione su dove si trovano sul tuo sito: aiuta a evitare che si perdano.

In questo tutorial, ti mostrerò come personalizzare rapidamente la navigazione del tuo sito nei temi a blocchi di WordPress per visualizzare un colore personalizzato per la pagina attiva. Utilizzerò il tema Twenty Twenty Four per questa dimostrazione.

Passaggio 1: accedere all'editor blocchi

Dalla dashboard di WordPress, vai su Aspetto>Editor (freccia rossa nella foto sopra). Questo ti porterà all'editor del sito.

Fare clic sull'area del contenuto principale a destra del menu. Questo ti porterà all'interno dell'editor dei blocchi.

Passaggio 2: aggiungi CSS personalizzato

Successivamente, fai clic sull'icona "Stili" nell'angolo in alto a destra dell'editor blocchi.

Fai clic sull'icona "Altro" (l'icona con i tre punti verticali), quindi fai clic su "CSS aggiuntivo".

Incolla il seguente codice CSS nella casella di testo "CSS aggiuntivo":

.current-menu-item {
  color: #e23f1b;
}

Sostituisci il valore tra il simbolo “#” e il “;” simbolo con il codice esadecimale per qualsiasi colore che desideri utilizzare (puoi ottenere i valori del codice esadecimale del colore all'interno di WordPress modificando tutto ciò che ha un valore di colore o utilizzando uno strumento di colore come TonalitàMint or Coolors).

Fai clic sul pulsante “Salva” nella parte superiore dell’editor blocchi, quindi fai nuovamente clic su “Salva”.

Passaggio 3: Visualizza la pagina

Una volta salvate le modifiche, ora puoi fare clic sull'icona "Visualizza pagina" per visualizzare in anteprima il tuo sito con il nuovo colore per la pagina attiva nella navigazione principale.

Troubleshooting

Se il codice precedente non ha funzionato per te, potresti utilizzare un tema che utilizza classi diverse per le voci di menu attive oppure potresti utilizzare collegamenti personalizzati nel blocco di navigazione anziché collegamenti alla pagina.

Temi non bloccati o temi bloccati di terze parti

Per risolvere il primo problema, dovrai utilizzare lo strumento "ispeziona" nel tuo browser e capire quale classe viene utilizzata per i collegamenti alle pagine attive nella navigazione principale (puoi anche provare a cercare su Google "Quale classe ____ usa il tema per i collegamenti attivi" collegamenti alle pagine nella navigazione principale”).

Per quest'ultimo problema, cambia semplicemente i tuoi collegamenti personalizzati in collegamenti di pagina all'interno dell'editor del sito. Per farlo dall'editor dei blocchi, fai clic sul logo nell'angolo in alto a sinistra dell'editor (sarà il logo di WordPress o il logo del tuo sito).

Quindi, fai clic su “Navigazione”. Fai clic sull'icona "Modifica" accanto al nome del menu principale del tuo sito.

Fare clic sul menu di navigazione per modificarlo. Quindi, fai clic su "Vai al blocco di navigazione principale" nella barra laterale delle impostazioni del blocco se non è stato portato lì per impostazione predefinita.

Sotto l'intestazione "Menu" nella barra laterale Impostazioni blocco, vedrai un elenco di tutte le tue pagine presenti nella navigazione principale. Se nella navigazione sono presenti pagine del sito elencate come collegamento personalizzato (come la voce in basso nella foto di esempio), dovrai eliminare la voce e aggiungerla nuovamente come pagina (se possibile).

Per fare ciò, fai clic sull'icona "Opzioni" accanto alla voce, quindi fai clic su "Rimuovi ____". Successivamente, fai clic sull'icona "+" nella parte inferiore dell'elenco delle pagine.

Successivamente, fai clic su "Link pagina", quindi trova la pagina che desideri aggiungere. Una volta aggiunta la pagina, fare clic su "Salva" e fare nuovamente clic su "Salva". Il problema dovrebbe essere risolto.

Pin It on Pinterest