Creare menu Elementor

Menù Widget: come creare un menù di navigazione con Elementor

Menù Widget: il più avanzato sistema di design per creare un menù di navigazione su un sito WordPress

Ecco qui una delle funzione più attesa di Elementor: il menù Widget! Continua a leggere per scoprire come progettare fantastici menù per qualsiasi tema e per ogni dispositivo.

Progettare e personalizzare i menu è un processo difficoltoso ma ora vi mostriamo un nuovo modo per renderlo facile e divertente.

Siamo entusiasti di presentarvi il tanto atteso Widget Nav Menù di Elementor.

Questo widget è estremamente flessibile. In effetti, non esiste NESSUN ALTRO tema o plugin WordPress con la massima flessibilità di progettazione del menù di navigazione.

Ti consente di creare un numero infinito di design di menù perfetti, tutti personalizzabili fino all’ultimo pixel.

Ci sarebbe molto di più da scrivere su questa nuova entusiasmante funzione, ma siamo troppo felici di poterti mostrare tutte le possibilità di personalizzazione che offre, quindi ecco qui:

Layout Orizzontale, Verticale e Dropdown

Una volta scelto il menù dai menù WordPress creati in precedenza, è possibile iniziare a personalizzare il layout del menù.
La prima mossa è scegliere tra 3 layout di base:

menù orizzontale elementor

Orizzontale: il menu sarà distribuito orizzontalmente da sinistra verso destra o viceversa.

Menù verticale Elementor

Verticale: per ottenere il menu verticale posizionato dall’alto verso il basso.

Dropdown – Un altro layout verticale in cui il sottomenu scende come una fisarmonica

Puntatori e Animazioni

Selezionando un puntatore e un’animazione per il menu, puoi creare oltre 50 effetti diversi per l’effetto hover e le voci di menu attive.

Guarda questi bei esempi:

Animazioni della Sottolineatura

Il puntatore di sottolineatura presenta 5 animazioni: Fade, Slide, Grow, Drop in e Drop out.

Animazioni incorniciate

Il puntatore con cornice include 5 animazioni: Fade, Grow, Shrink, Draw e Corners.

menù framed Elementor

Animazione Overline

Overline include lo stesso set di 5 animazioni della Sottolineatura: Dissolvenza, Diapositiva, Crescita, Drop in e Drop out.

menù overline elementor

Animazione a Doppia Linea

Anche qui, per il puntatore a linea doppia, troviamo 5 animazioni: Fade, Slide, Grow, Drop in e Drop out.

Animazioni dello Sfondo

Il puntatore sullo sfondo ha il maggior numero di animazioni. La Gif di seguito mostra le prime 5 animazioni, ma per questo puntatore sono disponibili 11 animazioni: Fade, Grow, Shrink, Sweep left / right / up / down and Shutter in vertical / out vertical / in horizontal / out horizontal.

animazione sfondo menù Elementor

Animazione del Testo

Il puntatore ha solo un effetto di animazione del testo, ottimo per i menù minimalisti. Include: crescere, restringere, affondare, galleggiare, inclinare e ruotare.

Personalizzazione del menu senza precedenti

Spaziatura, colori, caratteri. Ogni parametro di progettazione è stato tradotto nell’interfaccia utente visiva che conosci ed utilizzi in Elementor.

Spaziatura del menù e Allineamento

Qualsiasi web designer sa che l’impostazione della spaziatura è uno dei più grandi problemi quando si parla di progettazione di un menù.

Con questo widget è possibile assegnare la spaziatura semplicemente trascinando il cursore della relativa voce con il mouse.

Alcuni dei nostri controlli di spaziatura del menù includono:

  • Padding orizzontale per ogni elemento del menù e sottomenù
  • Padding verticale per ogni elemento del menù e sottomenù
  • Lo spazio tra le voci di menù
  • Allineamento a Destra, Sinistra, Centrato e Giustificato

Colore, Sfondo e Tipografia

Personalizzando il colore e la tipografia delle voci di menù è possibile creare un’ampia gamma di menù. Dai menù trasparenti a quelli semitrasparenti, a tutta larghezza, minimal, chiaro, scuro … Non c’è limite per quanto riguarda i tipi di grafica della barra dei menù che puoi sviluppare.

Ovviamente ci sono le stesse opzioni di progettazione per i sottomenù.

Sottomenù

Il sottomenù dropdown è stato sviluppato utilizzata la stessa cura del menù.

Molte sono le opzioni grafiche disponibili per sviluppare un dropdown menù accattivante.

Creare menu Elementor

È possibile impostare tutti gli aspetti del design del dropdown, compresi i colori del testo e dello sfondo, la tipografia, il riempimento orizzontale e verticale, il bordo, l’ombra del riquadro, il divisore e la distanza.

Menù Responsive per i dispositivi Mobile

Il Menù di Elementor offre una soluzione completa per i menù mobile su WordPress. Il menù mobile è controllato da un set separato di impostazioni, dandoti la possibilità di personalizzare facilmente ciascun menù sul dispositivo giusto.

Menù Responsive Elementor

Le funzionalità del menù mobile di Elementor includono:

Breakpoint per dispositivi mobili e tablet. Utilizzando l’impostazione del breakpoint è possibile decidere se il menù mobile verrà visualizzato per tablet e mobile (1023px o inferiore) o solo per dispositivi mobili (767px e inferiori).

A tutta larghezza sul cellulare. Impostando il menù mobile a tutta larghezza, è possibile visualizzare il menù mobile ad una larghezza limitata quando è chiuso (quando viene visualizzata l’icona burger) ed allargarlo a tutta larghezza una volta aperto.

Menù mobile con icona burger o testo (menù verticale e a fisarmonica). Puoi scegliere di visualizzare un’icona burger pieghevole o un menù verticale completamente visibile.

Elemento dropdown menù mobile

Allineamento laterale / centro. Scegli se il menù mobile è allineato lateralmente o al centro.

Allineamento icona Burgher. L’icona burger chiusa può essere allineata a sinistra, al centro o a destra.

Disegna il pulsante di attivazione / disattivazione. Modella il pulsante di attivazione per colore, colore di sfondo, dimensioni, larghezza del bordo, raggio del bordo e stato normale e di passaggio del mouse.

Progetta il dropdown. Imposta il colore, la tipografia, la spaziatura, il divisore e l’ombra del riquadro del menù a discesa per lo stato normale e di passaggio del mouse.

Navigazione responsive. Il tuo menù avrà un bell’aspetto su qualsiasi dispositivo, con la corretta regolazione in base alla larghezza del dispositivo.

Ti è piaciuto questo articolo? Commentalo con noi nel gruppo Facebook dedicato Elementor Pro Italia

Trovi l’articolo originale in inglese qui.

Roberto Marinello

Roberto si occupa di web da quasi 20 anni, vive con 2 cani ed è (quasi) sempre felice

Elementor-Pro-Italia.it is run by a 3rd party and not associated, or act on behalf of Elementor or Pojo Themes. Elementor is a registered trademark of Pojo Themes.