Come creare una barra del piè di pagina fissa per il tuo tema Divi

Le barre a piè di pagina fisse possono essere un modo conveniente per tenere in primo piano le informazioni importanti sul tuo sito web mentre l'utente interagisce con il contenuto della tua pagina su qualsiasi dispositivo. Come con Divi, una barra del piè di pagina di solito esiste come elemento statico nella parte inferiore della pagina dopo il contenuto del piè di pagina principale. Includono cose come il testo del copyright e le icone dei social media. Ma, se non nascondi il contenuto della barra del piè di pagina nella parte inferiore della pagina, puoi creare una barra del piè di pagina personalizzata che fluttua nella parte inferiore dello schermo mentre l'utente scorre.

In questo tutorial, progetteremo una barra del piè di pagina fissa completamente personalizzata utilizzando il generatore di temi di Divi. Ciò sarà utile per mantenere sempre in bella vista quei piccoli ma significativi contenuti.

Iniziamo.

Sbirciata

Ecco una rapida occhiata alla barra del piè di pagina fissa che progetteremo.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Come aggiungere il download del modello di barra del piè di pagina fisso al tuo sito Divi

ATTENZIONE!: L'aggiunta di questo modello sovrascriverà il modello di sito Web predefinito (se ne hai uno) sul tuo sito Divi. Ti suggeriamo di aggiungerlo a un sito di prova in modo da non rovinare nulla su un sito live.

Per importare il modello di barra del piè di pagina fisso nel tuo sito Web, decomprimi il file zip di download per accedere al file JSON.

Quindi vai al dashboard di WordPress e vai a Divi> Theme Builder.

Quindi fai clic sull'icona della portabilità in alto a destra nella pagina.

All'interno del popup di portabilità, scegli il file JSON che hai appena decompresso e seleziona l'opzione "Scarica il backup prima dell'importazione", nel caso in cui in precedenza avessi qualcosa nel modello di sito Web predefinito che non volevi sovrascrivere.

Quindi fare clic sul pulsante Importa.

Infine, salva le modifiche al Theme Builder e visualizza una pagina live per vedere la barra del piè di pagina fissa.

Ora, passiamo al tutorial, vero?

Parte 1: aggiunta di un piè di pagina globale

Divi's Theme Builder ti consente di sostituire il piè di pagina predefinito con uno nuovo aggiornando il modello di sito Web predefinito.

Per creare un piè di pagina globale, vai alla dashboard di WordPress e vai a Divi > Generatore di temi. Quindi fai clic sullo spazio "Aggiungi piè di pagina globale" all'interno del modello di sito Web predefinito.

Quindi seleziona l'opzione "Crea piè di pagina globale" dal menu a discesa.

Questo distribuirà il Template Layout Editor dove ti verranno immediatamente richieste le tre scelte su come vuoi iniziare a costruire. Seleziona "Costruisci da zero".

Parte 2: Creazione della barra del piè di pagina fissa

Ora che stiamo modificando dall'editor di layout del modello, possiamo iniziare a progettare la barra del piè di pagina fissa. Una volta fatto, avrai una barra del piè di pagina fissa con tre colonne pronte per il contenuto.

Aggiungi layout a tre colonne alla riga

Innanzitutto, aggiungi un layout a tre colonne alla riga.

Altezza della sezione

Dopo aver aggiunto le tre colonne, diamo un'altezza impostata alla sezione. Questo è importante per creare lo spazio nella parte inferiore della pagina in cui la riga fissa alla fine si fermerà. Elimineremo anche l'imbottitura superiore e inferiore predefinita.

Per impostare l'altezza e il riempimento, apri le impostazioni della sezione e aggiorna quanto segue:

• Altezza: 85 px
• Imbottitura: 0px in alto, 0px in basso

Impostazioni riga

Ora che la nostra sezione è pronta, siamo pronti per personalizzare la riga per fungere da barra fissa del piè di pagina. Apri le impostazioni per la riga e quindi aggiorna quanto segue:

Sfondo

• Colore di sfondo: #1a1e36

Dimensioni e spaziatura

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px in alto, 0px in basso, 3% a sinistra, 3% a destra

CSS personalizzato

Anche se la riga sarà fissa, vogliamo che l'altezza della riga corrisponda all'altezza della sezione padre in modo che lo spazio nella parte inferiore della pagina contenga adeguatamente la riga. Inoltre, vogliamo assicurarci che il contenuto all'interno della riga rimanga allineato verticalmente. Per fare ciò, aggiungi il seguente CSS personalizzato all'elemento principale della riga:

Desktop

height: inherit !important;
display:flex;
align-items: center;

Telefono

height: inherit !important;
display:block;

Posizionamento fisso

Per fissare la riga in modo che galleggi nella parte inferiore dello schermo, dobbiamo assegnarle una posizione fissa nella posizione in basso al centro come segue:

• Posizione: fissa
• Posizione: in basso al centro

Parte 2: Creazione del contenuto fisso della barra del piè di pagina

A questo punto, abbiamo una barra del piè di pagina nella posizione fissa pronta per il contenuto. Possiamo aggiungere qualsiasi contenuto desideriamo a ciascuna delle tre colonne. Ma poiché questa è una "barra" di piè di pagina con un'altezza limitata di 85 px, dobbiamo limitare la quantità di contenuto. Per questo motivo, aggiungeremo un piccolo menu con un logo dinamico e 4 voci di menu nella colonna 1. Nella colonna 2, aggiungeremo il testo del copyright con un anno in corso dinamico. Nella colonna 3, aggiungeremo tre icone per seguire i social media.

Aggiungi menu alla colonna 1

Nella colonna 1, aggiungi un modulo menu.

Seleziona Menu

Quindi seleziona uno dei menu che hai già creato sul tuo sito web. Assicurati di mantenere le voci di menu su 4 o meno.

Aggiungi il logo del sito come contenuto dinamico

Per il menu del logo, aggiungeremo dinamicamente il logo del sito. Fai clic sull'icona "Usa contenuto dinamico" mentre passi il mouse sull'area di anteprima del logo. Quindi seleziona Logo del sito dal menu a discesa.

Rimuovi sfondo

Quindi rimuovi lo sfondo predefinito dal menu in modo che sia trasparente.

Menu Design

A questo punto, siamo pronti per aggiungere il design al menu. Per questo design, lo manterremo semplice e piccolo. Aggiorna le seguenti impostazioni di progettazione:

• Carattere del menu: cavalcavia
• Colore del testo del menu: #b59c61
• Seppia immagine: 100%
• Altezza massima logo: 50 px

Aggiungi il testo del copyright alla colonna 2

Una volta che il menu è a posto, passa alla colonna 2 per aggiungere il testo del copyright.

Modulo Aggiungi testo

Aggiungi un nuovo modulo di testo alla colonna 2.

Aggiungi la data corrente in modo dinamico con il testo prima e dopo

Qui diventeremo creativi con contenuti dinamici per visualizzare l'anno in corso all'interno del testo del copyright. Ciò assicurerà che l'anno si aggiorni automaticamente per la vita del sito.

Per fare ciò, fai clic sull'icona "Usa contenuto dinamico" e seleziona "Data corrente" dall'elenco.

Nel popup Data corrente, aggiorna quanto segue:

• Prima:

• Copyright ©

• Dopo:

•  | All Rights Reserved

• Formato data : personalizzato
• Formato data personalizzato : 20 anni

Progettazione del testo

Aggiorna il design del testo e il margine come segue:

• Carattere del testo: cavalcavia
• Colore del testo del testo: #b59c61
• Allineamento del testo: centro
• Margine (solo telefono): 10px in alto, 10px in basso

Questo si occupa del testo del copyright.

Aggiungi icone Segui social media alla colonna 3

Nella colonna 3, aggiungi un modulo di follow sui social media.

Aggiungi social network

Nella scheda dei contenuti, aggiungi i social network necessari per il sito. Per questo progetto ne usiamo tre.

Impostazioni per seguire i social media

Quindi aggiorna le impostazioni di progettazione per tutte le icone dei social media come segue:

• Allineamento del modulo: a destra (desktop e tablet), al centro (telefono)
• Colore icona: #1a1e36
• Usa dimensione icona personalizzata: S
• Dimensione carattere icona: 16px (desktop e tablet), 14px (telefono)

Aggiorna le impostazioni del social network

Per aggiornare il design dell'icona del singolo social network, apri le impostazioni per la prima rete e aggiorna quanto segue:

• Colore di sfondo: #ffffff
• Imbottitura: 8px a destra, 8px a sinistra
• Angoli arrotondati: 8px

Estendi le impostazioni dei social network a tutti

Quindi apri il menu Altre impostazioni per la prima rete e seleziona " Estendi stili oggetto " dall'elenco. Nel popup di estensione degli stili, scegli di estendere gli stili in " Questa colonna " e fai clic su Estendi .

Questo estenderà il design al resto delle icone nella colonna.

Disabilita Colonna 1/Menu su Tablet e Telefono

Per rendere la barra del piè di pagina ottimizzata per i dispositivi mobili, dobbiamo disabilitare una delle nostre colonne con il suo contenuto sul display del tablet e del telefono. Per questo esempio, disabiliteremo la visualizzazione del menu disabilitando la colonna 1 su telefono e tablet come segue:

Salva risultati

Assicurati di salvare il layout prima di uscire dall'editor di layout.

Quindi assicurati anche di salvare le modifiche per Divi Theme Builder.

Risultato finale

Per visualizzare il risultato, apri una pagina live sul tuo sito. Ecco come appare su una pagina che utilizza Event Layout Pack.

Guarda come il piè di pagina rimane fisso fino a quando non si ferma all'interno della sezione in fondo alla pagina.

Pensieri finali

L'aggiunta di una barra del piè di pagina fissa ha senso in alcuni casi. L'altezza della barra è abbastanza piccola da non distrarre o occupare troppo spazio sul cellulare. E ti dà l'opportunità di aggiungere importanti CTA per migliori conversioni e un'esperienza utente più fluida.

Per questo design, lo spazio nella parte inferiore della pagina viene creato impostando un'altezza fissa alla sezione e quindi consentendo alla riga fissa di ereditare l'altezza della sezione (nonostante sia fissa). Tuttavia, ci sono altri modi per generare spazio contenitore per cose come questa se trovi che l'altezza impostata è limitata o non risponde.

Spero torni utile.

Non vedo l'ora di sentirti nei commenti.

Saluti!