Come inserire un pulsante call to action nel menu di WordPress

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 del codice CSS personalizzato, in questo modo potremo decorare 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.

Conclusioni

In questo articolo abbiamo visto come sfruttare il menu di navigazione del proprio sito web per attrarre i propri utenti a fare click su una determinata pagina, il tutto in pochi e semplici step, senza l’utilizzo di plugin esterni 🙂

E tu? Hai già creato un pulsante call to action all’interno del menu di navigazione del tuo sito web? Faccelo sapere nei commenti.