Stai cercando un modo per creare un menu straordinario per migliorare l'interfaccia utente/UX del tuo sito web? Se è così, allora sei nel posto giusto. Qui abbiamo messo insieme una guida dettagliata per aiutarti.
Innanzitutto, ti mostriamo una procedura dettagliata su come creare un menu per il tuo sito Web WordPress. E una volta capito, ti guideremo su come utilizzare il widget del menu di navigazione di Elementor per personalizzare e potenziare il tuo menu WordPress.
Sommario:
È fondamentale sapere che i menu di navigazione sono importanti non solo per portare traffico al tuo sito ma anche per un migliore posizionamento SEO.
In effetti, i menu di navigazione sono progettati principalmente per il coinvolgimento dell’utente, ma questo non è l’unico scopo.
Il secondo fattore più importante è tenere in considerazione il ruolo dei “WebCrawler” o bot progettati per eseguire la scansione dei siti Web e indicizzare il contenuto al livello pertinente e riferirlo al motore di ricerca per classificare il contenuto nel posto giusto.
Pertanto, se stai creando menu troppo complicati, sarebbe difficile per i bot classificare i tuoi contenuti, ma perderai anche i tuoi visitatori.
In breve, la “facilità di navigazione” contribuisce in modo fondamentale a migliorare l’esperienza dell’utente e svolge un ruolo fondamentale nel migliorare il posizionamento del nostro sito e aumentare il traffico.
È un ottimo motivo per cui molti siti Web aziendali mantengono un'unica icona di navigazione anziché una complessa barra dei menu, che si carica fino a un menu a schermo intero quando viene cliccata.
Grazie al widget Elementor Pro con un menu di navigazione reattivo al 100%, puoi creare una barra dei menu perfetta per i pixel e incredibilmente flessibile senza utilizzare alcun codice.
In questo tutorial, ti mostreremo come utilizzare il widget del menu di navigazione Elementor per ottenere il menu WordPress personalizzato e avanzato.
Prima di iniziare con il widget di navigazione di Elementor, esploriamo come creare un semplice menu WordPress utilizzando la versione gratuita di Elementor.
Ora, per creare un menu WordPress, non è necessario installare alcun plugin speciale. Per impostazione predefinita, WordPress viene fornito con un generatore di menu facile da usare, che ti aiuterà a creare semplici menu di navigazione per il tuo sito web.
Detto questo, non avrai accesso ad alcuna opzione di personalizzazione del menu. Assumerà il design del tema WordPress attualmente attivo. Ma se questo è tutto ciò che desideri, allora questo è un ottimo modo per impostare un menu di navigazione per il tuo sito Web WordPress.
Per prima cosa, dovrai accedere alla dashboard del backend di WordPress.
Ora, dalla barra laterale di sinistra, vai su Aspetto > Menu . Qui troverai un layout a due colonne con "Aggiungi voci di menu" a sinistra e "Struttura del menu" a destra.
Sotto Struttura del menu, troverai un campo per il "Nome del menu". Questo sarà il nome del menu che creeremo in questo momento. Chiamiamolo Menu 1.
Nota : non preoccuparti. I tuoi lettori non saranno in grado di vedere i nomi dei menu. È una funzionalità che ti aiuta a mantenere organizzati tutti i tuoi diversi menu.
Dopo aver dato un nome al tuo menu, fai clic sul pulsante "Crea menu" per renderlo disponibile. Ora devi aggiungere le diverse voci di menu.
Ora arriva la parte in cui compili il tuo nuovo menu con le voci di menu. Nella sezione "Aggiungi voci di menu" sul lato sinistro, troverai un elenco organizzato di cose che puoi aggiungere al tuo menu.
Per impostazione predefinita, contiene tutte le tue pagine, post, pagine di destinazione, collegamenti personalizzati e categorie.
seleziona semplicemente le voci di menu che desideri aggiungere utilizzando la casella di controllo, quindi fai clic sul pulsante "Aggiungi al menu". Questo popolerà il tuo menu con tutte le voci di menu selezionate.
Nota : notare che ciascuna sezione sotto "Aggiungi voci di menu" ha la possibilità di alternare tra: Più recente , Visualizza tutto e Cerca . Ricorda di utilizzare queste opzioni se hai molti articoli.
Una volta che hai finito di aggiungere tutte le voci di menu, premi il pulsante "Salva menu" e vai al passaggio successivo.
Sapevi che per impostazione predefinita WordPress ti consente anche di creare sottomenu? Quando crei la struttura del sottomenu, hai una voce di menu principale e una voce di menu figlio.
Quando un utente passa il mouse sopra la voce del menu principale, rivelerà tutte le voci del menu figlio nascoste sotto di essa.
Fantastico, vero?
Ora per creare una struttura di sottomenu, tutto ciò che devi fare è scegliere una voce di menu che desideri sia nel menu principale. Successivamente, trascina e rilascia sotto di esso tutte le voci di menu che desideri come voci di menu figlio. Ora basta trascinarlo verso destra e il gioco è fatto!
Ora che hai creato il tuo nuovo menu e aggiunto i sottomenu, è il momento di gestirne la posizione.
Nella parte superiore dell'editor di menu, dovresti notare un'opzione chiamata "Gestisci posizioni". Cliccandoci sopra dovrebbe apparire qualcosa di simile alla seguente schermata:
Ora, le posizioni dei menu disponibili dipenderanno dal tema che hai installato. In questo amp abbiamo un tema che supporta 3 menu.
Dopo aver assegnato un menu a ciascuna delle posizioni di menu disponibili, fare clic su "Salva modifiche" e il gioco è fatto.
Ora conosci tutte le funzionalità del menu di base offerte da WordPress per impostazione predefinita. Tuttavia, se desideri maggiore personalizzazione e funzionalità, continua a leggere per conoscere il widget del menu Elementor Pro Nav.
Se desideri aggiungere un menu di navigazione personalizzato al tuo sito WordPress, avrai bisogno della versione Elementor Pro. La versione Elementor Pro include il widget di navigazione Elementor insieme a molte altre funzionalità speciali come oltre 300 modelli, un generatore di temi, un widget popup, widget WooCommerce e molte altre funzionalità interessanti.
Quali sono le caratteristiche chiave specifiche del widget Menu di navigazione stesso? Ecco una breve introduzione.
Dovrai creare un menu WordPress di base come accennato in precedenza e quindi personalizzare il menu WordPress predefinito utilizzando il widget pro-nav-menu. Una volta creato l'elenco principale, il passaggio successivo è aggiungerlo alla posizione desiderata, ovvero alla sezione Intestazione.
Ora, quando hai finito con le impostazioni di base, personalizziamo il menu utilizzando il widget del menu di navigazione.
Nell'angolo più in alto della sezione delle impostazioni sono disponibili tre opzioni; Contenuti, stile e avanzati.
La sezione Layout : hai tre opzioni Orizzontale, verticale o una fisarmonica a discesa nascosta.
Sezione Allinea : questa sezione ti aiuta ad allineare le voci di testo del menu; centro, destra o sinistra.
Sezione Animazione : questa sezione ti consentirà di aggiungere effetti di animazione sotto, sopra o effetti di animazione a doppia linea. Puoi anche scegliere la cornice, lo sfondo e le animazioni di testo sottili.
Le animazioni di sottolineatura sono le seguenti:
Allo stesso modo, ci sono animazioni incorniciate, sopralineate, a doppia linea, di sfondo e di testo. Ognuno di essi offre il proprio set di animazioni e puoi verificarle tu stesso per scoprire cosa ottieni con loro.
Sezione Puntatore : seleziona il tipo di puntatore dal menù a tendina.
Sezione indicatore del sottomenu : il widget Elementor è ricco di molte opzioni di stile dei sottomenu. Dove non solo puoi controllare il colore, lo stile e anche lo sfondo del menu.
Imbottitura e spaziatura dei menu: l'imbottitura può essere regolata rapidamente. È possibile modificare il riempimento orizzontale per menu e sottomenu, il riempimento verticale, lo spazio intermedio e anche l'allineamento destro, sinistro e centrato.
Elementor si avvicina molto bene alla spaziatura e al riempimento dei menu. Hanno lavorato duramente dietro le porte per assicurarsi di poter portare gli strumenti allo sviluppatore in modo che possano creare facilmente il progetto a cui stanno pensando.
La spaziatura del menu offre molte opzioni tra cui:
Colore di sfondo e tipografia : puoi ottenere il tuo look personalizzato con l'aiuto della combinazione di colori e del colore di sfondo desiderati. Inoltre, puoi anche scegliere le opzioni del menu trasparente o semitrasparente.
Come designer, puoi giocare con queste opzioni il più possibile e assicurarti di progettare gli sfondi secondo i tuoi gusti.
Il mobile è una parte importante del Web ed è per questo che gli sviluppatori di Elementor forniscono anche strumenti per poter creare la barra di navigazione anche per i dispositivi mobili.
Il widget Elementor ti consente il controllo completo delle opzioni del menu mobile su WordPress. Puoi controllare la visualizzazione dello schermo mobile con un set separato di impostazioni per gli schermi solo mobili. C'è un'opzione per le impostazioni dello schermo mobile nella parte inferiore della sezione delle impostazioni di Elementor in cui puoi visualizzare le opzioni dello schermo mobile.
In breve, le funzionalità del menu mobile di Elementor sono le seguenti:
Navigazione reattiva: offre un posizionamento reattivo del menu.
Il menu è una delle caratteristiche più significative di qualsiasi sito web. Perché aiuta i visitatori a navigare nel tuo sito web e se creassi un elenco in modo intelligente aiuterebbe a mantenere i tuoi visitatori sul tuo sito per molto tempo. Il menu è altrettanto importante quanto quello dell'intero layout di qualsiasi sito Web, dell'intestazione e della sezione del piè di pagina.
Pertanto, il widget del menu deve essere in grado di fornire l'aspetto unico del tuo marchio con tutte le funzionalità essenziali. Il widget di navigazione Elementor è dotato di funzionalità ricche di funzionalità che consentono ai clienti di personalizzare la sezione del menu per adattarla alla voce del tuo marchio. Ora puoi utilizzare un menu elegante personalizzato su misura nel tuo sito web, nella pagina di destinazione, nell'intestazione o in qualsiasi altra sezione in cui desideri visualizzarlo.
Le intestazioni e i piè di pagina di un sito Web sono elementi essenziali. Nella maggior parte dei casi, l'intestazione fornisce la navigazione...
Due dei temi WordPress più popolari sul mercato sono Astra e OceanWP. Professionale…
Per creare un eccellente sito Web di notizie non è necessario che tu diventi un web designer. Noi…
Il tema Giornale è uno dei temi WordPress più significativi progettati da tagDiv, un...
Quando si tratta di creare un negozio online, WooCommerce è il plugin di riferimento. Esso…
Un'intestazione è generalmente la prima cosa che una persona vede quando visita il tuo sito web,...
Visualizza commenti
Hola gracias por el post, quando añado el nav menu no me aparece mi menú se queda solo un recuadro gris en el editor de elementor e se voy a la pagina dove lo tengo non appare nada. Come posso risolverlo? grazie
CIAO! Di solito, questo problema si verifica quando il menu è vuoto o non è stato salvato. Si prega di ricontrollare sul lato del menu WordPress.
Ciao, una consultazione, come puoi dare le istruzioni per chiudere automaticamente un sottomenu all'apertura di un'altra voce del menu.
Grazie.
Ciao, scusa, non ho capito appieno la tua domanda? Potresti specificare?
ciao quando le voci del sottomenu sono troppo lunghe come si riesce a dividerle su più righe ?
Ciao, questo non è consigliato perché la navigazione sarebbe molto complessa da leggere, in questo caso è meglio uno stile mega menu
Menu w wersji mobilnej nie otwiera sie. Come posso aiutarti a telefonare?
Ciao, la visualizzazione del menu mobile è automatica se utilizzi il widget di navigazione Elementor. Ma dovresti controllare un'impostazione chiamata "punto di interruzione" nelle impostazioni del menu. Questa è la dimensione dello schermo quando il menu verrà attivato/disattivato.
Se non lo fai, devi spostarti verso l'orizzontale, quindi non premere il tema Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp oldható meg, hogy egy vertikális menuüben az almenüre kattintás után ne zárja össze a menüt az oldal beöltésekor? EPro
Ciao, sfortunatamente non è possibile, non esiste tale opzione nel widget di navigazione di Elementor.
Ciao. Vorrei sapere se è possibile fare in modo che il menu rimanga sempre visibile anche quando si scende con la visualizzazione della pagina. Purtroppo tutte le volte che ci ho provato il menu scende ma il colore di sfondo del menu non rendelo praticamente illeggibile le scritte. Grazie