Nel precedente articolo, abbiamo iniziato a impostare il footer del sito web, creando la struttura con sezioni e colonne; poi abbiamo inserito alcuni componenti al suo interno. Ora non ci resta che metterlo a punto, rendendolo più ordinato e gradevole, utilizzando il plugin Elementor.
Tabella dei Contenuti
Stile colonne footer
Colore, margini, allineamenti
Dall’interfaccia Elementor:
- Seleziona le due colonne principali per visualizzare il pannello MODIFICA COLONNA. Su LAYOUT, alla voce ALLINEAMENTO VERTICALE, imposta il valore su CENTRALE. Effettua la stessa operazione per le colonne della sezione interna.
- Cambia poi il valore di Larghezza colonna, impostando 60 (%) per la prima e 40 (%) per la seconda.
- Seleziona la colonna di sinsitra della sezione principale, vai su AVANZATO e assegna un po’ di rientro a tutti i lati, ad esempio 10 (%). Spostati ora su STILE e seleziona il colore di sfondo che desideri per la colonna.
- Effettua le stesse operazioni per la colonna di destra.
Se preferisci un footer di un solo colore, assegna il colore di sfondo direttamente a tutta la sezione e non alle colonne.
Ecco il risultato, dopo queste prime modifiche:
Stile contenuti footer
Logo e testi (colonna sinistra)
Dall’interfaccia Elementor:
- Seleziona l’elemento EDITOR DI TESTO, spostati su STILE e clicca sul tasto per modificare la tipografia (icona matita). Ora imposta la dimensione a 12 o 13 px.
- Effettua la stessa operazione anche per la sezione con i link alla Privacy.
- Seleziona la colonna del logo, clicca su STILE per aprire le opzioni relative a BORDO. Imposta un’ombra riquadro.
- Apri il pannello SFONDO e imposta un colore un po’ più chiaro rispetto alla colonna della sezione principale.
Iscrizione alla newsletter (colonna destra)
Dal page builder di Elementor:
- Nella colonna destra della sezione principale, seleziona l’elemento Lista icone e vai su STILE per assegnare un ALLINEAMENTO CENTRATO all’oggetto.
- Sempre su STILE, cambia il colore sia del testo che dell’icona e personalizza dimensioni e stili tipografici.
- Clicca sull’elemento MODULO e vai su STILE. Sotto la voce MODULO, inserisci il valore 0 per Distanza colonne e Distanza righe.
- Sotto la voce CAMPO, personalizza colori, bordi e tipografia del campo email.
- Sotto la voce PULSANTE, personalizza icona, colori, bordi e tipografia del pulsante per inviare il modulo (puoi anche creare un pulsante con solo l’icona, andando su CONTENUTO > PULSANTE INVIA e cancellando il testo “Invia”).
- Clicca sull’elemento ICONE SOCIAL e vai su STILE. Personalizza colore, dimensione, spaziatura e bordo delle icone.
- Vai su AVANZATO e imposta del rientro superiore all’elemento.
Personalizzare footer: risultato finale
Siamo giunti alla fine di questo tutorial su come personalizzare il footer del sito. Il risultato finale dovrebbe essere simile a questo:
Essendo ancora agli inizi, il footer realizzato è (volutamente) basilare… ma pur sempre pulito e ordinato.
Inoltre, con Elementor è stato semplice e veloce. Grazie a questo plugin puoi dare spazio alla creatività e creare, allo stesso modo, altri mille footer diversi. Le possibilità sono infinite!
Prima di poter ritenere il footer davvero completo, però, manca ancora un aspetto da considerare.
Scoprilo nel prossimo articolo.
