Ti piacerebbe creare un piè di pagina appiccicoso con DIVI che riveli completamente quando scorri verso il basso?
Aggiunta di un piè di pagina appiccicoso al tuo sito web può portare quel piccolo tocco in più che stavi cercando sito web. L'effetto "Rivela", che consente di visualizzare il piè di pagina durante lo scorrimento verso il basso, darà un design molto affascinante alle tue pagine web.
Di solito questo effetto richiede CSS personalizzati che sono limitanti e difficili da usare. Ma grazie a DIVI puoi ottenerlo facilmente.
In questo tutorial, ti mostreremo come creare un effetto Rivela sul tuo piè di pagina appiccicoso. Bastano pochi semplici passaggi.
Cominciamo!
Panoramica
Ecco una breve panoramica del footer appiccicoso con effetto Reveal che creeremo in questo tutorial.
Crea un nuovo modello di piè di pagina
visita Divi >> Generatore di temi dalla dashboard di WordPress.
Lì, fai clic su "Aggiungi un piè di pagina globale"
Quindi scegli "Costruire un footer globale"
In questo tutorial, utilizzeremo un layout predefinito per accelerare il processo di creazione, ma puoi anche farlo da zero. Per fare ciò, fare clic su "Carica dalla libreria".
Sotto la finestra pop-up Carica dalla libreria, trova e usa il layout " Marina Chi siamo Pagina » dal pacchetto di layout Marina.
Una volta caricato il layout, elimina tutte le sezioni tranne la sezione del piè di pagina. Useremo questa sezione del piè di pagina per aggiungere l'effetto Rivela.
Aggiungi l'effetto Rivela e rendi il piè di pagina appiccicoso
Rendi il piè di pagina appiccicoso
Vedi anche: Come creare un menu scorrevole e a pressione in DIVI?
Per prima cosa, dobbiamo rendere il piè di pagina appiccicoso. Per fare ciò, apri le impostazioni della sezione e fai clic sulla scheda avanzato. Sotto "Effetti di scorrimento", modificare le impostazioni come segue:
- Posizione appiccicosa: attenersi al fondo
Aggiorna l'indice Z per lo stato appiccicoso
Successivamente, dobbiamo assegnare alla nostra sezione footer uno z-index di 0 quando la sezione è in stato permanente. Ciò consentirà alla sezione di rimanere dietro altre sezioni o elementi nel corpo della pagina durante lo scorrimento.
Per fare ciò, aggiorna la posizione dell'indice Z facendo clic sull'icona adesiva accanto all'opzione Indice Z. Quindi aggiorna l'indice Z a 0.
- Indice Z (appiccicoso): 0
Aggiorna l'indice Z del segnaposto del piè di pagina appiccicoso
Quando a un elemento viene assegnata una posizione permanente in Divi, viene creato automaticamente anche un elemento segnaposto duplicato. Ciò fornisce la funzionalità necessaria per posizionare e progettare elementi appiccicosi utilizzando Divi Builder.
Vedi anche: Come creare un'intestazione globale con il generatore di temi di Divi
In questo caso, viene creato un segnaposto della sezione del piè di pagina con un indice z predefinito di 1. Non vogliamo che la nostra sezione del piè di pagina appiccicosa effettiva (ora con un indice Z di 0) dietro la sezione del segnaposto, quindi è necessario aggiornare il Indice Z del segnaposto a -1.
Per fare ciò, prima aggiungi una classe CSS personalizzata alla sezione del piè di pagina come segue:
- Classe CSS: sticky-footer-reveal
Quindi apri le impostazioni della pagina utilizzando il menu delle impostazioni di Costruttore di temi.
Vai alla scheda " Avanzate " e inserisci il seguente CSS nella casella Personalizza CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Ciò costringerà la sezione segnaposto a rimanere dietro il piè di pagina appiccicoso.
Salva modifiche
Al termine, salva le modifiche apportate al modello del piè di pagina.
Salva anche le modifiche di Divi Theme Builder.
Risultato finale
Per vedere il risultato finale, visualizza una pagina e scorri.
Scarica DIVI ora!!!
Conclusione
In Divi, aggiungendo un piè di pagina adesivo al tuo file sito web non richiede un plugin o complicati CSS personalizzati. Utilizzando il costruttore temi, puoi facilmente creare un modello di piè di pagina con Rivela l'effetto tra qualche minuto.
Si spera che questo dia al design del tuo piè di pagina una spinta sottile con un'interazione attraente che il Visitatori apprezzerà. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Vedi anche le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
