Il processo di mettere in risalto un testo, un pulsante o un box per far si che l’utente effettui un’azione sul nostro sito viene comunemente chiamato “call to action“.
In questo articolo non parleremo di cos’è una call to action (se vuoi saperne di più puoi leggere un ottimo articolo dedicato alla definizione di call to action), ma vedremo come fare per crearne una in una zona del sito web molto importante: ossia all’interno del menu di navigazione.
Il menu principale di WordPress, solitamente posto nella parte alta di un sito web, è ben visibile da tutti gli utenti che navigano un sito web e quindi può essere un ottimo posto per una ipotetica call to action.
Creare una call to action nel menu di WordPress
La maggior parte dei temi WordPress in circolazione non offre la possibilità di evidenziare automaticamente una voce all’interno del menu di navigazione, ma fortunatamente ciò può essere fatto con una manciata di righe di codice CSS.
Facciamo un esempio reale, supponiamo di utilizzare uno dei temi di default di WordPress (Twenty Twenty-One) e di avere un menu di questo tipo:
Il menu ha serie di elementi al suo interno (molto classici) e poi, alla fine, ha una voce chiamata “In promozione” dove vengono mostrati una serie di prodotti scontati.
E se volessimo mettere in risalto quella voce all’interno del menu di WordPress?
Sarebbe sicuramente una buona idea, con un po’ di CSS possiamo far risaltare quella voce rispetto alle altre.
Diamo una classe personalizzata all’elemento
- La prima cosa da fare è andare nella dashboard di WordPress in “Aspetto-> Menu“,
- selezionare la voce che vogliamo mettere in evidenza (in questo caso la voce “In promozione”)
- e nel campo “Classi CSS” aggiungere la parola “evidenziato“,
- successivamente salviamo il menu.
Nel caso in cui la sezione “Classi CSS” non fosse visibile, bisognerà attivarla cliccando sul pulsante in alto a destra della schermata dei menu “Impostazioni schermata“.
Si aprirà un menu a tendina in cui dovremo selezionare la voce “Classi CSS“, a questo punto il campo sarà automaticamente visibile all’interno delle voci nel menu.
Aggiungiamo del CSS personalizzato
Bene, ora che abbiamo dato una classe CSS personalizzata all’elemento del menu che vogliamo mettere in risalto, non ci resta che aggiungere il codice CSS personalizzato, in questo modo potremo modificare il pulsante ed evidenziarlo maggiormente rispetto alle altre voci del menu.
Per fare questo, andiamo in “Aspetto-> Personalizza-> CSS Aggiuntivo” e incolliamo questo codice:
.evidenziato {
background-color: #5578a2;
border-radius: 5px;
}
.evidenziato a, .evidenziato a:hover, .evidenziato a:focus {
color: #ffffff !important;
font-weight: bold;
}Salviamo le impostazioni e diamo un’occhiata al risultato ottenuto.
Un risultato apprezzabile, soprattutto se paragonato con la barra del menu vista in precedenza.
In questo modo gli utenti che navigheranno il sito web vedranno molto più facilmente la pagina dei prodotti “in promozione” (o qualsiasi altra pagina vorrai).
Il codice CSS fornito è solo un esempio, infatti potrai scegliere di
- sostituire il colore dello sfondo del pulsante,
- il colore del testo,
- e potrai aggiungere altri elementi per abbellirlo e personalizzarlo.