In questo articolo vedremo come ottimizzare il footer per i dispositivi mobili. Il procedimento è molto simile all’ottimizzazione dell’header, vista precedentemente.
Grazie al plugin Elementor, ottimizzare il footer sarà un gioco da ragazzi, vediamo come fare.
Di cosa parliamo qui?
Ottimizzare footer per mobile
Come puoi notare, il nostro template non richiede grandi interventi di ottimizzazione, ma solo una piccola messa a punto.
La prima cosa che balza all’occhio riguarda l’ordine delle colonne.
Generalmente, la colonna che contiene logo, copyright, indirizzo ecc., si posiziona in fondo a tutto. Vediamo come porvi rimedio.
Invertire colonne Elementor
Spesso capita che l’ordine delle colonne desiderato non coincida tra versioni desktop e mobile. Questo perché, di norma, le colonne sono affiancate su desktop mentre su mobile si susseguono una sotto l’altra.
Quindi, nel nostro caso, su desktop la colonna del logo era la colonna di sinistra e quella del modulo la colonna di destra. Su mobile, la colonna del logo diventa quella superiore, mentre quella del modulo risulta la colonna inferiore.
Una funzione molto utile di Elementor consiste nella possibilità di cambiare l’ordine delle colonne su mobile e/o tablet, con un semplice clic.
Per invertire le colonne, seleziona la sezione principale e vai su AVANZATO. Apri la tendina RESPONSIVE e abilita Inverti colonne (mobile).
Ottimizzare footer per tablet
Diamo ora uno sguardo a come appare il footer su un dispositivo tablet (attivando la Modalità Responsive > Tablet).
Anche qui, la visualizzazione generale sembra essere più che accettabile. L’unica modifica che potremmo apportare è quella di allargare un po’ la colonna di sinistra e stringere quella di destra, così da evitare che il link della Cookie Policy risulti spezzato.
Larghezza colonne Elementor
Oltre all’ordine delle colonne, potrebbe essere necessario intervenire sulla loro ampiezza.
Possiamo infatti stabilire una specifica ampiezza per ciascun tipo di dispositivo (desktop, tablet, mobile).
Per gestire la larghezza delle colonne, seleziona la colonna da modificare e inserisci il valore che desideri alla voce Larghezza colonna (%).
Nel nostro caso, imposteremo 65 (%) per la colonna di sinistra e 35 (%) per quella di destra.
Pubblicare template footer
Il procedimento per pubblicare il template footer è esattamente lo stesso di quello visto per l’header.
PER PUBBLICARE IL TEMPLATE:
Clicca il pulsante verde PUBBLICA, in basso nell’interfaccia di Elementor.
Apparirà una finestra per impostare le condizioni di visualizzazione del template.
Il footer deve essere visibile in tutto il sito, quindi lascia la condizione INCLUDERE > TUTTO IL SITO.
Clicca infine il pulsante SALVA E CHIUDI.
