Come creare un menu fuori schermo di Elementor senza codifica (4 semplici passaggi)

Un menu fuori dallo schermo abbellirà l'interfaccia utente del tuo sito web. Inoltre, è anche in grado di trattenere i tuoi visitatori o clienti sul tuo sito. Oltre a questi, un menu off-canvas di Elementor apre anche le porte a varie opportunità di business.

Pertanto, aggiungerlo al tuo sito diventa la massima necessità se non vuoi compromettere l'interfaccia utente e la UX del tuo sito web. Fortunatamente, ci sono opzioni per aggiungere il menu fuori schermo di Elementor in WordPress che è completamente gratuito.

Puoi adottarne uno qualsiasi. Sebbene l'utilizzo di ElementsKit sia l'opzione più adatta e più semplice in quanto ti consente di aggiungere un menu fuori dallo schermo in pochi secondi.

Quindi, esploriamo il il processo più semplice per aggiungere un menu fuori schermo utilizzando ElementsKit. Ma prima di ciò, brevemente brevemente su questo menu off-canvas e sulla sua importanza.

Cos'è un menu fuori quadro in Elementor?

Un menu fuori quadro è a menu a comparsa quello appare dal lato del tuo sito web facendo clic su un'icona, un'immagine o un testo. Questo è un menu moderato migliora l'esperienza dell'utente di un sito web su dispositivi mobili o schermi di piccole dimensioni poiché puoi semplificare la sezione dell'intestazione utilizzandola.

Perché utilizzare il menu fuori schermo di Elementor?

Il vantaggio principale di questo menu fuori quadro è che può risparmiare molto spazio sul tuo sito web che devi visualizzare il menu dell'intestazione. Pertanto, nel caso di visualizzazione di siti Web con migliore interfaccia utente su schermi piccoli, è necessario richiedere questo menu esterno.

Tuttavia, puoi promuovere sconti speciali in questo menu fuori quadro. Inoltre, mostrare gli sconti nel menu off-canvas sarà in grado di attirare l'attenzione dei visitatori del tuo sito web.

Oltre a ciò, è adatto anche per visualizzare alcune sezioni del menu fuori schermo. Ad esempio, puoi mostrare determinati prodotti scontati e rendere la tua promozione più eccezionale e redditizia.

Da più della metà dei visitatori del sito utilizza il dispositivo mobile per visitare un sito, devi utilizzare questo menu esterno allo schermo del tuo sito per farlo moltiplica le tue opportunità di business. Inoltre, lo scopo del menu fuori quadro sarà raggiunto se utilizzato per utenti mobili.

Oltre a questi, un menu fuori quadro presenta anche altri vantaggi. Puoi usarlo per vari scopi e regalarlo direzione verso i tuoi obiettivi aziendali utilizzandolo in modo appropriato.

Dato che conosci tutte le opportunità del menu off-canvas, tuffiamoci nel processo di aggiunta al tuo sito seguendo il metodo più semplice.

Passaggi per creare il menu fuori schermo di Elementor

Nonostante i numerosi vantaggi derivanti dall'utilizzo di Elementor fuori dal menu Canvas, ti serviranno alcuni secondi per aggiungerlo al tuo sito WordPress. Inoltre, lo è 100% gratuito per aggiungere il menu fuori campo di Elementor utilizzando ElementsKit. Perché troverai un widget gratuito dedicato chiamato "Header Offcanvas" in ElementsKit.

L'aggiunta di un menu fuori dallo schermo utilizzando questo widget non richiederà alcuna codifica. Inoltre, puoi personalizzare questo menu come desideri senza avere alcuna limitazione. Inoltre, puoi aggiungere un menu fuori quadro seguendo il metodo più semplice che consiste in soli 4 passaggi. Passa attraverso il 4 semplici passaggi E aggiungi un menu fuori quadro al tuo sito WordPress:

Passaggio 1: installa un plug-in del menu fuori dallo schermo.

Per ottenere il vantaggio del widget del menu fuori dallo schermo di ElementsKit, devi prima installarlo. Per installare il plug-in del menu Canvas, fare clic su Aggiungi nuovo opzione in Plugin e cercare ElementsKit nella casella di ricerca. Dopo aver visto ElementsKit, premere Installa ora pulsante e attivare più tardi.

Passaggio 2: attiva il widget intestazione fuori tela.

Nel secondo passaggio, è necessario visita ElementsKit >> ElementsKit E clicca sui WIDGET sezione.

Dall'area widget, abilitare il widget "Header Offcanvas". E premere SALVA MODIFICHE pulsante.

Passaggio 3: aggiungi Elementor dal menu Canvas.

Ora è il momento di aggiungere un menu fuori dallo schermo al tuo sito Web Elementor. Fare quello, fare clic su Aggiungi nuovo opzione in Post e dare un titolo alla posta. Dopo di che, fai clic su Modifica con Elementor pulsante per aggiungere il menu fuori quadro in WordPress.

Questo ti reindirizzerà alla dashboard di Elementor, dove è necessario cercare il widget Header Offcanvas e dopo averlo trovato, trascinalo e rilascialo sul segno più icona.

Ora, fare clic sull'icona dell'hamburger per aggiungere menu o elementi al menu fuori schermo.

Poi fare clic su Modifica contenuto opzione e aggiungi gli elementi che desideri al tuo menu. Ti porterà al area widget da dove puoi aggiungere diversi elementi al menu fuori dallo schermo per aggiungere variazioni.

Per esempio, cercare il menu verticale E trascinalo e rilascialo sull'icona più, proprio come il widget fuori dallo schermo dell'intestazione. Successivamente, segui la stessa procedura per aggiungere eventuali elementi al menu fuori dallo schermo.

Dopo aver aggiunto un widget del menu verticale, selezionare il menù che desideri mostrare nel menu fuori schermo di Elementor e personalizzarlo di conseguenza. Una volta completate tutte le personalizzazioni, fare clic su Aggiorna pulsante.

Dopo aver aggiunto elementi all'intestazione del menu Canvas, puoi farlo personalizzare e aggiornare le seguenti aree:

• Colore sovrapposizione: Da qui, scegli il colore per il tuo menu fuori quadro.
• Tipo di menù: Troverai icone, testo e icone con opzioni di testo. Seleziona ciò che desideri visualizzare al posto del menu fuori schermo dell'intestazione.
• Icona: Se scegli l'icona nel Tipo di menu, questa sezione sarà visibile da dove dovrai selezionare un'icona.

Proprio accanto alla scheda Contenuto, troverai una scheda Stile. Fai clic sulla scheda Stile e personalizza gli elementi seguenti per il tuo menu fuori schermo:

• Colore.
• Colore di sfondo.
• Passa il mouse sul colore.
• Colore di sfondo al passaggio del mouse.
• Colore del bordo al passaggio del mouse.
• Dimensione dell'icona.
• Tipo di confine.
• Allineamento.
• Ombra della scatola.
• Raggio del confine.
• Imbottitura.
• Margine.

Dopo aver modificato fuori campo; si deve modificare la larghezza, il tipo di sfondo, la posizione e il riempimento del pannello fuori tela. Finalmente, premere Pubblica pulsante una volta terminata la personalizzazione.

Passaggio 4: sguardo finale all'intestazione del menu Canvas.

Ecco la panoramica o un esempio del tuo menu off-canvas preparato con ElementsKit. Tuttavia, puoi aggiungere ulteriori varianti personalizzando il menu fuori dallo schermo dall'area widget.

Inizia con il menu fuori schermo dell'intestazione

L'utilizzo di un menu fuori quadro renderà il tuo sito più interattivo e coinvolgente poiché può risparmiare molto spazio sul tuo sito WordPress. Inoltre, è perfetto da avere UI e UX migliori su schermi piccoli. Tuttavia, aggiungere un menu fuori dallo schermo è semplicissimo e veloce.

Tutto ciò che devi fare è adottare i quattro passaggi precedenti e sarai pronto per goderti gli eccellenti vantaggi e le opportunità del menu fuori schermo dell'intestazione. Sopra abbiamo utilizzato ElementsKit poiché offre l'opzione più semplice per aggiungere questo menu.

Insieme ad esso, troverai molte funzionalità se usi ElementsKit. Poiché è un componente aggiuntivo tutto in uno per Elementor che ha tutte le opzioni per rendere il tuo sito web fluido e competitivo. Quindi, utilizza il miglior plugin per aggiungere menu off-canvas sul tuo sito web Elementor.