Il Footer è una delle parti più sottovalutate nei siti web.

Innanzitutto che cos'è il ter.

Il Footer è il classico P e di pagine ed è una sezione che è presente in fondo a tutte le pagine del tuo sito web.

Cosa dovrebbe racchiudere un footer? Principalmente le sezioni più importanti o anche secondarie del tuo sito web variano in base al tuo obiettivo, ma nella maggior parte dei casi racchiudono logo col tuo action I con le icone ai social media.

Iscrizione alla newsletter Informazioni legate alla privacy, ai cookie, al copyright Il menù di alcune categorie del blog Il menù di alcune categorie di prodotti Nel caso avete un e-commerce, quindi chiaramente dovete inserire in base al vostro obiettivo di business.

Per fare un esempio più concreto, chiaramente noi ricordiamoci che siamo dei freelance nel settore social media marketing, quindi il nostro obiettivo è quello di presentare i nostri servizi, presentare chi siamo i nostri servizi, che cosa siamo in grado di fare attraverso dei stadi all'interno del portfoglio e poi quindi alla fine fare in modo che l'utente ci contatti per richiedere un preventivo, quindi di base leader.

Va molto bene in questo modo dove noi abbiamo inserito le informazioni essenziali chi sono? Servizi portfoglio o contatti, quindi l'utente già solamente attraverso questo menù è in grado di compiere l'azione, quindi um la conversione per il quale stiamo sviluppando il sito web, mentre il footer non ho riportato le voci di menù perché voglio comunicare i link ai social media, la newsletter e un'altra.

Ovviamente io avrei potuto anche inserire le icone social media come vedo in molti siti web, anche nella parte alta, quindi anche nel leader.

Però il mio obiettivo non è quello di portare i miei visitatori di siti web in una piattaforma esterna, quindi farli uscire dal sito.

Il mio obiettivo è farli rimanere nel mio sito web il più tempo possibile ed infine fargli compiere un'azione e ottenere la conversione.

Quindi il contatto e poi la richiesta di preventivo è per questo motivo che ho inserito nella parte bassa la il link dei social l'iscrizione alla newsletter è un'alta quindi ripeto, questo chiaramente dipende sempre in base in base al vostro obiettivo.

Però in linea generale sono questi gli elementi che possiamo inserire nel all'interno di elemento come si crea un footer allora dobbiamo andare sempre alla solita voce team builder e andare ad aggiungere un nuovo temete chiamato pie di pagina, quindi pie di pagina, ovvero footer, clicchiamo sull'icona del più e apriamo una nuova scheda bianca.

Come al solito elemento carica dei set di temete non ci interessano perché noi partiamo da un foglio bianco completamente da zero e andiamo a realizzare il nostro footer.

Allora il nostro footer torniamo nel nostro wireframe.

Come vedete è costituito da una sezione orizzontale a piena larghezza e poi tre contenitori all'interno col tuo action social media newsletter.

Queste sono le che poi andremo ad inserire all'interno.

Torniamo quindi nel nostro temete e aggiungiamo il primo blocco intero, ovvero questo qua al cui interno dove andrò a inserire il logo del sito.

Quindi lo trascino.

Gli allineamenti vanno bene, mi assicuro che sia centrato.

Okay.

Per quanto riguarda lo stile, vado un po' a modificare la dimensione.

Probabilmente potremmo farlo due.

Okay, ci può stare e poi sotto vado a inserire un'altra, un altro contenitore con tre elementi all'interno, quindi vado sul tasto più partiamo da questo, poi eventualmente lavoriamo sulle percentuali e andiamo a inserire i.

Nel primo caso ho inserito una, quindi andrò ad inserire una un di eh intestazione più un editor di testo e ovviamente un pulsante dove l'utente può cliccare Okay, andiamo a presentare un po' il contenuto richiedi un preventivo su misura um qui poi andrò a e a personalizzare ovviamente un contenuto ad hoc.

Quello che mi mi limiterò a fare in questa fase è andare a formattare il correttamente, quindi dargli i giusti, i giusti spazi, le giuste formata il giusto Sile, ad esempio.

In questo caso il um la dimensione del font.

In questo caso lo farei più piccolo.

Quindi vado a modificare con la matita sul reddito del testo stile tipografia i default a diciotto potremmo provare con sedici o magari anche quindici.

Okay, proviamo con sedici.

Intanto poi, per quanto riguarda il pulsante, andiamo a personalizzare il testo in via tua richiesta.

Okay, ovviamente qui poi potrete andare a inserire il link.

Io in questo caso lo reindirizzerà all'utente alla pagina contatti, poi andiamo al social media in questa parte centrale, quindi andiamo nel e cerchiamo il J chiamato appunto icone social lo trasciniamo centralmente.

Questo è un molto potente, con una personalizzazione molto avanzata.

Come vedete, potete scegliere le icone social da mostrare adesso lascerò questo esempio di default, magari andiamo ad aggiungere no, togliamo semplicemente questo e andiamo a inserire Instagram.

Come vedete potete cambiare poi l'icona comodamente e ovviamente anche il link della vostra pagina web.

Potete cambiare l'ordine, quindi spostare un elemento prima piuttosto che altro e potete decidere la forma se utilizzare un quadrato se utilizzare un cerchio.

In questo caso io utilizzerò una forma arrotondata perché richiamo un po'.

Lo stile dei dei pulsanti che ho già creato con il bordo leggermente arrotondato per quanto riguarda le colonne può decidere le colonne in cui vengono mostrate, ma automatica va bene perché li mostra in online.

L'allineamento centrale va più che bene.

Passiamo alla tav dello stile e qui possiamo decidere se assegnare i colori ufficiali in base al ad elemento.

In questo caso segna in base al colore del colore del canale social media oppure dei colori personalizzati.

Ovviamente nel nostro caso andrò ad inserire dei colori custom che siano inerenti al nostro brand, quindi proviamo a farle blu.

Okay, diciamo che ci può stare oppure eventualmente potremmo farle azzurro chiaro con il colore secondario blu, così sicuramente un po' più leggero come tonalità.

Qui sopra andrò ad inserire un titolo, ovviamente per dare anche un senso di, um spazzatura uniforme.

Quindi vado ad inserire anche qui Un'intestazione al di sopra.

Chiamiamo il titolo social media.

Lo andiamo a centrare.

Okay.

E poi successivamente possiamo andare ad inserire il box di iscrizione alla newsletter.

Anche qui farò la stessa cosa per comodità duplici l'elemento e poi lo sposto di qua.

E il titolo che amerò.

Newsletter.

Okay, A questo punto, come vedete le colonne interne? Quindi questi contenitori vanno un po' ridimensionati, come abbiamo fatto per leader.

Andiamo a selezionare il contenitore e andiamo a modificare un po', quella che è la percentuale.

Potremmo provare.

Magari siccome questa è una sezione, potremmo provare con trenta.

Sto qua a portarlo a trentacinque.

E anche questo a trentacinque.

Okay.

Poi anche qui andrete voi a bilanciare nel migliore dei modi le vostre colonne.

Però avete visto tramite questo semplice controllo larghezza in percentuale.

Potete assegnare, eh? Delle misure e delle dimensioni personalizzate.

Okay, Anche qui possiamo allineare come per leader tutto il contenuto centralmente selezionando um L'intera Colonna giustifica il contenuto centralmente e lo possiamo fare per tutte le sezioni.

Poi vediamo se Okay, però forse no.

Questa parte qua non la farei.

Lo farei, ma un utilizzerei un allineamento um top, quindi in alto dalla colonna.

Quindi vogliamo questo elemento fosse più bilanciato in questo modo poi chiaramente varia anche in base al contenuto che andrete ad inserire.

Per quanto riguarda la newsletter, io inserirò il modulo di un semplice di elemento chiamato modulo di contatto.

Poi in una lezione dedicata, vediamo appunto come si crea un modulo di contatto e collegarlo all'iscrizione della newsletter velocemente andrò ad eliminare messaggio.

Vado a eliminare l'etichetta e magari vado anche un po' a ridimensionare le sezioni distanza le colonne, la spazzatura Okay, modulo pulsante lo lascerei sicuramente blu così dai più o meno ci siamo.

Okay, a questo punto cosa possiamo fare? Eventualmente possiamo assegnare se volete un colore di sfondo all'intera sezione in questo caso io la lascerò o bianca o mio azzurro chiaro che ho utilizzato.

Probabilmente la lascerò bianca in questo test, eh? Però se volete potete selezionare l'intera sezione stile come al solito classico e andare ad inserire un colore sia per questa che eventualmente per questa sezione.

Come vedete però in questo caso io lascerò una in base al mio mood bog grafico lo lascerò di eh di default di colore bianco e poi vedremo un po' in fronte chiaramente anche come si comporta.

In ogni caso, una volta che avete modificato il vostro footer, cliccate su pubblica elemento vi chiederà dove volete visualizzare e mostrare il temete.

Aggiungete una condizione Tutto il sito verrà mostrato in automatico su tutte le pagine del vostro sito web.

Anche qui, come per leader, potete decidere se mostrarlo in alcune pagine piuttosto che in altre.

Salva e chiudi, Pubblichiamo e andiamo a vedere in che cosa succede.

Ed eccolo qua Footer inserito correttamente l'unica cosa che adesso chiaramente qui non abbiamo una visione d'insieme globale perché la pagina che sono è vuota.

Non abbiamo inserito ancora del contenuto, però l'unica cosa che farei probabilmente è quella di inserire magari un bordo leggero un'ombra qui in alto per differenziare un po' e staccare le due sezioni.

Torniamo nel nostro editing di clicchiamo l'intera sezione e se vogliamo possiamo inserire un bordo all'intera sezione tipo di bordo troviamo solido.

Come vedete in automatico viene assegnato un bordo a tutta la sezione, ma se volete potete anche modificarlo e mantenerlo solo al di sopra dell'intera colonna.

Cliccate su questo elemento sopra uno.

Magari proviamo con due pixel giusto per farvi vedere in l'esempio.

Vado a fare il refresh.

Eccolo qua.

Come vedete è stato sviluppato.

Forse è un po' troppo marcato.

Sicuramente andrò poi a lavorare sul colore.

Possiamo assegnarlo un grigio chiaro ed eventualmente anche un'ombra.

Se volete un'ombra all'inter sezione pro mi sembra un po' troppo un po' troppo.

Proviamo così una giornata.

Ho inserito un bordeaux da due pixel a un pixel di colore grigio chiaro ed eccolo qua.

Sì, sicuramente molto meglio una linea tratteggiata leggera che rispecchia un po' il mio mood board grafico che separa il dal contenuto centrale della pagina.

Poi dopo eventualmente se ci sono delle modifiche da fare potete modificare gli spazi e quant'altro l'unica co- l'ultima cosa che voglio fare è sicuramente dare un po' di respiro a questa colonna da questo contenitore a tutta la parte sottostante.

Vado a selezionare il contenitore avanzato va ad aumentare un po' i margini anzi facciamo con il rientro sotto vado a inserire sopra venti pixel sotto venti pixel.

Proviamo anche con trenta okay e anche questa sezione un po' dando un po' di respiro alla sezione abbiamo visto in una lezione dedicata di indicazione di web design che gli spazi bianchi sono molto importanti, quindi non dobbiamo aver paura di di di utilizzarli.

Chiaramente non osare, ma non dobbiamo chiaramente essere intimoriti da i troppi spazi bianchi.

Okay, quindi seleziono la l'intera colonna, andiamo su avanzato rientro, proviamo sopra con trenta sotto con trenta aggiorna, quindi sicuramente ora probabilmente acquisirà uno stile diverso.

Vediamo un po'.

Sì, direi sicuramente molto, molto meglio.

Um, se vogliamo possiamo aggiungere anche un'altra sezione nella maggior parte dei siti web lo troverete e in questo esempio ve lo mostrerò velocemente e possiamo inserire una un, quindi una linea, una una sezione di colore scura.

In questo caso dove andremo poi a collegare i classici link come il copyright? I credits um le informative sulla privacy, il cook, le preferenze, insomma, informazioni di questo tipo.

Per farlo non dovete fare altro che cliccare su più aggiungere magari due contenitori di questo tipo gli andate ad assegnare un colore diverso se volete dargli un tono diverso in questo caso magari facciamolo nero e poi andate ad inserire i i testi, gli elementi, in questo caso magari del semplice blocco di testo qui e anche di qua, ovviamente io lo colore di colore bianco proviamo con dodici pixel queste sono informazioni chiaramente poco importanti e secondarie, ma devono essere presenti ad esempio via Milano e andrò ad inserire l'indirizzo e come ad esempio partita iva, eccetera eccetera dell'azienda e poi dall'altra parte, anzi, facciamo così questo lo eliminiamo, così per essere più rapidi vi faccio vedere anche la rapidità di esecuzione di elemento e di qua andiamo ad inserire ad esempio privacy, cookie, eccetera eccetera.

Come al solito, essendo un editor di testo, potete allineare il contenuto, quindi centralmente oppure a destra in base alle vostre preferenze.

Ora vado ad aggiornare.

Era giusto per farvi vedere che anche questa parte sicuramente è da considerare molto importante, perché, um deve essere collegata la parte relativa alla alla privacy e ai cookie, o comunque anche per inserire altri tipi di informazioni.

Vado ad aggiornare la pagina okay, ci siamo.

Se vi sembra troppo alta questa sezione, ovviamente potete andare a cliccare sull'intera sezione avanzato e andate a portare tutti i margini sia di um margine e padding.

Quindi rientro a zero sia per l'intera um l'intero contenitore, ma anche per le colonne interne potete fare la stessa cosa.

Provate in questo modo così e poi così e poi eventualmente andate quindi portate tutto a zero per l'intera sezione e le colonne che stanno all'interno.

Poi cliccate nell'intera sezione e andate eventualmente ad aggiungere un po' di pudding sopra.

Come in questo caso, magari proviamo con dieci sopra e che va già bene così.

Proviamo dodici sopra aggiorna probabilmente con l'obiettivo di compattare un po' questa sezione ed eccolo qua D J molto, molto bene perfetto in questa lezione, quindi abbiamo visto come creare un footer di come di quelle che devono essere le sezioni da prevedere all'interno di questa parte.

Anche in questo caso, come per leader, potete decidere di avere un i un footer diverso per la versione tablet e mobile.

Quindi in base al vostro obiettivo o preferenze, andate a personalizzare e a creare dei custom anche per questi dispositivi.