Le barre a piè di pagina fisse possono essere un modo conveniente per conservare informazioni importanti sul tuo sito web in primo piano quando 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.
Tuttavia, se non nascondi il contenuto della barra a piè di pagina nella parte inferiore della pagina, puoi creare una barra a piè di pagina personalizzata che fluttua nella parte inferiore dello schermo mentre l'utente scorre.
In questo tutorial, progetteremo una barra a piè di pagina fissa completamente personalizzata utilizzando il generatore di temi Divi. Questo ti sarà utile per tenere sempre in vista quei piccoli ma importanti contenuti.
Possibile risultato
Ecco una panoramica della barra a piè di pagina fissa che stiamo per progettare.
Come aggiungere il modello della barra del piè di pagina fisso da scaricare sul tuo sito Divi
ATTENZIONE!: L'aggiunta di questo modello sostituirà il modello di sito web per impostazione predefinita (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 da soli il modello della barra a piè di pagina fissa sito web, decomprimere il file zip di download per accedere al file JSON.
Quindi vai alla dashboard di WordPress e vai a Divi> Theme Builder.
Quindi fare clic sull'icona della portabilità in alto a destra nella pagina.
Nella finestra della portabilità, scegli il file JSON che hai appena decompresso e seleziona l'opzione "Scarica backup prima dell'importazione", nel caso in cui in precedenza avevi qualcosa nel modello di sito web predefinito che non si desidera sovrascrivere.
Quindi fare clic sul pulsante Importa.
Infine, salva le modifiche nel generatore di temi e visualizza una pagina live per visualizzare la barra a piè di pagina fissa.
Ora passiamo al tutorial, ok?
Parte 1: aggiunta di un piè di pagina globale
Il generatore di temi di Divi ti consente di sostituire il piè di pagina predefinito con uno nuovo aggiornando il file modello di sito web Predefinito.
Per creare un piè di pagina globale, vai alla dashboard di WordPress e vai a Divi> Theme Builder. Quindi fare clic sullo spazio "Aggiungi piè di pagina globale" all'interno del modello di sito Web predefinito.
Quindi seleziona l'opzione "Crea un piè di pagina personalizzato" dall'elenco a discesa.
Questo distribuirà l'Editor del layout del modello dove ti verranno immediatamente richieste le tre scelte su come vuoi iniziare a costruire. Seleziona "Build From Scratch".
Parte 2: creazione della barra a piè di pagina fissa
Ora che stiamo modificando dall'editor del layout del modello, possiamo iniziare a progettare la barra del piè di pagina fissa. Una volta terminato, avrai una barra a piè di pagina fissa con tre colonne pronte per il contenuto.
Aggiungi un layout a tre colonne alla linea
Innanzitutto, aggiungi un layout a tre colonne alla riga.
Altezza della sezione
Una volta aggiunte le tre colonne, diamo un'altezza definita alla sezione. Questo è importante per creare uno spazio in fondo alla pagina dove finirà il telefono fisso. Rimuoveremo anche il riempimento predefinito superiore e inferiore.
Per impostare l'altezza e l'imbottitura, aprire le impostazioni della sezione e aggiornare quanto segue:
- Altezza: 85px
- Imbottitura: 0px alta, 0px bassa
Impostazioni linea
Ora che la nostra sezione è pronta, siamo pronti per personalizzare la riga in modo che funga da barra a piè di pagina fissa. Apri le impostazioni della riga, quindi aggiorna quanto segue:
contesto
- Colore di sfondo: # 1a1e36
Dimensioni e spaziatura
- Larghezza della grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 0px su, 0px giù, 3% a sinistra, 3% a destra
CSS personalizzato
Sebbene la riga sia fissa, vogliamo che l'altezza della riga corrisponda all'altezza della sezione padre in modo che lo spazio nella parte inferiore della pagina contenga correttamente la riga. E vogliamo assicurarci che il contenuto della riga rimanga allineato verticalmente. A tale scopo, aggiungi il seguente CSS personalizzato all'elemento principale della riga:
ufficio
altezza: eredita! importante; display: flessibile; align-items: center;
Telefono
altezza: eredita! importante; display: blocco;
Posizionamento fisso
Per fissare la linea in modo che fluttui nella parte inferiore dello schermo, dobbiamo darle una posizione fissa nella posizione centrale in basso come segue:
- Posizione: fissa
- Ubicazione: centro inferiore
Parte 2: creazione del contenuto della barra a piè di pagina fissa
A questo punto, abbiamo una barra a piè di pagina a posizione fissa pronta per il contenuto. Possiamo aggiungere qualsiasi contenuto vogliamo a ciascuna delle tre colonne. Ma poiché si tratta di una "barra" a piè di pagina limitata a 85 pixel di altezza, è necessario 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 un testo di copyright con un anno corrente dinamico. Nella colonna 3, aggiungeremo tre icone di monitoraggio dei social media.
Aggiungi un menu alla colonna 1
Nella colonna 1, aggiungi un modulo di menu.
Seleziona il menu
Seleziona quindi uno dei menu che hai già creato sul tuo sito web. Assicurati di mantenere le voci di menu a 4 o meno.
Aggiungi il logo del sito come contenuto dinamico
Per il menu del logo, aggiungeremo dinamicamente il logo del sito. Fare clic sull'icona "Usa contenuto dinamico" mentre si passa con il mouse sull'area di anteprima del logo. Quindi seleziona Logo del sito dall'elenco a discesa.
Rimuovi sfondo
Quindi rimuovere lo sfondo del menu predefinito in modo che sia trasparente.
Progettazione Menu
A questo punto siamo pronti per aggiungere un po 'di design al menu. Per questo design, lo manterremo semplice e piccolo. Aggiorna i seguenti parametri di progettazione:
- Menu Font: cavalcavia
- Colore testo menu: # b59c61
- Immagine seppia: 100%
- Altezza massima del logo: 50 px
Aggiungi testo protetto da copyright alla colonna 2
Una volta che il menu è attivo, vai alla colonna 2 per aggiungere il testo del copyright.
Aggiungi un modulo di testo
Aggiungi un nuovo modulo di testo alla colonna 2.
Aggiungi dinamicamente la data corrente con il testo prima e dopo
Qui diventeremo creativi con contenuti dinamici per visualizzare l'anno corrente nel testo del copyright. Ciò garantirà che l'anno venga aggiornato automaticamente per la vita del sito.
A tale scopo, fare clic sull'icona "Utilizza contenuto dinamico" e selezionare "Data corrente" dall'elenco.
Nella finestra a comparsa Data corrente, aggiorna quanto segue:
- prima:
- 01
Copyright ©
- dopo:
- 01
| Tous Droits Reservés
- Formato data : personalizzato
- Formato data personalizzato : 20 anni
Formattazione del testo
Aggiorna il disegno e il margine del testo come segue:
- Carattere testo: cavalcavia
- Colore del testo: # b59c61
- Allineamento del testo: centro
- Margine (solo telefono): 10 pixel nella parte superiore, 10 pixel nella parte inferiore
Questo supporta il testo protetto da copyright.
Aggiungi icone di monitoraggio dei social media alla colonna 3
Nella colonna 3, aggiungi un modulo di monitoraggio dei social media.
Aggiungi social network
Nella scheda Contenuto, aggiungi i social network necessari al sito. Per questo design, ne usiamo tre.
Impostazioni di monitoraggio dei social media
Successivamente, aggiorna le impostazioni di progettazione per tutte le icone di monitoraggio dei social media come segue:
- Allineamento del modulo: dritto (desktop e tablet), al centro (telefono)
- Colore icona: # 1a1e36
- Usa dimensioni icona personalizzate: SÌ
- Dimensione carattere icona: 16px (desktop e tablet), 14px (telefono)
Aggiorna le impostazioni dei social media
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: 8 pixel a destra, 8 pixel a sinistra
- Angoli arrotondati: 8px
Estendi le impostazioni dei social media a tutti
Quindi apri il menu delle impostazioni aggiuntive per la prima rete e seleziona " Estendi gli stili degli oggetti " nella lista. Nella finestra a comparsa Estendi stili, scegli di estendere gli stili in " Questa colonna "E clicca estendersi .
Ciò estenderà il design al resto delle icone nella colonna.
Considerazioni finali
L'aggiunta di una barra a piè di pagina fissa in alcuni casi ha senso. L'altezza della barra è abbastanza piccola da non distrarre o occupare troppo spazio sul cellulare. E ti dà la possibilità di aggiungere importanti CTA per conversioni migliori e un'esperienza utente più fluida.
Per questo design, lo spazio nella parte inferiore della pagina viene creato impostando un'altezza fissa per la sezione e quindi consentendo alla linea fissa di ereditare l'altezza della sezione (sebbene sia fissa).
Altre risorse
Ecco un elenco di risorse aggiuntivo che può aiutarti a creare nella progettazione del tuo sito Web con Divi.
- Come creare una pagina di accesso personalizzata su Divi
- Come aggiungere un modulo di navigazione a larghezza intera su Divi
- Come creare un dispositivo di scorrimento a schermo intero su Divi
- Come aggiungere un contatore circolare su Divi
