Come aggiungere un pulsante nel menu dell'intestazione di WordPress

Aggiungere un pulsante al menu di navigazione principale ti consente di far risaltare la call to action del tuo sito, indirizzando più traffico verso le tue pagine più importanti. È anche un modo semplice per aggiungere lo stesso pulsante a ogni pagina e post.

Abbiamo visto come WPForms, uno dei nostri marchi partner, abbia aggiunto un pulsante "Ottieni WPForms" direttamente nell'intestazione di WordPress. Questa semplice aggiunta ha contribuito ad aumentare le conversioni e le vendite.

Posizionando il pulsante in un punto ben visibile, WPForms ha reso più facile per i visitatori agire, con conseguente maggiore coinvolgimento e più lead.

In questo articolo, ti mostreremo come aggiungere facilmente un pulsante al menu di intestazione di WordPress.

Perché aggiungere un pulsante nel menu di intestazione di WordPress?

I menu di navigazione di WordPress sono tipicamente collegamenti di testo semplice, dove tutto sembra uguale e nulla spicca veramente.

Tuttavia, alcuni collegamenti sono più importanti di altri. Ad esempio, potresti voler aggiungere un collegamento a un modulo d'ordine online o alla pagina di registrazione del tuo sito di appartenenza WordPress.

Per impostazione predefinita, questi collegamenti importanti appaiono come il resto del menu di intestazione.

Puoi rendere questi collegamenti più accattivanti trasformandoli in pulsanti. Questo può farti ottenere più clic e conversioni.

Per impostazione predefinita, puoi aggiungere pulsanti nei post e nelle pagine di WordPress utilizzando il blocco Pulsanti, ma non puoi aggiungerli ai menu di navigazione.

Detto questo, vediamo come puoi aggiungere un pulsante al menu di intestazione di WordPress.

Aggiungere un pulsante nel menu di intestazione di WordPress

Per iniziare, devi aggiungere il link che desideri trasformare in un pulsante.

Vai semplicemente alla pagina Aspetto » Menu nella tua bacheca di WordPress e aggiungi il link al tuo menu di navigazione. Per istruzioni dettagliate, consulta la nostra guida su come aggiungere un menu di navigazione in WordPress.

Dopodiché, devi fare clic sul pulsante Opzioni Schermata in cima alla schermata.

Questo rivelerà un pannello con molte nuove opzioni. Basta selezionare la casella accanto a 'Classi CSS'.

Ora, fai clic per espandere la voce di menu che desideri trasformare in un pulsante.

Noterai una nuova opzione di classe CSS dove puoi digitare un nome di classe. Puoi chiamare la classe CSS come preferisci, ma in questa guida useremo menu-button.

Dopo aver digitato un nome, fai clic sul pulsante 'Salva menu' per memorizzare le tue modifiche.

Ora hai aggiunto una classe CSS personalizzata alla voce di menu. Puoi cambiare il suo aspetto usando codice CSS personalizzato. Puoi aggiungere questo codice tramite il personalizzatore di WordPress integrato o utilizzando un plugin per snippet di codice.

Aggiungere un pulsante nel menu di intestazione di WordPress usando WPCode (Consigliato)

Il modo migliore per aggiungere codice personalizzato a WordPress è utilizzare WPCode. È il miglior plugin per snippet di codice che ti consente di aggiungere CSS personalizzato, PHP, HTML e altro ancora.

Poiché non stai modificando direttamente i file del tema, puoi evitare molti errori comuni di WordPress. Puoi anche aggiornare il tuo tema o passare a un tema completamente diverso senza perdere il tuo codice personalizzato.

Se desideri rimuovere il pulsante in qualsiasi momento, puoi disattivarlo con un solo clic.

Per prima cosa, dovrai installare e attivare il plugin gratuito WPCode. Per maggiori informazioni, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Una volta attivato il plugin, visita la pagina Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress.

Qui vedrai tutti gli snippet WPCode pronti all'uso che puoi aggiungere al tuo sito. Questi includono uno snippet che ti permette di disabilitare completamente i commenti, caricare tipi di file che WordPress di solito non supporta, disabilitare le pagine di allegato, e molto altro.

Ora, passa il mouse sopra l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ quando appare.

Successivamente, devi selezionare ‘Snippet CSS’ come tipo di codice dall'elenco di opzioni che appare sullo schermo.

Nella schermata seguente, devi digitare un titolo per lo snippet di codice.

Il nome è solo per tuo riferimento, quindi puoi usare quello che vuoi.

Fatto ciò, sei pronto per incollare uno snippet di codice CSS nella casella ‘Anteprima codice’:

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

Quando aggiungi lo snippet di codice sopra, assicurati di sostituire menu-button con il nome della tua classe CSS.

Lo snippet di codice sopra crea un pulsante arancione con un effetto ombra, come puoi vedere nell'immagine seguente.

Sentiti libero di giocare con lo snippet CSS per vedere quali diversi effetti puoi creare. Ad esempio, puoi cambiare il colore di sfondo, il colore del testo del link, aggiungere un bordo e altro ancora.

Se desideri utilizzare un colore diverso, dovrai conoscere il codice esadecimale di quel colore. Se non sei sicuro di quali codici utilizzare, puoi usare una risorsa come Color Hex.

Quando sei soddisfatto del codice, fai clic sull'interruttore 'Inactive' in modo che cambi in 'Active', quindi fai clic sul pulsante 'Save Snippet'.

Ora, se visiti il tuo sito web WordPress, vedrai il nuovo pulsante del menu di intestazione in azione.

Aggiungere un pulsante nel menu di intestazione di WordPress tramite il personalizzatore

Se non vuoi usare un plugin, puoi aggiungere codice usando il personalizzatore integrato.

Vai semplicemente su Aspetto » Personalizza e vedrai un'anteprima del tuo sito sulla destra, oltre a una serie di impostazioni del tema nella colonna di sinistra.

Per iniziare, fai clic sull'opzione 'CSS aggiuntivo'.

Ora vedrai una casella in cui puoi aggiungere codice CSS personalizzato.

Ancora una volta, puoi usare lo snippet di codice sopra come punto di partenza.

Quando sei soddisfatto dell'aspetto del pulsante, fai clic su 'Pubblica' per rendere effettive le tue modifiche.

Tutorial video

Se sei più uno studente visivo, consulta il nostro tutorial video su come aggiungere un pulsante nel menu di intestazione di WordPress:

Bonus: Aggiungere un pulsante Chiama per chiamare nell'intestazione di WordPress

Se hai un sito per piccole imprese, potresti anche voler aggiungere un pulsante Chiama per chiamare nel tuo menu di navigazione. Ciò renderà più facile per i visitatori contattarti e può persino migliorare il tuo posizionamento nei motori di ricerca rendendo il tuo sito più ottimizzato per la SEO.

Per aggiungere questo pulsante, visita la pagina Aspetto » Menu dalla dashboard di WordPress ed espandi la scheda 'Link personalizzati' sulla destra.

Qui, aggiungi il tuo numero di telefono VOIP nell'URL e aggiungi un'etichetta. Dopodiché, fai clic sul pulsante 'Aggiungi al menu'.

Una volta aggiunto il pulsante Chiama per chiamare al tuo elenco di collegamenti di navigazione, non dimenticare di fare clic sul pulsante 'Salva menu' per memorizzare le tue impostazioni.

Per istruzioni dettagliate, potresti voler consultare il nostro tutorial su come aggiungere un pulsante Chiama per chiamare in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un pulsante al menu dell'intestazione di WordPress. Puoi anche consultare la nostra guida su come creare un menu di navigazione fluttuante fisso in WordPress e il nostro tutorial su come aggiungere logica condizionale ai menu in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.