Come creare una bella scorrimento del piè di pagina rivela sotto i divisori di sezione di Divi

In tutte le tendenze del design, i footer rimangono essenziali. Le persone si sono così abituate a loro, il che a sua volta li rende altamente user-friendly. Aiutano i visitatori a organizzare la loro permanenza sul tuo sito web e a navigare verso la pagina precisa che stanno cercando. Con Divi puoi creare facilmente qualsiasi tipo di piè di pagina in un'unica sezione.

Ora, se stai cercando di dare al tuo piè di pagina una dimensione e un'interazione extra, adorerai questo post. Combineremo in modo creativo una sezione di piè di pagina con divisori di sezione per creare una rivelazione di scorrimento del piè di pagina.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, 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!

Iscriviti al nostro canale Youtube

1. Crea una nuova pagina vuota e carica il layout di scelta

Aggiungi nuova pagina vuota

La prima cosa che devi fare è creare una nuova pagina vuota.

Carica la pagina di destinazione del pacchetto di layout aziendale SaaS

Passa a Visual Builder e carica la pagina di destinazione del pacchetto layout aziendale SaaS. Sebbene stiamo usando questo layout specifico, puoi far funzionare la tecnica su qualsiasi tipo di pagina su cui stai lavorando.

2. Aggiungi l'indice Z a ciascuna sezione e rimuovi le animazioni della sezione

Aggiungi indice Z alla sezione Hero

Continua modificando l'indice z della sezione dell'eroe nella pagina.

• Indice Z: 3

Copia indice Z e incolla in tutte le altre sezioni della pagina

Copia l'indice z e incollalo in tutte le altre sezioni della pagina. L'aumento dell'indice z per ciascuna delle sezioni è un passaggio cruciale per far funzionare il tutorial. Consentirà a ciascuna delle sezioni di apparire in cima alla sezione del piè di pagina che aggiungeremo in seguito nel post.

Rimuovi animazione sezione eroe

Per assicurarci che il piè di pagina rimanga nascosto fino alla fine della pagina, rimuoveremo anche tutte le animazioni della sezione. Apri la sezione degli eroi e rimuovi l'animazione.

• Stile di animazione: nessuno

Estendi l'animazione a tutte le sezioni della pagina

Estendi gli stili di animazione a tutte le sezioni della pagina.

3. Modifica l'ultima sezione della pagina

Cambia colore di sfondo

Passa all'ultima sezione della pagina e cambia il colore di sfondo.

• Colore di sfondo: #f2f2f2

4. Aggiungi la sezione regolare n. 1 in fondo alla pagina

Impostazioni della sezione

Colore di sfondo

Come puoi notare nell'anteprima di questo post, il piè di pagina apparirà sotto un divisore di sezione. A questo divisore di sezione dedicheremo una nuova sezione in fondo alla nostra pagina. Apri le impostazioni della sezione e usa un colore di sfondo completamente trasparente. Ciò consentirà al piè di pagina di essere visualizzato attraverso il contenitore della sezione, anche se la sua posizione sarà al di sotto di esso.

• Colore di sfondo: rgba(0,0,0,0)

Divisore superiore

Passa alla scheda design della sezione e aggiungi un divisore superiore a tua scelta.

• Stile divisore: trova nell'elenco
• Altezza divisore: 250 px (desktop), 150 px (tablet), 100 px (telefono)
• Ripetizione orizzontale divisore: 2x

Indice Z

Anche questa nuova sezione necessita di un indice z aumentato.

• Indice Z: 3

5. Aggiungi la sezione regolare n. 2 in fondo alla pagina

Impostazioni della sezione

Colore di sfondo

È ora di creare la sezione piè di pagina! Aggiungi un'altra nuova sezione normale in fondo alla pagina e seleziona un colore di sfondo a tua scelta.

• Colore di sfondo: #202332

Dimensionamento

Vai alla scheda design e assicurati che la larghezza sia "100%".

• Larghezza: 100%

Spaziatura

Dovremo anche aumentare l'imbottitura superiore della sezione.

• Imbottitura superiore: 500 px

Indice Z

L'indice z che stiamo assegnando a questa sezione è inferiore a quello delle altre sezioni della pagina. Questo ci aiuterà a nascondere la sezione fino a quando non saremo in fondo alla pagina.

• Indice Z: 2

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura delle colonne

Successivamente apri le impostazioni della colonna 1 e aggiungi un po' di riempimento a sinistra.

• Imbottitura sinistra: 20px

Bordo destro della colonna

Aggiungi anche un bordo destro alla colonna.

• Larghezza bordo destro: 1px
• Colore bordo destro: #515151

Copia incolla stili di colonna

Applica le modifiche a tutte le colonne estendendo gli stili o utilizzando l'opzione copia-incolla.

Aggiungi modulo immagine alla colonna 1

Carica immagine

È ora di iniziare ad aggiungere moduli! Aggiungi un nuovo modulo immagine alla prima colonna e carica il tuo logo.

Dimensionamento

Passa alla scheda Design e modifica la larghezza tra le diverse dimensioni dello schermo.

• Larghezza: 35% (Desktop), 30% (Tablet), 25% (Telefono)
• Allineamento del modulo: a sinistra

Spaziatura

Aggiungi anche un margine inferiore.

• Mostra spazio sotto l'immagine: Sì
• Margine inferiore: 50 px

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto

Alla seconda colonna! Aggiungi un primo modulo di testo con alcuni contenuti a tua scelta.

Impostazioni testo

Modifica le impostazioni del testo.

• Carattere del testo: Nunito Sans
• Peso del carattere del testo: semi grassetto
• Colore del testo: #ffffff
• Dimensione del testo: 19px

Spaziatura

E aggiungi un margine superiore e inferiore personalizzato su diverse dimensioni dello schermo.

• Margine superiore: 15 pixel (desktop e tablet), 10 pixel (telefono)
• Margine inferiore: 15 pixel (desktop e tablet), 10 pixel (telefono)

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Aggiungi un secondo modulo di testo alla seconda colonna e inserisci alcuni contenuti a tua scelta.

Aggiungi collegamento

Aggiungi un collegamento che corrisponda all'elemento del piè di pagina.

• URL collegamento modulo: #

Impostazioni testo

Modificare le impostazioni del testo successivamente.

• Carattere del testo: Nunito Sans
• Colore del testo: #dbdbdb
• Dimensione del testo: 17px

Spaziatura

E aggiungi un'imbottitura superiore e inferiore personalizzata su schermi di diverse dimensioni.

• Margine superiore: 15 pixel (desktop e tablet), 10 pixel (telefono)
• Margine inferiore: 15 pixel (desktop e tablet), 10 pixel (telefono)

Clona il modulo di testo n. 2 tutte le volte necessarie

Clona il secondo modulo di testo nella colonna 2 tutte le volte necessarie.

Modifica contenuto

Assicurati di modificare il contenuto.

Cambia link

Insieme ai link.

• URL collegamento modulo: #

Clona moduli nella colonna 2 e posizionali nelle colonne rimanenti

Una volta completata la seconda colonna, puoi clonare entrambi i moduli fino al numero di volte necessario e posizionare i duplicati nelle due colonne rimanenti della riga.

Modifica contenuto

Modificare il contenuto di ogni duplicato.

Cambia link

Insieme al collegamento.

• URL collegamento modulo: #

6. Rendi la sezione n. 2 fissata in fondo alla pagina

Aggiungi CSS personalizzato

Ora, per creare la rivelazione dello scorrimento, ci assicureremo che la sezione del piè di pagina si attacchi alla parte inferiore della nostra pagina aggiungendo due righe di codice CSS all'elemento principale della sezione.

position: fixed;
bottom: 0;

7. Aggiungi il margine inferiore alla sezione n. 1 per creare un effetto rivelatore

Aggiungi margine inferiore su diverse dimensioni dello schermo

Avremo anche bisogno di uno spazio nella parte inferiore della nostra pagina che consentirà di visualizzare il piè di pagina. Apri la sezione contenente il divisore di sezione e aggiungi un margine inferiore su diverse dimensioni dello schermo e il gioco è fatto!

• Margine inferiore: 400 px (desktop), 700 px (tablet), 800 px (telefono)

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un bellissimo scorrimento del piè di pagina rivela sotto i divisori di sezione per creare un effetto unico. Questo è un ottimo modo per rendere interattivo qualsiasi piè di pagina e attirare l'attenzione sugli elementi elencati nel piè di pagina. Speriamo che questo tutorial ti ispiri a creare anche il tuo piè di pagina divisore di sezione! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.