4. Header responsive

e realizza in autonomia il tuo sito web!

Rimborso garantito fino a 30 giorni dall'acquisto.

L’header del sito è ora completa e ha un aspetto gradevole e pulito. Ma, come si vedrà da un dispositivo mobile?

Non dimentichiamo che i siti vengono ormai consultati il più delle volte da dispositivi mobili. Diventa quindi fondamentale assicurarsi che il sito web si adatti correttamente al tablet e sopratutto allo smartphone.

Fortunatamente, Elementor gestisce in modo semplice e completo anche l’ottimizzazione del responsive design.

Vediamo nel dettaglio.

Attivare modalità responsive design

Per gestire l’ottimizzazione per dispositivi mobili, è sufficiente cliccare sull’icona dello schermo, in basso nel pannello di sinistra.

Al clic, si aprirà un menu con le seguenti scelte:

Desktop
Tablet
Mobile

Desktop è la modalità di default, ovvero la visualizzazione del sito sul monitor di un computer.

Clicchiamo quindi sull’opzione mobile e vedremo che magicamente la nostra area di lavoro prenderà la forma di uno smartphone.

Come si può notare dall’immagine, l’header del sito non è esattamente ottimizzato per mobile.

Ottimizzare header per mobile

In linea di massima, quello che su desktop può essere disposto senza problemi su più colonne, nel mobile si dispone solitamente su una sola colonna.

Header Responsive

Dal template Header in modalità responsive mobile:

Seleziona la colonna del logo nella sezione header
Sotto LAYOUT, imposta la larghezza a 100%.
Fai lo stesso per la colonna del menu e delle icone social

Come avrai notato ora gli elementi sono disposti uno sotto l’altro e va un po’ meglio.

Logo Responsive

Seleziona l’elemento logo
Nel pannello Modifica Logo Sito, clicca su AVANZATO
Alla voce RIENTRO, clicca sull’icona del link per scollegare i valori
Inserisci un po’ di rientro sopra e sotto (ad esempio 15px)

Menu Responsive

Seleziona l’elemento menu
Nel pannello Modifica Navigazione Menu, sotto CONTENUTO, scendi fino a trovare la voce MENU A DISCESA e seleziona Centra per il campo ALLINEA
Poi vai sotto STILE, clicca il bottone MENU A DISCESA e imposta i colori che desideri per i vari stati del menu
Personalizza la tipografia del menu responsive, cliccando sull’icona della matita
Infine, scorri un po’ più sotto per impostare la SPAZIATURA VERTICALE del menu
Puoi anche personalizzare l’icona per aprire e chiudere il menu (Pulsante a due stati)

Nascondere elementi

Seleziona l’elemento icone social
Nel pannello Modifica Icone social, sotto AVANZATO, scendi fino a trovare e aprire la sezione RESPONSIVE e attiva NASCONDI SU MOBILE

Personalmente, credo che i social sotto l’icona del menu non stiano molto bene. Ovviamente puoi decidere di mantenerle in quella posizione anche su mobile.

Il mio scopo era più che altro quello di mostrarti come rendere non visibile un elemento su un determinato dispositivo.

Nascondere elementi in modalità responsive Quando rendi NON visibile un elemento, esso continuerà a essere visibile nell'interfaccia di Elementor. Se così non fosse diventerebbe piuttosto complicato ritrovarlo. Un miglioramento che risale alle ultime versioni del plugin è che l'elemento non visibile appare grigio e con uno sfondo di barre trasversali.

Ottimizzare header per tablet

Partendo dal presupposto che è più importante ottimizzare il sito per mobile, vediamo comunque quali miglioramenti possiamo apportare per la versione tablet.

Per attivare la modalità responsive tablet, il metodo è lo stesso visto per il mobile. Clicca sull’icona dello schermo in basso e poi su Tablet. L’area di lavoro prenderà la forma di un tablet.

La correzione più importante è, anche qui, la dimensione delle colonne. Nel caso del tutorial optiamo per la seguente distribuzione:

logo: 100%
menu: 80%
icone social: 20%

Oltre alle colonne, impostiamo un po’ di rientro, sopra e sotto, per il logo, in modo che non rimanga troppo attaccato al menu. Per impostare il rientro ti ricordo che devi selezionare l’elemento (in questo caso il logo), selezionare la tab AVANZATO e inserire i valori nei campi RIENTRO.

Ecco qui come dovrebbe apparire adesso l’header in modalità responsive tablet.

Conclusioni

Siamo partiti dalla creazione del template header, vi abbiamo inserito gli elementi più importanti, l’abbiamo personalizzato graficamente e infine ottimizzato per i diversi dispositivi mobili.

Adesso vedremo come pubblicare il template!

ELEMENTI DECENTRATI NELLO SPAZIO Se per caso sei partito da uno dei modelli della libreria di Elementor e noti che un elemento risulta decentrato nello spazio, assicurati che non siano impostati margini e rientri sull'elemento, sulla colonna oppure sulla sezione che lo contiene. Per verificarlo, seleziona l'elemento e vai su AVANZATO e assicurati che i valori interessati siano vuoti oppure impostati a 0. Se questo non dovesse risolvere, effettua lo stesso controllo sulla colonna e poi sull'intera sezione. Se il problema si verifica in modalità mobile, controlla i valori nella modalità tablet e desktop. RICORDA: le impostazioni responsive funzionano in modo ereditario. Se imposti ad esempio 20px di margine in modalità desktop, tale margine sarà visualizzato anche su tablet e mobile, a meno che per questi ultimi non siano specificati valori diversi.