Creare un footer con Elementor Pro
Il footer e una sezione strategica spesso sottovalutata: contiene contatti, link utili, social e dati legali. Con Elementor Pro puoi progettarlo a piacere e applicarlo all'intero sito tramite Theme Builder. Vediamo come farlo bene, con colonne ordinate e widget dinamici.
Cosa inserire in un footer efficace
Un footer professionale include almeno: contatti aziendali (indirizzo, telefono, email), link rapidi alle pagine principali, icone social, partita IVA e link a privacy policy e cookie policy. Aggiungere anche una mini-newsletter o un form di contatto rapido aumenta le conversioni. Evita footer eccessivamente lunghi: tre o quattro colonne sono sufficienti.
Widget consigliati
I widget più utili nel footer sono: Heading per i titoli di colonna, Icon List per i contatti con icone, Nav Menu per i link rapidi, Social Icons per i social, Form per la newsletter e HTML per dati legali o badge di certificazione. Sfrutta i widget dinamici per inserire l'anno corrente nel copyright tramite shortcode.
Sticky footer e cookie banner
Se utilizzi un cookie banner verifica che non copra contenuti del footer. Per il footer fisso (sempre visibile in basso) e meglio non usarlo su mobile: occupa spazio utile. Preferisci invece un footer normale e un'eventuale pulsante WhatsApp flottante.
Approfondimento tecnico
Quando si lavora con Elementor su progetti reali e fondamentale conoscere alcune sfumature spesso trascurate nei tutorial introduttivi. La prima riguarda la gestione della cache: ogni modifica significativa alla pagina richiede un refresh sia della cache server sia di quella browser; in ambienti con LiteSpeed, WP Rocket o Cloudflare APO occorre invalidare manualmente la URL modificata. La seconda sfumatura riguarda il conflitto con i Custom Post Type: i CPT registrati da plugin terzi non sempre supportano nativamente Elementor; per abilitarli vai su Elementor > Settings > General > Post Types e seleziona quelli che vuoi rendere editabili dal builder. Terza sfumatura: la gestione delle revisioni. Elementor sfrutta il sistema di revisioni nativo WordPress, quindi limita il numero di revisioni con la costante WP_POST_REVISIONS a 10 per evitare bloat del database, soprattutto su siti con tante pagine.
Consigli pratici per il workflow agency
Nel quotidiano di un'agenzia che gestisce decine di siti Elementor emergono alcune best practice trasversali. La prima e la standardizzazione: usa sempre lo stesso tema base (Hello Elementor o Astra), gli stessi widget plugin (es. Essential Addons o Happy Addons), e gli stessi plugin di caching su tutti i progetti. Così il team riconosce immediatamente l'ambiente e accelera il debug. La seconda e la creazione di una libreria interna di template: ogni volta che progetti una sezione efficace (hero, pricing, contatti) salvala come template globale. Avrai una libreria proprietaria che velocizza nuovi progetti. La terza riguarda la documentazione cliente: prepara un mini-manuale PDF di 4-5 pagine che spiega al cliente come modificare testi e immagini in autonomia, evitando ticket di supporto banali.
Considerazioni SEO e Core Web Vitals
Elementor e stato spesso accusato di generare codice pesante, ma negli ultimi due anni il team ha investito molto in performance. Gli Esperimenti attivati di default in versione 3.20+ riducono il CSS inutilizzato del 40-60%. Tuttavia per ottenere punteggi PageSpeed superiori a 90 occorre lavorare anche sul lato server (PHP 8.2+, OPcache attivo, Redis object cache se disponibile), sul lato immagini (WebP, lazy load, dimensioni corrette) e sul lato font (preload, subsetting, max 2 famiglie). Per i Core Web Vitals presta attenzione a tre metriche: LCP (mantienilo sotto 2,5 secondi: l'immagine hero deve essere ottimizzata e in eager loading), CLS (zero shift: imposta dimensioni esplicite a tutte le immagini e prenota spazio per banner dinamici), INP (interaction to next paint sotto 200ms: riduci JavaScript bloccante e widget pesanti above-the-fold).
Procedura passo-passo
- Vai su Templates > Theme Builder > Footer.
- Clicca Aggiungi nuovo e assegna un nome (es. Footer Globale).
- Crea una sezione con quattro colonne uguali.
- Nella prima colonna inserisci il logo e un breve testo descrittivo dell'azienda.
- Nella seconda aggiungi un Nav Menu con i link rapidi (Chi siamo, Servizi, Contatti).
- Nella terza inserisci Icon List con indirizzo, telefono ed email.
- Nella quarta aggiungi Social Icons e un widget Form per la newsletter.
- Sotto le colonne crea una sezione interna con copyright dinamico tipo © [year] La tua azienda.
- Imposta colori di sfondo e bordo superiore della sezione per separare visivamente il footer.
- Pubblica con condizione Intero sito.
Errori comuni e come risolverli
- Footer duplicato: il tema ne mostra uno proprio. Disattivalo dal Customizer o nascondi via CSS con
.site-footer{display:none}. - Colonne non allineate: imposta la stessa altezza colonna nelle opzioni della sezione (Layout > Stretch).
- Form newsletter non invia: verifica le impostazioni Action After Submit e l'integrazione SMTP, altrimenti il messaggio non parte.
- Mobile: troppe colonne: imposta nelle opzioni colonna Width 100% per Mobile in modo che si impilino verticalmente.
Domande frequenti
D: Posso avere footer diversi per categoria?
R: Si, crea più template Footer e imposta condizioni di visualizzazione per ciascuno.
D: Come aggiungo l'anno corrente automatico?
R: Usa lo shortcode con plugin tipo Shortcoder o un piccolo snippet PHP che restituisca date('Y').
D: Come ottimizzare il footer per SEO?
R: Includi link interni alle pagine importanti, evita link tossici e mantieni una struttura semantica con heading appropriati.
Hai bisogno di aiuto?
Se vuoi un sito Elementor performante realizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.