Come creare una barra del piè di pagina adesiva con le opzioni adesive di Divi
Pubblicato: 2021-01-20Se stai cercando un modo per aggiungere un CTA che segua i tuoi visitatori mentre navigano nel tuo sito web, potresti prendere in considerazione l'idea di utilizzare una barra a piè di pagina. Una barra appiccicosa viene utilizzata nella parte inferiore del browser e puoi includere qualsiasi invito all'azione di tua scelta, che si tratti di un pulsante o di informazioni di contatto. Non appena i visitatori scorrono nell'area del piè di pagina della tua pagina, la barra del piè di pagina e il design del piè di pagina si fonderanno mentre cambiano gli stili della barra del piè di pagina adesiva. Questa bellissima estetica potrebbe aiutarti ad aumentare i tassi di conversione sulle tue pagine! Potrai anche scaricare gratuitamente il file JSON del modello.
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il modello di piè di pagina globale
Per mettere le mani sul modello di piè di pagina globale 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 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.
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!
1. Crea un nuovo modello di piè di pagina
Vai a Divi Theme Builder e aggiungi un nuovo piè di pagina globale o personalizzato
Inizia andando al Divi Theme Builder nel backend del tuo sito Web WordPress. Lì, aggiungi un nuovo piè di pagina globale o personalizzato.
Inizia a costruire da zero
Inizia a creare il modello del piè di pagina da zero.
2. Crea il design del piè di pagina
Impostazioni della sezione
Colore di sfondo
Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri quella sezione e applica un colore di sfondo nero.
- Colore di sfondo: #000000
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Colore di sfondo
Senza ancora aggiungere moduli, apri le impostazioni della riga e cambia il colore di sfondo.
- Colore di sfondo: #ea6c01
Dimensionamento
Passa alla scheda Design della riga e modifica successivamente le impostazioni di dimensionamento.
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza: 90%
- Larghezza massima: 2580 px
- Allineamento righe: Centro
Spaziatura
Aggiungi un'imbottitura personalizzata in alto e in basso anche su schermi di dimensioni più piccole.
- Imbottitura superiore: 5px (solo tablet e telefono)
- Imbottitura inferiore: 5px (solo tablet e telefono)
Frontiera
Quindi, aggiungi alcuni angoli arrotondati reattivi alle impostazioni del bordo.
- Tutti gli angoli:
- Desktop: 30px
- Tablet e telefono: 15px
straripamenti
E per assicurarci di poter creare sovrapposizioni più avanti nel tutorial, imposteremo gli overflow di riga su visibili.
- Overflow orizzontale: visibile
- Overflow verticale: visibile
Visibilità colonna 1 e 3
Per evitare che vengano visualizzati troppi elementi della barra del piè di pagina su schermi di dimensioni inferiori, nasconderemo la prima e l'ultima colonna della nostra riga sia sul tablet che sul telefono.
Aggiungi modulo Blurb alla colonna 1
Aggiungi contenuto
È ora di aggiungere moduli, iniziando con un modulo Blurb nella colonna 1. Aggiungi del contenuto a tua scelta.
Seleziona icona
Seleziona un'icona successiva.
Impostazioni icona
Passa alla scheda di progettazione del modulo e modella l'icona di conseguenza:
- Colore icona: #f5d72e
- Icona del cerchio: Sì
- Colore del cerchio: #000000
- Posizionamento immagine/icona: in alto
- Allineamento immagine/icona: centro
- Usa dimensione carattere icona: Sì
- Dimensione carattere icona: 32px
Impostazioni testo
Quindi, modifica le impostazioni del testo.
- Allineamento del testo: Centro
- Colore del testo: chiaro
Impostazioni del testo del titolo
Apporta anche alcune modifiche alle impostazioni del testo del titolo.
- Carattere del titolo: Poppins
- Colore del testo del titolo: #000000
Impostazioni del corpo del testo
Modifica anche le impostazioni del testo del corpo.
- Carattere del corpo: Poppins
- Peso del carattere del corpo: Ultra grassetto
- Dimensione del testo del corpo: 20px
Dimensionamento
Metti la larghezza del contenuto su "100%" nelle impostazioni di dimensionamento successivo.
- Larghezza contenuto: 100%
Spaziatura
Per creare una sovrapposizione, aggiungi un margine superiore negativo alle impostazioni di spaziatura.
- Margine superiore: -60 px
Animazione
E completa le impostazioni del modulo rimuovendo l'animazione dell'icona nelle impostazioni dell'animazione.
- Animazione immagine/icona: nessuna animazione
Clona modulo Blurb e posiziona duplicato nella colonna 3
Dopo aver completato il primo modulo Blurb nella colonna 1, clonalo una volta e posiziona il duplicato nella colonna 3.
Cambia contenuto e icona
Modificare il contenuto e l'icona per il duplicato.
Aggiungi modulo Blurb alla colonna 2
Seleziona icona
Quindi, aggiungi un nuovo modulo Blurb alla colonna 2. Lascia vuota la casella del contenuto e seleziona un'icona a tua scelta.
Colore di sfondo
Aggiungi un colore di sfondo successivo.
- Colore di sfondo: #000000
Impostazioni icona
Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona di conseguenza:
- Colore icona: #ffffff
- Posizionamento immagine/icona: in alto
- Allineamento immagine/icona: centro
- Usa dimensione carattere icona: Sì
- Dimensione carattere icona: 30px
Dimensionamento
Successivamente, apporta alcune modifiche alle impostazioni di dimensionamento.
- Larghezza: 70px
- Allineamento del modulo: Centro
- Altezza: 40 px
Spaziatura
Quindi, applica margini personalizzati e valori di riempimento su diverse dimensioni dello schermo.
- Margine superiore: -20 px (solo tablet e telefono)
- Imbottitura superiore: 5px
- Imbottitura inferiore: 0px
Frontiera
Quindi, aggiungi alcuni angoli arrotondati alle impostazioni del bordo.
- Tutti gli angoli: 10px
Animazione
E rimuovi l'animazione predefinita nelle impostazioni di animazione.
- Animazione immagine/icona: nessuna animazione
Aggiungi modulo di testo alla colonna 2
Aggiungi contenuto
Il prossimo e ultimo modulo di cui abbiamo bisogno in questa riga è un modulo di testo nella colonna 2. Aggiungi del contenuto a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Peso del carattere del testo: semi grassetto
- Dimensione del testo: 18px
- Altezza riga di testo: 1,8 em
- Allineamento del testo: Centro
Aggiungi riga #2
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere moduli, apri le impostazioni della riga, vai alla scheda design e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 2
- Larghezza massima: 2580 px
Spaziatura
Aggiungi un margine superiore e inferiore successivo.
- Margine superiore: 50 px
- Margine inferiore: 50 px
Aggiungi modulo immagine alla colonna 1
Carica immagine
Aggiungi un modulo immagine alla colonna 1 e carica il tuo logo o qualsiasi tipo di immagine a tua scelta.
Dimensionamento
Passa alla scheda di progettazione del modulo e modifica le impostazioni di dimensionamento come segue:
- Larghezza: 59%
- Allineamento del modulo: a sinistra
Aggiungi modulo di testo alla colonna 2
Aggiungi contenuto H3
Quindi, aggiungi un modulo di testo alla colonna 2 con alcuni contenuti H3 a tua scelta.
Impostazioni testo H3
Modificare le impostazioni del testo H3 del modulo come segue:
- Intestazione 3 Carattere: Poppins
- Intestazione 3 Peso del carattere: grassetto
- Colore testo titolo 3: #6d6d6d
Clona modulo di testo 3x e diffondi tra le colonne 3 e 4
Una volta completato questo modulo di testo, puoi clonare tre volte e distribuire i duplicati sulle due colonne rimanenti della riga.
Modifica contenuto
Assicurati di modificare il contenuto in ogni modulo di testo duplicato.
Aggiungi modulo di testo alla colonna 2
Aggiungi contenuto
Aggiungi un altro modulo di testo proprio sotto il precedente modulo di testo nella colonna 2 e aggiungi alcuni contenuti collegati a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Poppins
- Dimensione del testo: 30px
- Altezza riga di testo: 1em
- Allineamento del testo: a sinistra
- Colore del testo: chiaro
Link alle impostazioni del testo
Cambia anche il colore del testo del collegamento.
- Colore del testo del collegamento: #ffffff
Clona il modulo di testo secondo necessità
Una volta completato il modulo di testo, clonalo tutte le volte che vuoi.
Modifica contenuto
Assicurati di modificare il contenuto e i collegamenti in ogni modulo duplicato.
Aggiungi modulo di testo alla colonna 3
Aggiungi contenuto
Quindi, aggiungi un altro modulo di testo alla colonna 3. Aggiungi alcuni contenuti collegati a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Poppins
- Dimensione del testo: 22px
- Altezza riga di testo: 1em
- Allineamento del testo: a sinistra
- Colore del testo: chiaro
Link alle impostazioni del testo
Modifica anche il colore del testo del collegamento.
- Colore del testo del collegamento: #ea6c01
Clona il modulo di testo secondo necessità
Clona questo modulo tutte le volte che vuoi.
Modifica contenuto
E, naturalmente, modifica il contenuto e i collegamenti secondo necessità.
Aggiungi modulo di testo alla colonna 4
Aggiungi contenuto
Nella colonna 4, aggiungeremo un altro modulo di testo sotto il primo modulo di testo. Aggiungi alcuni contenuti a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Poppins
- Dimensione del testo: 16px
- Altezza riga di testo: 1,8 em
- Allineamento del testo: a sinistra
- Colore del testo: chiaro
Aggiungi Social Media Follow alla Colonna 4
Aggiungi social network di scelta
Quindi, aggiungi un modulo di follow sui social media alla fine della colonna. Aggiungi i social network di tua scelta.
Rimuovi il colore di sfondo di ogni social network individualmente
Rimuovi il colore di sfondo di ogni social network individualmente.
Spaziatura
Torna alle normali impostazioni del modulo, vai alle impostazioni di spaziatura e aggiungi alcuni valori di margine personalizzati.
- Margine superiore: -15px
- Margine sinistro: -8px
Aggiungi riga #3
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni della riga, passa alla scheda Design e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 2
- Equalizza le altezze delle colonne: Sì
- Larghezza massima: 2580 px
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto
Quindi, aggiungi un modulo di testo alla colonna 1. Inserisci alcuni contenuti a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Poppins
- Colore del testo: #595959
- Dimensione del testo: 13px
- Allineamento del testo: Centro
Link alle impostazioni del testo
Modifica anche il colore del testo del collegamento.
- Colore del testo del collegamento: #595959
Clona il modulo di testo due volte e posiziona i duplicati nelle colonne rimanenti
Una volta completato il modulo nella colonna 1, puoi clonarlo due volte e posizionare i duplicati nelle due colonne rimanenti della riga.
Cambia gli allineamenti del testo
Modifica di conseguenza gli allineamenti del testo per ogni modulo di testo duplicato:
- Modulo di testo nella colonna 2:
- Desktop: Centro
- Tablet e telefono: sinistra
- Modulo di testo nella colonna 3:
- Desktop: destra
- Tablet e telefono: sinistra
Modifica contenuto
E cambia anche il contenuto in entrambi i moduli duplicati.
3. Applicare effetti persistenti alla barra del piè di pagina
Apri la riga n. 1 e applica le impostazioni permanenti
Ora che le nostre basi per il design sono a posto, è il momento di applicare l'effetto adesivo. Apri la prima riga della sezione, vai alla scheda Avanzate e applica le seguenti impostazioni permanenti:
- Posizione appiccicosa: attaccati al fondo
- Offset fondo appiccicoso:
- Desktop: 50 pixel
- Tablet e telefono: 20px
Stili appiccicosi di riga
Colore di sfondo
Ora che abbiamo reso la nostra riga appiccicosa, possiamo applicare stili appiccicosi alla riga e a tutti i suoi elementi figlio. Inizia aggiungendo un colore di sfondo appiccicoso alla riga n. 1.
- Colore di sfondo appiccicoso: #000000
Applica stili permanenti ai moduli Blurb nelle colonne 1 e 3
Impostazioni icona
Quindi, apri i Moduli Blurb nelle colonne 1 e 3 e aggiungi un cerchio colorato appiccicoso.
- Colore cerchio adesivo: #ea6c01
Impostazioni del testo del titolo
Aggiungi anche un colore del testo del titolo appiccicoso.
- Colore del testo del titolo appiccicoso: #ea6c01
Applica stili permanenti al modulo Blurb nella colonna 2
Colore di sfondo
Quindi, apri il modulo Blurb nella colonna 2 e applica un colore di sfondo appiccicoso.
- Colore di sfondo appiccicoso: #ea6c01
4. Salva tutte le modifiche al template e al generatore di temi
Una volta completati i passaggi appiccicosi, assicurati di salvare le modifiche al template e al generatore di temi prima di visualizzare il risultato sul tuo sito web!
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 essere creativo con le opzioni adesive di Divi. Più specificamente, ti abbiamo mostrato come creare una barra del piè di pagina adesiva che si fonde con l'area del piè di pagina principale una volta che le persone scorrono verso il basso la pagina in cui si trovano. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello! Se hai domande o suggerimenti, non esitare a 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.