Vai al contenuto principale

Come aggiungere stile al vostro menu di navigazione

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Desideri personalizzare i menu di navigazione di WordPress per cambiarne i colori o l'aspetto? Il tuo tema WordPress gestisce l'aspetto dei menu di navigazione sul tuo sito. Puoi personalizzarlo facilmente utilizzando CSS per soddisfare le tue esigenze. In questo tutorial, ti mostreremo come modellare i menu di navigazione del tuo blog WordPress.

to-the-style-to-menu di navigazione de de wordpress

Metodo 1: come modellare i menu di WordPress con un plug-in

Il tuo tema WordPress utilizza CSS per i tuoi stili di navigazione. Molti neofiti non si sentono a proprio agio con la modifica CSS dei temi WordPress. Quindi questo è quando un plugin per lo stile di un menu diventa pratico, perché ti evita di modificare i file del tema o scrivere codice.

Innanzitutto, quello che devi fare è installare e attivare il plug-in " CSS eroe ". Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

CSS Hero è un plugin WordPress premium che ti consente di progettare il tuo tema WordPress senza scrivere una singola riga di codice (No HTML o CSS richiesta).

Dopo aver attivato il plugin, verrai reindirizzato a una pagina in cui dovrai fornire la tua licenza. Segui le istruzioni sullo schermo e verrai reindirizzato al tuo sito con pochi clic.

Ora devi fare clic sul pulsante eroe CSS Sulla barra degli strumenti di WordPress.

css-hero-menu-wordpress

CSS Hero offre un editor WYSIWYG (quello che vedi è quello che ottieni "Quello che vedi è quello che ottieni"). Fare clic su questo pulsante ti porterà al tuo sito web con una barra degli strumenti mobile CSS Hero sulla destra.

barra degli strumenti-css-hero

È necessario fare clic sull'icona blu in alto per avviare la modifica.

Sposta il mouse sul menu di navigazione e CSS Hero lo evidenzierà visualizzando i suoi bordi. Quando fai clic sul menu di navigazione evidenziato, ti mostreranno i diversi elementi che puoi modificare.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

personalizzare un menu con-css-eroe

Nello screenshot qui sopra, puoi vedere la voce di menu, il menu di navigazione e il contenitore del menu di navigazione, ecc.

Supponiamo di voler cambiare il colore del testo di tutti gli elementi nel menu di navigazione. In questo caso, selezioneremo il menu di navigazione che tocca l'intero menu.

CSS Hero ora ti mostrerà le diverse proprietà che puoi modificare come testo, colore di sfondo, bordi, margini, riempimento, ecc.

css-proprietà-hero

È possibile fare clic su una proprietà che si desidera modificare. CSS Hero ti presenterà una semplice interfaccia in cui puoi apportare le tue modifiche.

edit-a-proprietà-css-con-css-hero

Nello screenshot qui sopra, abbiamo selezionato il testo e ci ha mostrato una bella interfaccia per selezionare i caratteri, cambiare il colore del testo, le dimensioni e altre proprietà.

Man mano che apporti le modifiche, avrai un'anteprima dal vivo del risultato finale.

ANTEPRIMA-to-live-css-hero

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Quando sei soddisfatto delle modifiche, fai clic sul pulsante "Salva" nella " eroe CSS Per salvare le modifiche.

La parte migliore di questo metodo è che puoi facilmente annullare le modifiche apportate. CSS Hero mantiene una cronologia completa di tutte le tue modifiche e puoi andare e venire tra queste modifiche.

Metodo due: come modificare manualmente lo stile del menu di navigazione

Questo metodo richiede di modificare i file del tema WordPress. Dovresti usarlo solo se sei uno sviluppatore e hai una certa conoscenza della creazione di temi WordPress.

Il modo migliore per farlo è personalizzare il tuo tema WordPress creando un tema figlio. Se cambi solo CSS, ti invito a leggere il nostro tutorial su come aggiungere codice CSS personalizzato su WordPress.

I menu di navigazione di WordPress vengono visualizzati in un elenco non ordinato (elenco puntato).

Se si utilizza il seguente tag php, verrà visualizzato un elenco senza classi CSS associate ad esso.


Il tuo elenco puntato avrebbe il "menu" del nome della classe con ogni voce di elenco con la propria classe CSS.

Questo potrebbe funzionare se si dispone di un'unica posizione del menu. Tuttavia, la maggior parte dei temi ha diversi punti in cui è possibile visualizzare i menu di navigazione.

L'utilizzo solo delle classi CSS predefinite può causare conflitti con i menu in altri posti.

Questo è il motivo per cui è necessario definire la classe CSS e la posizione del menu. È probabile che il tuo tema WordPress lo stia già facendo aggiungendo i menu di navigazione usando un codice come questo:

'primary', 'menu_class' => 'primary-menu',)); ?>

Questo codice dice a WordPress che è qui che il tema mostra il menu principale. Aggiunge anche una classe CSS " menù principale Nel menu di navigazione.

Ora si trova lo stile del vostro menu di navigazione usando la struttura CSS.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

#header menù .primary {} // contenitore classe #header menù .primary ul {} // contenitore prima classe lista non ordinata #header menù .primary ul ul {} // lista non ordinata All'interno di una lista non ordinata #header .primary -menu li {} // Ogni elemento di navigazione #header .primary li menu {} // Ogni elemento di navigazione # intestazione li ancoraggio menù .primary ul {} // lista non ordinata se non v'è discesa articoli #header .primary -menu li li {} // Ogni discesa voce di navigazione # intestazione li menù li .primary ha {} // Ogni ancora di salvezza verso il basso voce di navigazione

Sostituisci #header con la classe contenitore o " ID Utilizzato dal tuo tema WordPress.

Questa struttura ti aiuterà a cambiare completamente l'aspetto del tuo menu di navigazione.

Questo è tutto per questo tutorial. Spero che ti permetta di personalizzare i menu del tuo blog WordPress. Sentiti libero di condividerlo con i tuoi amici sui tuoi social network preferiti.

 

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota1
Tweet1
Enregistrer