I tassi di conversione sono influenzati da molti fattori, tra cui l’usabilità e il design visivo. Di grande importanza è anche il footer del sito (footer o “footer”), nonostante si trovi in ​​fondo alla pagina e sia quasi sempre invisibile nella prima schermata.

Quando crei un negozio online, devi prestargli non meno attenzione di altri elementi e renderlo il più significativo possibile.

Arredamento

Il piè di pagina dovrebbe essere progettato nello stesso stile dell'intero sito web del negozio online. Inoltre, anche se l'intero negozio online è progettato in uno stile minimalista, puoi aggiungere bellissime immagini o animazioni al footer, perché non distrarranno l'attenzione. Puoi progettarlo in modo originale per evocare emozioni positive tra i visitatori.

Navigazione del sito

È possibile inserire una navigazione alternativa del sito nel piè di pagina. Ciò è particolarmente utile su siti con pagine lunghe. Il visitatore scorrerà fino alla fine e, senza tornare indietro, potrà accedere alle sezioni necessarie del catalogo. Puoi renderlo più dettagliato rispetto all'intestazione di un negozio online, lì c'è abbastanza spazio;

Collegamenti alle pagine

Il footer è ottimo per pubblicare informazioni utili ma non troppo significative. Ad esempio, se il menu in alto contiene collegamenti al catalogo o alle categorie di un negozio online, puoi aggiungere collegamenti a un blog o articoli utili nel piè di pagina.

Informazioni sui contatti

Molto spesso, nel piè di pagina vengono aggiunti informazioni di contatto, collegamenti a pagine sui social network e talvolta anche una mappa che indica la posizione del negozio online (o del punto di ritiro). Tali informazioni aumentano la fiducia dei visitatori.

Puoi anche aggiungere informazioni volte ad aiutare l'acquirente nel footer del sito. Se scorre fino in fondo alla pagina e non trova quello che stava cercando, molto probabilmente chiuderà la pagina. In questo caso, puoi aggiungere un pulsante “Ricerca nel sito” o “Richiedi una chiamata” nel piè di pagina.

Non dovresti aggiungere informazioni non necessarie al piè di pagina del sito: ad esempio, è meglio lasciare i dettagli dell'azienda (TIN, OGRN, ecc.) nelle pagine "Informazioni sull'azienda" o "Contatti".

Ciao cari amici e ospiti del blog! Oggi parleremo della creazione di un sito web, o meglio, di uno dei suoi componenti: Site Footer, scientificamente Footer HTML o semplicemente footer. Nonostante questa sia la parte meno visibile del sito e poche persone vi prestino attenzione, a prima vista sembra così e molte persone la pensano così. E per questo motivo molti spesso trascurano il design del footer del sito, che è fondamentalmente sbagliato e scorretto!

Poiché il piè di pagina di un sito ne è una parte importante quanto l'intestazione e il corpo o, più correttamente, l'intestazione e il corpo. Quindi oggi passiamo a progettare i piè di pagina del nostro sito come si addice a un buon costruttore di siti e cercherò di aiutarti in questo!

Quindi, cominciamo dall'inizio...

Cos'è il footer di un sito web o Footer HTML?

Il footer di un sito è la sua parte più bassa, dove solitamente il webmaster inserisce i link per andare alla pagina principale, può esserci anche un menu dell'intero sito, navigazione della pagina, informazioni sull'autore, sul progetto, sul sito, contatti informazioni, passaggi alle pagine per le domande più frequenti, collegamenti ai social network e ai loro pulsanti, informatori e contatori e quant'altro viene inserito nel footer del sito. Tutte le informazioni che il webmaster stesso può fornire!

E chi pensa che pochi visitatori arrivino nel seminterrato del sito si sbaglia di grosso!

E sulla base di ciò, è necessario prestare non meno attenzione al footer del sito che alle sue parti, a prima vista, più visibili, come il corpo e l'intestazione del sito. Anche se mi ripeto, penso che non sia vano. Questo è il mio modo di cercare di spiegarti il ​​significato e l’importanza di progettare correttamente il footer del sito!

Come progettare correttamente il footer di un sito web?

Non c'è niente di complicato in questo! Ora ti presenterò diversi tipi di scantinati piuttosto belli e presentabili per i tuoi siti web. E puoi scegliere quello più adatto tra loro, e alla fine di questo articolo ci sarà un collegamento dove potrai scaricare tutti i piè di pagina dei siti web che ho presentato e, ovviamente, usarli quando crei i tuoi nuovi siti web, o sostituisci quelli esistenti quelli con i miei più attraenti footer html.

Questo è il primo footer del sito:

Questo è il secondo footer del sito:

Questo è il terzo piè di pagina del sito:

Questo è il quarto footer del sito:

Questo è il quinto footer del sito:

Questo è il sesto footer del sito:

Bene, come ti piacciono questi footer HTML? Ti è piaciuto almeno uno di loro? Lo spero, sì?!

Se ti sono piaciuti, ti suggerisco di scaricarli subito in modo completamente gratuito e di utilizzarli per i tuoi scopi!

La cartella scaricata contiene sei file con Footer HTML. E tutto quello che devi fare è correggere il contenuto del tuo sito in un editor di testo e il gioco è fatto!

Parliamo di un editor di testo! Io ad esempio utilizzo, e vi consiglio, solo . Perché è il più comodo e sicuro!

Questo è tutto adesso. Grazie per l'attenzione!

Ciao, cari lettori del sito blog. Continuiamo il tema del layout a blocchi, iniziato e proseguito nei tre articoli precedenti. In linea di principio, siamo già riusciti a creare un layout del sito sia a due che a tre colonne e siamo anche riusciti a considerare le sfumature della creazione di un layout fluido.

Inoltre, nei primi articoli sul layout del sito web () sono stati discussi alcuni concetti base del webmaster, senza capirli sarebbe abbastanza difficile comprenderne le sfumature.

Quali problemi abbiamo avuto con il layout del nostro sito web?

Oggi proveremo a risolvere un piccolo problema che potrebbe sorgere con il layout che abbiamo creato in precedenza. Molto spesso, questa situazione si verifica quando la si visualizza su monitor di grandi dimensioni (con alta risoluzione) e quando si visualizza una pagina con una piccola quantità di informazioni.

In questo caso, è possibile che il piè di pagina non venga premuto nella parte inferiore dello schermo, ma si trovi quasi a metà altezza, il che nella maggior parte dei casi sembrerà brutto e non esteticamente gradevole.

Tuttavia, a mio avviso, è necessario premere il piè di pagina fino in fondo al layout del sito, e ciò sarà particolarmente vero nel caso in cui l'altezza della pagina sia inferiore all'altezza dello schermo dell'utente. Ciò può essere rappresentato schematicamente in questo modo:

Quelli. Il comportamento corretto del piè di pagina nel caso di una piccola quantità di informazioni sulla pagina e di una schermata utente di grandi dimensioni sarà il seguente:

Per implementare ciò, dobbiamo eseguire una serie di manipolazioni con il codice del nostro layout. Inoltre, apporteremo modifiche non solo al file di stile CSS Style.css, ma anche a Index.html, che contiene il codice Html e forma i blocchi Div. Ma prima le cose principali.

Ad esempio, utilizzeremo il layout del sito a tre colonne che abbiamo creato in precedenza. In questo caso, Index.html sarà simile a questo:

Intestazione Intestazione Contenuto della pagina Contenuto della pagina Contenuto della pagina Contenuto della pagina Piè di pagina

E le seguenti proprietà CSS sono state scritte nel file Style.css:

Corpo, html ( margine:0px; imbottitura:0px; ) #maket ( larghezza:800px; margine:0 auto; ) #header( colore di sfondo:#C0C000; ) #left( colore di sfondo:#00C0C0; larghezza:200px ; float:sinistra; ) #right( larghezza:200px; colore di sfondo:#FFFF00; float:destra; ) #content( colore di sfondo:#8080FF; margine-sinistra:202px; margine-destra:202px; ) #footer ( colore di sfondo:#FFC0FF; chiaro: entrambi; )

Bene, il layout stesso era più o meno questo:

Come puoi vedere, il footer non è premuto fino in fondo e quindi non soddisfa le nostre esigenze (si trova sempre sotto la colonna più bassa), quindi dovremo apportare modifiche al codice. La stessa cosa può essere fatta per un layout a due colonne, ma anche per un layout in gomma. Il metodo è universale.

Come spostare il footer in fondo al layout del sito

Quindi, dobbiamo spostare il contenitore Div con il piè di pagina nella parte inferiore dello schermo. Per fare ciò, dovrai prima impostare l'altezza dell'intera pagina al cento per cento (occuperà l'intero schermo). Ciò sarà necessario per poter poi modificare la dimensione del blocco principale con il layout al 100%.

L'intero contenuto della pagina del sito è inserito nei tag Body di apertura e chiusura, quindi dobbiamo aggiungere un'altra proprietà CSS per il tag Body in Style.css, impostando l'altezza al 100%:

Corpo, html (margine:0px; imbottitura:0px; altezza: 100%;)

Ciò non influirà in alcun modo sull'aspetto, ma ora il blog principale può essere allungato fino all'intera altezza dello schermo. Quelli. era una specie di fase preparatoria.

Se lo desideri, puoi consultare le proprietà CSS di base. Ora impostiamo il contenitore Div che contiene il nostro intero layout ad un'altezza minima del 100%:

Voglio anche evidenziarlo (div con id="maket"). Per fare ciò, gli darò un frame utilizzando la proprietà Border() corrispondente:

La proprietà border: solid 3px black consente di impostare un bordo solido (solid) di 3 pixel di spessore in nero per questo contenitore. Ciò ti consentirà di vedere chiaramente che il contenitore con il layout si è allungato per tutta l'altezza dello schermo, anche con una piccola quantità di informazioni sulla pagina:

Ora dovremo estrarre il blocco footer dal contenitore generale e posizionarlo sotto, subito dopo quello generale. Cosa darà? E il fatto che, alla fine, il piè di pagina nel layout si degnerà di scendere e non verrà premuto, come prima, contro la sua colonna più lunga. In questo caso, Index.html sarà simile a questo:

Intestazione Intestazione Colonna sinistra Menu Menu Menu Menu Colonna destra Menu Menu Menu Menu Contenuto della pagina Contenuto della pagina Contenuto Piè di pagina

Tieni presente che il blocco con il footer non si trova più all'interno del contenitore generale (maket), e quindi la sua larghezza non è più regolata dalle proprietà CSS specificate per maket nel file Style.css. La larghezza del piè di pagina si estenderà su tutto lo schermo, ma si troverà comunque nella parte inferiore dello schermo, immediatamente sotto il blocco principale:

Ma ancora una volta sorge un problema, perché per vedere il piè di pagina ora è necessario scorrere lo schermo nel browser (vedere la barra di scorrimento nell'immagine sopra).

Questo accade perché il contenitore principale (maket) occupa tutta l'altezza dello schermo (questo è determinato dalla proprietà min-height: 100%), e il footer si trova subito dietro ad esso e per visualizzarlo bisognerà scorrere, cosa che non è molto comodo e funzionale.

Puoi risolvere questo problema impostando un riempimento negativo per il contenitore Div con il piè di pagina in modo che si sposti verso l'alto di una distanza pari alla sua altezza. In questo caso, il contenitore del footer si sovrapporrà a quello principale e si adatterà all'altezza dello schermo del browser (non sarà quindi necessario scorrere per visualizzarlo).

Ma per impostare un offset negativo dalla parte superiore, devi conoscere proprio questa altezza del piè di pagina, ma non lo sappiamo ancora.

Per prima cosa, quindi, imposteremo l'altezza del contenitore contenente il footer impostando la proprietà corrispondente in Style.css:

#footer( colore di sfondo:#FFC0FF; chiaro: entrambi; altezza: 50px; )

E poi impostiamo un margine negativo in alto ad un'altezza pari alla sua altezza:

Ciò consentirà al piè di pagina di sollevarsi esattamente alla sua stessa altezza e quindi di adattarsi allo schermo del browser (ora possiamo rimuovere la proprietà CSS border: solid 3px black dalla regola maket, in modo che lo spessore del bordo non impedisca il nostro intero layout, compreso il piè di pagina, dall'adattamento all'altezza dello schermo):

Come puoi vedere, ora la barra di scorrimento non viene visualizzata nel browser e l'intero layout del nostro sito basato su blocchi a tre colonne si adatta a un'unica schermata (nel caso in cui ci siano poche informazioni sulla pagina) e ha un piè di pagina situato in fondo . Che è esattamente ciò che dovevamo fare.

Inseriamo lo spaziatore e combattiamo Internet Explorer

Ma sorge un problema che apparirà solo quando ci saranno più informazioni sulla pagina di layout e potrebbe verificarsi la seguente situazione:

Si scopre che potrebbe verificarsi una situazione in cui le informazioni in una delle colonne del layout si sovrappongono al piè di pagina, il che non sembrerà gradevole. Ciò accade a causa del famigerato riempimento negativo che abbiamo impostato e che ha contribuito a sollevare il nostro seminterrato rispetto al contenitore del layout principale.

Quelli. Si scopre che nella parte inferiore dello schermo ci sono due blocchi sovrapposti nell'area del seminterrato.

La soluzione a questo problema è aggiungere un nuovo contenitore Div vuoto (il cosiddetto spacer) al contenitore principale del nostro layout (maket), nel luogo in cui precedentemente si trovava il blocco con il footer.

Impostando questo nuovo contenitore ad un'altezza pari all'altezza del footer, possiamo evitare che le informazioni provenienti dal contenitore principale entrino in collisione con il blocco con il footer. Assegniamo un ID () a questo contenitore chiamato Rasporka e di conseguenza l'Index.html del nostro layout a tre colonne sarà simile a:

Intestazione Intestazione Colonna sinistra Menu Menu Menu Menu Colonna destra Menu Menu Menu Menu Contenuto della pagina Contenuto della pagina Contenuto della pagina Pagine Pagine Pagine Pagine Piè di pagina

E in Style.css scriveremo per questo ( , che imposta l'altezza di questo contenitore spaziatore uguale all'altezza del seminterrato:

#rasporka (altezza: 50px;)

Di conseguenza il footer verrà premuto dal basso non all'informazione contenuta nel contenitore principale (ad esempio il testo nella colonna più alta), ma ad un'area pari all'altezza del footer con un contenitore spaziatore che non contiene informazioni .

In questo modo evitiamo sovrapposizioni e distorsioni nel nostro layout a tre colonne. Tutto sarà chiaro e bello (decente e nobile):

Come accennato in precedenza, la larghezza del piè di pagina deve ora essere impostata separatamente, perché... questo contenitore non fa più parte di quello principale. Per fare ciò, devi aggiungere ulteriori proprietà per il piè di pagina al file CSS, permettendoti di impostarne la larghezza e allinearlo orizzontalmente al centro dello schermo.

Ha senso impostare la larghezza uguale alla larghezza dell'intero layout utilizzando la proprietà Larghezza e l'allineamento orizzontale può essere eseguito nello stesso modo in cui abbiamo fatto per l'intero layout su un layout a blocchi.

Pertanto, dovremo aggiungere ulteriori proprietà per l'ID Footer:

#footer( colore di sfondo:#FFC0FF; chiaro: entrambi; altezza: 20px; margine superiore: -20px; larghezza: 800px; margine sinistro: automatico; margine destro: automatico; )

Utilizzando la proprietà width:800px, la larghezza viene impostata su 800 pixel e utilizzando le due proprietà margin-left: auto e margin-right: auto, il rientro a sinistra e a destra del piè di pagina viene impostato automaticamente, come risultato di che questi rientri saranno uguali e il nostro eroe sarà allineato al centro:

Beh, sembra che non ci sia più nulla da migliorare, ma non è stato così. Come sempre, il nostro browser preferito Internet Explorer 6 non capisce qualcosa delle proprietà CSS che utilizziamo. In questo browser (e forse anche in altri vecchi), nonostante tutti i nostri sforzi, il footer non verrà premuto fino in fondo, ma rimarrà comunque attaccato alla colonna più alta del layout del sito.

Tutto questo accade perché ( non comprende la proprietà min-height: 100%, che abbiamo utilizzato per impostare l'altezza minima del blocco principale uguale all'altezza dello schermo.

Per risolvere questo problema dovremo quindi utilizzare un cosiddetto hack che ci permette di spiegare (con le dita) ai browser più vecchi cosa fare. Prima dell'elenco delle proprietà CSS per maket dovrai inserire la seguente combinazione:

* html #maket (altezza: 100%;)

Questa regola verrà applicata solo al browser Internet Explorer 6; gli altri non ne terranno conto e non la implementeranno.

Quindi, l'aspetto finale di Style.css con il piè di pagina premuto nella parte inferiore dello schermo sarà il seguente:

Corpo, html ( margine:0px; imbottitura:0px; altezza: 100%; ) * html #maket ( altezza: 100%; ) #maket ( larghezza:800px; margine:0 auto; altezza minima: 100%; ) # header( colore di sfondo:#C0C000; ) #sinistra( colore di sfondo:#00C0C0; larghezza:200px; float:sinistra; ) #destra( larghezza:200px; colore di sfondo:#FFFF00; float:destra; ) #content ( colore di sfondo:#8080FF; margine sinistro: 202px; margine destro: 202px; ) #footer( colore di sfondo:#FFC0FF; chiaro: entrambi; altezza: 50px; margine superiore: -50px; larghezza: 800px; margine sinistro: automatico; margine destro: automatico; ) #rasporka (altezza: 50px;)

Ebbene, la forma finale di Index.html è stata fornita appena sopra. Questo è tutto, questa serie di articoli dedicati al layout a blocchi di siti web fissi e fluidi a 2 e 3 colonne può essere considerata completa.

Puoi anche guardare il video “Lavorare con il tag div Html”:

Buona fortuna a te! A presto sulle pagine del blog del sito

Potresti essere interessato

Layout a blocchi: creiamo layout a due colonne, tre colonne e fluidi per il sito
Layout DiV: crea blocchi per un layout a due colonne in HTML, determina le loro dimensioni e imposta il posizionamento in CSS

Se stai attualmente lavorando su un nuovo design o addirittura su una riprogettazione della tua landing page, un'area del progetto che non dovrebbe essere ignorata è la sezione footer.

Il desiderio di svilupparne uno quasi perfetto porta spesso a complicare l'intero processo. Lavorare su un design può diventare così emozionante che dimentichi rapidamente alcune parti importanti ma sottoutilizzate della pagina.

Possiamo già sentirvi dire: “Chi se ne frega di qualche footer?! In ogni caso, sono poche le persone che scorrono fino alla fine." Ma non ne saremmo così sicuri.

Naturalmente, la priorità dovrebbe essere data alla sezione dell'intestazione e al design sopra la linea di piegatura (Above The Fold), perché è qui che i visitatori trascorrono la maggior parte del loro tempo. Tuttavia, anche la parte inferiore della pagina, in particolare il footer della landing page, merita attenzione.

In un interessante caso di studio, la società di analisi dei contenuti dei siti Web Chartbeat ha scoperto che il 65% del coinvolgimento della pagina avviene appena sotto la piega.

Quindi le persone continueranno a scorrere! E se non ottimizzi la metà inferiore della tua pagina di destinazione, compreso il piè di pagina, potresti perdere opportunità uniche come:

• Fornire ulteriori informazioni importanti sul tuo marchio e prodotto.
• Esperienza utente e navigazione migliorate.
• Aumento dei tassi di conversione.

Per gli utenti che desiderano trascorrere un po' più di tempo sulla tua landing page e scorrere fino alla fine della pagina per trovare le informazioni di cui hanno bisogno, un'area footer ben progettata fa la differenza.

In questo post tratteremo tutti i dettagli sulla creazione e l'utilizzo dei footer, indipendentemente dal tipo di sito. Cominciamo dall'inizio.

Cos'è un piè di pagina?

Il piè di pagina è la parte più bassa di un sito Web o di una pagina di destinazione. Sono disponibili in tutte le forme e dimensioni. Alcuni siti hanno aree di piè di pagina piccole, mentre altri ne hanno di molto grandi, che includono più colonne e piè di pagina. Alcuni siti non hanno alcun piè di pagina, mentre altri integrano una funzione speciale chiamata (Scorrimento infinito). Ciò significa che non c'è un piè di pagina nella parte inferiore del sito, né una fine della pagina in quanto tale. Non tratteremo questo argomento oggi.

I piè di pagina contengono in genere informazioni di contatto, una casella di ricerca e collegamenti di navigazione a pagine importanti e icone di profili di social network. Il piè di pagina può essere utilizzato anche per fornire altre informazioni rilevanti sull'azienda, ad esempio una dichiarazione di missione aziendale, informazioni sull'ubicazione dell'ufficio (mappa), statistiche del sito, prove sociali, modulo di iscrizione alla newsletter via e-mail, dettagli di registrazione o accesso all'account, altri tipi (Call-To-Action, CTA), ecc.

Perché è necessario dedicarsi alla progettazione del footer

Avere un piè di pagina non è strettamente necessario, ma non averne uno può causare frustrazione e frustrazione ai visitatori che cercano di trovare informazioni specifiche su un prodotto o sulla tua attività.

La sezione footer è ideale per i dettagli sul copyright e i collegamenti a informazioni di contatto, termini e condizioni, ordini, politica sulla privacy, avvisi sui cookie, ecc. Particolarmente popolare è pubblicare qui collegamenti a gruppi sui social network: la maggior parte delle persone si aspetta già di trovarli nel piè di pagina.

Oltre a migliorare il flusso di navigazione di un sito e l'esperienza dell'utente, è stato dimostrato che la progettazione strategica del footer ha un impatto sulle conversioni.

Esempi di bellissimi piè di pagina

Diamo un'occhiata ad alcuni esempi di piè di pagina che potrebbero ispirarti a trovare le tue idee.

La pagina di destinazione che vende il purificatore d'aria A803 AirEngine del marchio Bork ha un design accattivante a piè di pagina che include collegamenti di navigazione (e sono progettati in due stili diversi: sotto forma di immagini cliccabili e sotto forma di colonne con elenchi), un modulo di iscrizione alla newsletter e icone dei social media.

Anche la pagina dell'illusionista Igor Zavyalov sembra molto bella. Il design è costituito da informazioni di contatto, collegamenti a profili social e un modulo di contatto semplice e accattivante.

Prima del footer della landing page di Bitrix24 è presente una sezione “pre-footer” finalizzata alla conversione (il potenziale cliente è invitato a lasciare contatti per comunicare con i gestori). Poi c'è l'area principale del footer con una mappa, collegamenti di navigazione, un collegamento di conversione per richiamata e un numero di telefono.

Il sito strip-lenta.com ha un footer originale con una busta contenente i contatti e un modulo di contatto:

Il footer è preceduto da una zona pre-footer con social proof - loghi di clienti famosi:

Ma non si sono fermati qui! C'è anche una zona post-footer, che prevede l'esecuzione di un'azione di conversione:

Infine, guardiamo l’insolito finale della landing page di Alfa-Bank, creata per il reclutamento del personale. Il sito stesso è progettato in modo tale che mentre lo scorriamo osserviamo una modificazione dell'eroe-richiedente: si muove, cambia vestiti, diventa più sicuro di sé e ha successo. Alla fine della pagina c'è un cartello, cliccando sul quale si accede alla pagina con le offerte di lavoro attuali. Non c'è nient'altro nel piè di pagina, ma è soddisfatta la funzione principale della pagina di destinazione: conversione sotto forma di transizione per familiarizzare con le informazioni e quindi inviare il proprio curriculum.

Bene, pensiamo che sia abbastanza cibo per l'ispirazione. Ora diamo un'occhiata a 16 cose da non trascurare quando progetti il ​​tuo piè di pagina.

Elementi di base del piè di pagina

1. Informazioni sul copyright. Fai capire ai visitatori senza scrupoli della tua landing page che il contenuto è protetto da copyright e che ci saranno conseguenze in caso di plagio. Il footer è il luogo perfetto per questo tipo di informazioni.

2. Informazioni di contatto. Come accennato, molte persone scorrono la pagina cercando i tuoi contatti (telefono, indirizzo, email). È fondamentale aggiungerli al piè di pagina, soprattutto se scegli di non includerli nell'intestazione.

Consiglio. Quando inserisci il numero di telefono nel footer, rendilo cliccabile; questo renderà più semplice per l'utente contattare direttamente la tua azienda durante il caricamento della landing page nel caso in cui utilizzi uno smartphone.

3. Informativa sulla privacy. Le leggi sulla privacy online stanno diventando sempre più severe, quindi avere un collegamento a tale pagina è importante.

4. Termini di servizio. Quando fornisci servizi o vendi prodotti tramite la tua landing page, non vuoi che i tuoi clienti siano confusi sulle sfumature del fare affari con te. Assicurati che il piè di pagina mostri chiaramente un collegamento alla pagina dei termini di servizio.

5. Feedback/feedback. Questa è una parte facoltativa, ma se hai una pagina separata dedicata a questa, sarebbe utile includerne un collegamento qui.

6. Mappa. Se la tua pagina di destinazione è un biglietto da visita per un'azienda la cui attività principale è offline (ad esempio possiedi una pensione, un ristorante o uno spazio per eventi), assicurati di considerare l'aggiunta di dati sulla posizione nel piè di pagina. Potrebbe trattarsi di semplice testo con un indirizzo o di integrazione locale con Yandex Maps, Google Maps o 2GIS.

Ecco come aggiungere una mappa alla tua pagina di destinazione utilizzando il generatore di sezioni in:

Elementi facoltativi del piè di pagina

Consideriamo ora altri elementi meno significativi del design del footer.

8. Prova sociale e icone per i profili sui social network. Se vuoi mostrare la tua influenza sui social media o incoraggiare le persone a seguire i tuoi account prioritari, considera l'aggiunta di icone come queste. E visualizzando il numero dei tuoi follower per ciascun profilo, creerai una prova sociale.

9. Una mappa del sito (SiteMap) aiuta i motori di ricerca a comprendere meglio la struttura del tuo sito e dei tuoi contenuti. Molti siti inseriscono un collegamento alla SiteMap accanto alle informazioni sul copyright nel footer del post.

11. Un semplice modulo di immissione e-mail è un ottimo modo per aumentare le conversioni di adesione. In alternativa, se nel footer non c'è spazio per inserire un modulo di registrazione, ti suggeriamo di inserire un pulsante CTA o un collegamento alla pagina principale in cui prevedi di generare lead.

12. Modulo di contatto per l'invio di messaggi. Adatto se non vuoi inserire i tuoi contatti nel piè di pagina, in particolare il tuo indirizzo email. L'aggiunta di un modulo come questo riduce il rischio di ricevere spam e aiuta inoltre gli utenti a contattarti facilmente da quasi tutte le pagine del tuo sito. Ricorda, tuttavia, che questo elemento potrebbe occupare una notevole quantità di spazio inferiore.

13. Dichiarazione di missione. Se vuoi mostrare ai tuoi visitatori cosa rappresenta il tuo marchio, quali sono i tuoi obiettivi e le tue aspirazioni, allora considera di aggiungere una versione condensata della tua dichiarazione di intenti al piè di pagina. Se è problematico creare un messaggio conciso, includi un collegamento a una pagina speciale.

14. Elenco dei post recenti del blog. Potresti voler aggiungere un feed qui con i tuoi ultimi post del blog. Una strategia ancora più efficace è visualizzare solo i post del blog migliori e più popolari. Quattro o cinque collegamenti saranno più che sufficienti.

15. “Chi sono” / “Biografia”. Quando si tratta di un sito web o di un blog con un marchio personale, puoi anche aggiungere una breve biografia su di te, inclusa una foto: aggiungerà un elemento vivace e "umano" al sito. L'aggiunta di un collegamento alla pagina Chi sono (Chi siamo) offrirà ai visitatori l'opportunità di saperne di più su di te.

16. Link di conversione o inviti all'azione. Hai pagine di prodotti, sezioni dei best seller o pagine di affiliazione che devi promuovere? Che ne dici di incorporare i collegamenti ad essi nell'Anchor Text del piè di pagina?

Cosa non aggiungere al tuo footer

Ecco cosa evitare:

• Contatori di visualizzazioni di pagina e widget che riflettono le statistiche sul traffico.
• Link di affiliazione diretti.
• Feed di social media integrati.
• Pubblicità.

Quali strumenti dovresti utilizzare quando lavori sul tuo progetto?

Dipende dalla piattaforma su cui è in esecuzione il tuo sito. Per gli utenti di LPgenerator, ad esempio, ci sono molti layout già pronti e modelli di pagine di destinazione gratuiti di alta qualità che puoi personalizzare tu stesso:

È tutto!

Speriamo che questo post ti sia stato utile. Vogliamo anche che ti incoraggi a ripensare al modo in cui utilizzi la sezione footer. Qualunque siano i tuoi obiettivi di conversione, sperimenta molto e vedrai cosa funziona e cosa no.

Inizia con alcuni elementi di base e ciò che ritieni possa migliorare la navigazione e l'esperienza dell'utente.

Se sospetti che le persone non stiano scorrendo fino al piè di pagina, imposta le mappe di calore e scorri le mappe per scoprirlo con certezza.

Qualunque cosa tu decida di fare, non lasciare che il tuo piè di pagina si pieghi. È il momento di rispondere alle seguenti domande:

• Il tuo sito web o blog ha un piè di pagina?
• Ne stai traendo il massimo?
• Cosa c'è nel footer in questo momento? Come si può migliorare?

Per prima cosa vi mostrerò il risultato del post di oggi. Il piè di pagina sarà piccolo e conterrà solo una riga di testo

Problemi con l'implementazione del footer

Se il piè di pagina è la parte inferiore della pagina, qual è il problema nell'implementarlo? Dopotutto, puoi semplicemente continuare la nostra tabella principale e inserirvi tutte le informazioni necessarie! Sì, è vero, questo approccio è applicabile nel 99% delle implementazioni di siti web, ma c'è un piccolo problema che si verifica nell'1% dei casi.

Ecco un diagramma schematico del browser

In questo diagramma il footer è legato all'estremità della tabella principale, e verrà posizionato dove necessario se l'area principale del sito è di altezza sufficiente per creare uno scorrimento verticale nel browser.

Ma cosa succede se l'altezza del sito non è così elevata da creare uno scorrimento verticale?

Come puoi vedere, risulta essere un quadro triste. Il piè di pagina in questa situazione non è il fondo della pagina, ma il centro. Come risolvere questo problema?

Ci sono due opzioni:

• Non importa che il footer appaia al centro, perché nel 99% dei casi il sito ha un'altezza sufficiente affinché il footer appaia dove serve.
• Utilizzare un modo diverso per implementare il piè di pagina

Oggi considereremo la seconda opzione. Esistono molti modi per implementare un piè di pagina, ma c'è una cosa! Tutti i metodi che ho provato non funzionano a condizione che la nostra area principale del sito abbia lo stile . Ma non è poi così spaventoso

Teoria dell'implementazione del piè di pagina

Cosa sto offrendo? Suggerisco di utilizzare jquery. Usandolo, possiamo scoprire l'altezza del browser o qualsiasi altro oggetto sul nostro sito. Cosa serve? Poiché il footer sarà un oggetto posizionato in modo assoluto (avrà position:absolute; style), l'altezza dell'area di lavoro, o l'altezza della tabella principale, ci permetterà di sapere di quanto spostare la nostra area footer lungo la parte superiore ( ottimo stile)!

Penso che sia chiaro come realizzeremo il nostro seminterrato

Per quanto riguarda il funzionamento della funzione Java script. Dovremo determinare quale altezza (altezza del browser o altezza della tabella principale) utilizzare per spostare il piè di pagina. Qui è tutto semplice, controlliamo se la tabella o la finestra del browser è più alta; se è una finestra del browser, utilizziamo la sua altezza; Se è il contrario, utilizziamo l’altezza del tavolo principale.

Crea un piè di pagina >Modifica lo stile della tabella

Per prima cosa dobbiamo modificare lo stile della nostra tabella principale.

Come puoi vedere, lo spazio tra la nostra tabella principale e la fine del browser è trascurabile. Poiché il piè di pagina sarà posizionato in modo assoluto, non espanderà in alcun modo lo spazio tra la tabella principale e la fine della pagina! Dovremo aiutare introducendo un nuovo elemento CSS nello stile della nostra area principale.

Apri il file style.css personalizzato, trova la tabella della classe (.table(...)) e modificala in questo modo

Tavolo
{
posizione:assoluta;
in alto:0px;
sinistra:50%;
margine sinistro:-390px;
fondo imbottito:50px;
indice z: 1;
}

Ho aggiunto lo stile padding-bottom:50px;, ovvero ho creato uno spazio tra la fine della tabella e la fine della finestra del browser di 50 pixel. Per il footer che ho in mente (screenshot del risultato all'inizio del post), questo spazio sarà sufficiente, se hai in mente un footer molto più grande del mio, allora metti tutti i pixel che ti servono!

>Modifica del modello principale

Apri il file index.html personalizzato e prima

inserisci il nostro footer

Alimentato da RS-BLOG v2 | Quando copi materiale da questo blog, non dimenticare di pubblicare un collegamento alla fonte: rsblog.ru

Lasciatemi spiegare alcuni degli stili che vengono utilizzati qui

• visualizzazione:nessuno; - Il nostro footer apparirà all'utente solo dopo che l'intera pagina sarà stata caricata, fino a questo momento il footer non sarà visibile!
• sinistra:50%;margine sinistro:-390px; - Questi due stili ti permettono di posizionare il footer esattamente al centro del browser.
• allineamento testo:centro; - consentono di posizionare al centro il testo contenuto nel blocco.

>Collega jquery e js.js

Per prima cosa devi scaricarlo. Vai a questo link e clicca qui

Il codice si aprirà, selezionalo tutto e copialo nel blocco note. Nel Blocco note, fare clic su File -> Salva con nome

Inserisci il nome del file (jquery.js) con .js

e salvalo nella cartella dei modelli personalizzati. Ora abbiamo il file che ci serve nella cartella con il motore. Vale anche la pena creare un file js.js (un file vuoto per ora). Presto scriveremo una funzione per visualizzare il piè di pagina al suo interno. Ecco come appare ora il contenuto della cartella dei modelli:

Se la memoria non mi inganna, ho registrato una video lezione in cui ho collegato jquery in modo leggermente diverso, se sei interessato puoi guardarla

Ora non resta che collegare i file js al nostro blog. Per fare ciò, apri il file index.html personalizzato e dopo la riga