ElementsKit viene fornito con il menu Header Off-Canvas che ti consente di creare un menu WordPress off-canvas in Elementor con il maggior numero di opzioni personalizzabili.

Per creare un menu fuori campo di Elementor, 

abilitare il widget Intestazione fuori area >> trascina e rilascia il widget nell'area di progettazione >> modificare il contenuto fuori quadro >> personalizzare gli stili.

Leggi questa documentazione per apprendere i dettagli su come creare un menu fuori schermo di Elementor utilizzando ElementsKit.

Come creare un menu off-canvas di WordPress in Elementor #

Puoi creare un menu Elementor Off-Canvas utilizzando il widget ElementsKit Header Off-Canvas. Avrai bisogno dei seguenti plugin installati sul tuo sito WordPress.

Plugin richiesti:

1. Elementore: Scarica il plugin
2. ElementsKit Lite: Scarica il plugin
3. ElementsKit Pro: Ottieni il plug-in

Passaggio 1: attiva il widget Intestazione fuori area #

Per utilizzare il widget Intestazione fuori dallo schermo, devi prima abilitarlo. Per abilitare il widget, Accedi al tuo sito WordPress E,

1. Navigare verso ElementsKit > Widget.
2. Trovare Intestazione fuori tela e abilitare il widget.
3. Clicca sul SALVARE LE MODIFICHE pulsante nell'angolo in alto a destra.

Passaggio 2: configura il widget #

Ora apri l'editor di Elementor, quindi trascina e rilascia il widget Intestazione fuori area all'area progettazione. 

Nel Contenuto scheda, puoi 

1. Cambiare il Colore sovrapposto.
2. Impostato Chiudi icona di contenuti off-canvas.
3. Scegliere Tipo di menu hamburger.

Ci sono tre opzioni disponibili con il menu Hamburger.

Tipo di menu hamburger: icona
Imposta il tipo di menu su "Icona" e seleziona l'icona dalla libreria.

Tipo di menu hamburger: testo
Imposta il tipo di menu su "Testo" e inserisci un testo.

Tipo di menu Hamburger: icona con testo

Imposta il tipo di menu su "Icona con testo". In questo caso puoi scegliere un icona, accedere testo, e impostare il Posizione dell'icona prima o dopo il testo.

Passaggio 3: modifica il contenuto fuori dallo schermo #

Puoi modificare il contenuto del menu fuori dallo schermo di WordPress utilizzando il widget Intestazione fuori dallo schermo.

1. Attiva l'icona dell'hamburger.
2. Clicca su Modifica contenuto fuori campo.
3. Quindi, nell'area widget, progetta il contenuto per off-canvas utilizzando i widget Elementor o i modelli già pronti.
4. Clicca sul Aggiornamento pulsante e chiudere la finestra Area widget.

Se il contenuto non viene visualizzato fuori dallo schermo, ricarica la pagina e controlla di nuovo.

Passaggio 4: personalizza gli stili #

Nella scheda Stile, personalizza il menu esterno e gli stili dei contenuti. 

4.1 Fuori tela #

Nella sezione Off-Canvas personalizza il file Hamburger pulsante e Chiudi icona.

Per il pulsante Hamburger:

1. Scegli un Colore per l'icona del menu e il testo.
2. Imposta un Colore di sfondo per l'icona e il testo.
3. In termini di Passa il mouse stili, scegli un colore, un colore di sfondo e un colore del bordo.
4. Aggiusta il Icona misurare. (Questa opzione verrà visualizzata se imposti il tipo di menu su "Icona" o "Icona con testo".)
5. Impostare il Tipografia del testo. (Questa opzione verrà visualizzata se imposti il tipo di menu su "Testo" o "Icona con testo".)

6. Scegli un Tipo di bordo per il pulsante Hamburger.
7. Impostare il Larghezza del confine.
8. Scegli un bordo Colore.
9. Impostare il Allineamento del pulsante verso sinistra, destra o centro.
10. Aggiungere Scatola Ombra.
11. Regolare Raggio del confine, Imbottitura, E Margine.

Per Chiudi icona della finestra dei contenuti fuori quadro:

Attiva l'off-tela per vedere le modifiche visive dell'icona Chiudi.

1. Scegli un'icona Colore.
2. Imposta un Colore di sfondo per l'icona di chiusura.
3. In termini di Passa il mouse stili, scegli un colore, un colore di sfondo e un colore del bordo.
4. Aggiusta il Icona misurare.
5. Regola l'icona Dimensioni della scatola.

6. Scegli un Tipo di bordo per l'icona di chiusura.
7. Impostare il Larghezza del confine.
8. Scegli un bordo Colore.
9. Aggiungere Scatola Ombra.
10. Regolare Raggio del confine, Imbottitura, E Margine.

4.2 Pannello fuori tela #

Personalizza l'area dei contenuti fuori quadro nella sezione Pannello fuori quadro.

1. Aggiusta il Larghezza del pannello fuori tela.
2. Scegli il Tipo di sfondo e impostare uno sfondo Colore.
3. Puoi anche usare un Immagine come sfondo.
4. Impostare il Posizione del pannello Fuori schermo a sinistra o a destra dello schermo.
5. Regola l'imbottitura del pannello fuori tela.

Infine, puoi aggiungere il menu off-canvas di WordPress in Elementor.

Come il widget Header Off-canvas, ElementsKit include centinaia di elementi avanzati per Elementor. Ottieni ElementsKit e utilizza questi elementi per creare siti Web WordPress ricchi di funzionalità.