Come creare barre di piè di pagina mobili fisse con Divi

Sappiamo quanto sia importante assicurarsi che tutto sia personalizzato per adattarsi all'esperienza mobile. Per aiutarti a portare l'esperienza mobile a un altro livello, ti mostreremo come creare barre di piè di pagina mobili fisse con Divi in ​​questo post passo passo.

Questo tutorial fa parte della nostra iniziativa di progettazione Divi in ​​corso in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. Questa volta, utilizzeremo il pacchetto di layout della clinica sanitaria e faremo in modo che le barre del piè di pagina mobili fisse corrispondano allo stile del pacchetto di layout. Tuttavia, sarai in grado di utilizzare questo approccio per qualsiasi tipo di design su cui stai lavorando e creare le tue alternative per la barra del piè di pagina mobile fissa.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata ai tre esempi che ricreeremo passo dopo passo. Questi esempi verranno visualizzati solo su dispositivi mobili (e tablet se preferisci).

Ricrea l'esempio n. 1

Aggiungi una nuova sezione in fondo alla pagina

Iniziamo a ricreare la prima barra di piè di pagina mobile fissa! Consigliamo di creare una pagina per tre dei layout inclusi nel pacchetto di layout di Health Clinic. Uno per ogni esemplare. Apri la pagina a cui vuoi aggiungere la prima barra del piè di pagina. Scorri verso il basso fino alla fine della pagina e aggiungi una nuova sezione subito dopo l'ultima.

Spaziatura

Apri le impostazioni della riga e rimuovi tutto il riempimento superiore e inferiore personalizzato nelle impostazioni di spaziatura.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Visibilità

Stiamo nascondendo questa sezione anche sul desktop. Se vuoi che la barra del piè di pagina mobile appaia solo sul cellulare, vai avanti e nascondi la sezione anche sul tablet.

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Rimuovi tutto il riempimento superiore e inferiore predefinito della riga successiva.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

CSS personalizzato

Infine, stiamo aggiungendo alcune righe CSS personalizzate alla riga. Queste linee aiuteranno a trasformare la riga in una barra fissa del piè di pagina.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è un modulo di testo nella colonna 1. Aggiungi del contenuto a tua scelta.

Colore di sfondo

Vai alle impostazioni dello sfondo del modulo e cambia il colore di sfondo.

• Colore di sfondo: #5e89fb

Impostazioni testo

Modifica anche le impostazioni del testo.

• Carattere del testo: Work Sans
• Peso del carattere del testo: leggero
• Colore del testo: #ffffff
• Dimensione del testo: 16px
• Spaziatura delle lettere del testo: -1px

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 16px
• Imbottitura inferiore: 16px
• Imbottitura sinistra: 15px
• Imbottitura destra: 15px

Frontiera

E anche alcuni angoli arrotondati.

• In alto a sinistra: 10px
• In alto a destra: 10px

Scatola ombra

Completa le impostazioni del modulo aggiungendo un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Aggiungi modulo Blurb alla colonna 2

Aggiungi contenuto

Aggiungi un modulo Blurb alla seconda colonna e aggiungi un titolo a tua scelta.

Seleziona icona

Continua selezionando un'icona per il Modulo Blurb.

Colore di sfondo

Aggiungi anche un colore di sfondo al modulo.

• Colore di sfondo: #62de9d

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona.

• Colore icona: #ffffff
• Posizionamento dell'icona: a sinistra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 19px

Impostazioni del testo del titolo

Continua modificando le impostazioni del testo del titolo.

• Carattere del titolo: Work Sans
• Colore del testo del titolo: #ffffff
• Dimensione del testo del titolo: 16px
• Spaziatura delle lettere del titolo: -1px

Spaziatura

Aggiungi anche del riempimento personalizzato al modulo.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 10px
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Frontiera

E aggiungi "10px" negli angoli in alto a sinistra e in alto a destra.

• In alto a sinistra: 10px
• In alto a destra: 10px

Scatola ombra

Ultimo ma non meno importante, aggiungi un'ombra sottile al modulo.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Ricrea l'esempio n. 2

Aggiungi nuova sezione in fondo alla pagina

Al secondo esempio! Ancora una volta, apri una pagina a tua scelta, scorri verso il basso fino alla fine della pagina e aggiungi una nuova sezione.

Spaziatura

Apri le impostazioni della sezione e rimuovi l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Visibilità

Nascondi la sezione su desktop (e tablet se preferisci).

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere alcun modulo, apri le impostazioni di riga e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Rimuovi anche l'imbottitura superiore e inferiore predefinita della riga.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

CSS personalizzato

Aggiungi alcune linee CSS personalizzate alla riga successiva. Queste righe di codice CSS aiuteranno a creare la barra del piè di pagina mobile fissa.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

Continua aggiungendo un modulo Blurb alla prima colonna. Aggiungi un titolo a tua scelta.

Seleziona icona

Quindi, seleziona un'icona.

Colore di sfondo

Aggiungi un colore di sfondo al modulo successivo.

• Colore di sfondo: #62de9d

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona del modulo.

• Colore icona: #ffffff
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 25px

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Carattere del titolo: Work Sans
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #ffffff
• Spaziatura delle lettere del titolo: -1px

Spaziatura

E aggiungi un po' di imbottitura superiore e inferiore per dare al modulo un po' di spazio per respirare.

• Imbottitura superiore: 30px
• Imbottitura inferiore: 30px

Frontiera

Stiamo anche aggiungendo "15px" al bordo in alto a sinistra del modulo.

• In alto a sinistra: 15px

Scatola ombra

E completeremo il modulo con un'ombra sottile della scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Clona il modulo Blurb due volte e posiziona i duplicati nelle colonne rimanenti

Una volta che hai finito di modificare il primo modulo Blurb, puoi andare avanti e clonare il modulo due volte e posizionare i duplicati nelle due colonne rimanenti.

Cambia il colore di sfondo del duplicato #1

Cambia il colore di sfondo del primo duplicato.

• Colore di sfondo: #3d3d3d

Modifica le impostazioni di spaziatura del duplicato n. 1

Insieme alle impostazioni di spaziatura.

• Margine superiore: -20 px
• Imbottitura superiore: 50px
• Imbottitura inferiore: 30px

Cambia bordo del duplicato #1

E anche gli angoli arrotondati.

Cambia il colore di sfondo del duplicato #2

Cambia anche il colore di sfondo del secondo duplicato nella terza colonna.

• Colore di sfondo: #000000

Cambia bordo del duplicato #2

Insieme agli angoli arrotondati.

• In alto a destra: 15px

Ricrea l'esempio n. 3

Aggiungi nuova sezione in fondo alla pagina

Al prossimo e ultimo esempio! Apri una delle pagine, scorri la pagina verso il basso e aggiungi una nuova sezione.

Divisore superiore

Apri le impostazioni della sezione e aggiungi un divisore superiore.

• Colore divisore: #62de9d
• Altezza divisore: 110 px

Spaziatura

Rimuovi anche tutto il riempimento superiore e inferiore predefinito della sezione.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Scatola ombra

Aggiungi un'ombra sottile alla sezione successiva.

• Intensità della sfocatura dell'ombra della scatola: 80 px

CSS personalizzato

E includi alcune righe CSS personalizzate nella scheda Avanzate. Ciò contribuirà a trasformare la sezione in una barra di piè di pagina mobile fissa.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Visibilità

Infine, disabilita la sezione su desktop (e tablet se preferisci).

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Aggiungi successivamente un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 30px
• Imbottitura inferiore: 20px

CSS personalizzato

Per assicurarci che tutte e tre le colonne rimangano alla stessa altezza, aggiungeremo anche una riga di codice CSS alla scheda avanzata della riga.

display: flex;

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

Ora possiamo iniziare ad aggiungere moduli! Aggiungi un modulo Blurb alla prima colonna e assegnagli un titolo.

Seleziona icona

Seleziona un'icona successiva.

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona.

• Colore icona: #ffffff
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 25px

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Carattere del titolo: Work Sans
• Orientamento del testo del titolo: Centro
• Spaziatura delle lettere del titolo: -1px

Clona modulo Blurb due volte e posiziona

Una volta che hai finito di modificare il modulo Blurb nella colonna 1, puoi andare avanti e clonare il modulo due volte. Posiziona i duplicati nelle due colonne rimanenti.

Cambia il colore dell'icona del duplicato #1

Non dimenticare di cambiare il colore dell'icona del duplicato che si trova nella seconda colonna.

• Colore icona: #000000

Anteprima

Ora che abbiamo seguito tutti i diversi passaggi, diamo un'ultima occhiata al risultato di tutti e tre gli esempi che abbiamo trattato sopra.

Pensieri finali

In questo post, abbiamo gestito tre diversi design di barre a piè di pagina mobili fisse che puoi ricreare passo dopo passo seguendo il tutorial. Le barre a piè di pagina per dispositivi mobili seguiranno i visitatori durante tutta la loro esperienza di scorrimento sulla pagina. Questo tutorial fa parte dell'iniziativa di progettazione Divi in ​​corso, in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!