Il footer di un sito web, noto anche come "piè di pagina", è una sezione posta nella parte inferiore di ogni pagina Web che si rispetti e svolge un ruolo cruciale nell'esperienza complessiva dell'utente. È l'ultimo punto di contatto con i visitatori e offre un'opportunità preziosa per fornire informazioni rilevanti, facilitare la navigazione e rafforzare l'identità del brand. Esso permette una navigazione fluida e intuitiva ed è l'ultima sezione visibile su ogni pagina.
Attivazione tema ed installazione di Elementor in WordPress
Da chi sviluppa siti web, il footer viene visto come la firma di un sito che fornisce una serie di elementi che aiutano gli utenti a trovare ciò che cercano. Nonostante la sua posizione apparentemente marginale, esso gioca un ruolo essenziale nell'ottimizzazione dell'usabilità.
Il footer può essere personalizzato per rispecchiare l'identità del marchio e adattarsi alle esigenze specifiche del sito web e del suo pubblico di riferimento. Quindi è importante dedicare tempo e attenzione alla progettazione e all'ottimizzazione di questa sezione chiave. Per fare ciò inizieremo con la scelta di "Astra", un tema molto utilizzato per via della sua adattabilità. Una volta installato ed attivato "Astra" da "Aspetto > Temi" dalla bacheca di WordPress, procediamo con l'installazione di Elementor, cioè l'editor che utilizzeremo per la creazione del template.
Utilizzeremo poi l'estensione "Custom Headers & Footers" con cui creare la sezione "Footer" in modo totalmente personalizzato. La procedura per l'installazione del plugin è analoga a quella eseguita per Elementor. Una volta effettuata l'attivazione del plugin troveremo l'apposita voce all'interno del menu "Aspetto" -> Elementor Header & Footer Builder". Cliccandoci si aprirà la schermata principale del plugin.
Template del footer
Ora è possibile creare dei nuovi template da utilizzare come componenti del sito web. Nel nostro caso procediamo con la creazione di un footer personalizzato cliccando su "Add new", voce posta nella parte superiore della schermata.
Da qui è possibile assegnare un titolo al nuovo template e, dopo aver selezionato la tipologia (ovvero "Footer"), sarà possibile scegliere anche le condizioni di visualizzazioni all'interno del sito. Per comodità è consigliato impostare la visibilità su "All", in questo modo il footer sarà visibile all'interno di tutte le pagine Infine, clicchiamo su "Modifica con Elementor" per aprire l'editor precedentemente installato ed iniziare la personalizzazione vera e propria del template.
Creazione e personalizzazione footer con Elementor
Prima di iniziare la creazione del footer è importante organizzare la struttura che si vuole seguire. Partendo dagli elementi che vanno inseriti e dal modo in cui visualizzarli.
I componenti principali di un footer ben progettato includono:
- le informazioni di contatto (indirizzo email, numero di telefono,ecc);
- i link utili (a pagine importanti come l'Informativa sulla privacy, termini di servizio..);
- la navigazione secondaria (una versione ridotta del menu di navigazione principale);
- widget e collegamenti social (feed di Twitter, Instagram o un modulo di iscrizione alla newsletter);
- copyright e crediti.
La prima cosa da fare è creare il contenitore principale in cui inserire tutti gli elementi. Successivamente è consigliato creare altri 4 (o più) contenitori in cui inserire le voci secondarie.
La struttura sarà quindi simile a quella riportata di seguito:
Intestazione del footer
I 4 contenitori verranno utilizzati per inserire: nome brand e social, menù di navigazione, link utili e copyright. Procediamo quindi con l'inserimento di un elemento "Intestazione", all'interno del primo contenitore di sinistra, che useremo per riportare il nome del brand, e successivamente un'immagine che rappresenterà il logo.
Menu
Il secondo contenitore, invece, servirà a riportare un menu di navigazione che aiuterà gli utenti a muoversi nel sito. Per poter inserire un menu di navigazione, quest'ultimo deve essere prima creato con le varie pagine del sito. Per fare ciò è sufficiente selezionare la voce "Aspetto" dalla bacheca di WordPress e successivamente "Menu".
A questo punto si aprirà una schermata in cui poter creare un nuovo menu, assegnandogli un nome e aggiungendo le pagine che vogliamo che esso contenga. Inoltre, sarà possibile scegliere la posizione del menù ed eventuali sottomenu che possono mostrare delle pagine al passaggio del mouse.
Una volta creato il menu lo si può inserire nell'apposito contenitore tramite l'elemento "Navigation menu" offerto da "Custom header & footer". È possibile configurare l'aspetto e il funzionamento dell'elemento menu grazie alle apposite voci su stile e contenuto: ad esempio la posizione o il comportamento del sub-menu.
Link nel footer
Una voce analoga al menu di navigazione è quella dei cosiddetti "link utili", ovvero dei reindirizzamenti a sezioni del sito che possono aiutare l'utente a raggiungere parti importanti per la navigazione. L'inserimento di questa voce è analoga a quanto appena visto per il menu di navigazione. Infatti, è possibile creare un ulteriore menu di navigazione dedicato ai link che si vogliono mettere in evidenza e poi inserirlo all'interno del terzo contenitore.
Il menu di navigazione e il menù dei link utili sono personalizzabili grazie alle numerosi voci che si trovano sull'apposito menu a sinistra della schermata. Da qui si può scegliere il margine da assegnare ad ogni voce e la grandezza del font, così come altre opzioni che possono essere personalizzate.
Widget
Infine, l'ultima sezione può essere utilizzata per l'inserimento di vari widget a seconda del tipo di sito che si intende creare. Nell'esempio che riportiamo di seguito abbiamo scelto di inserire le informazioni sul copyright e le icone dei social.
Le icone social possono essere personalizzate sia dal punto di vista stilistico (i colori, la grandezza delle icone, le etichette e il posizionamento) e sia per i collegamenti ai rispettivi profili social.
Una volta completate le modifiche al template del footer procediamo con il salvataggio del lavoro effettuato cliccando sulla voce "Aggiorna" nella parte sinistra della schermata. Il template sarà quindi salvato ed inserito all'interno delle pagine del sito secondo i criteri scelti.
Nell'immagine precedente viene riportato il risultato finale del template appena creato. Gli elementi da inserire possono variare a seconda delle esigenze specifiche del sito web e del suo pubblico di riferimento.
Utilizzando WordPress ed Elementor è possibile personalizzare facilmente il footer per riflettere l'identità del marchio e fornire una UX ottimale. Grazie a questa guida ora sei in grado di creare un footer personalizzato utilizzando queste potenti piattaforme di gestione dei contenuti e di progettazione visiva.
