Vuoi creare un footer personalizzato in DIVI?
Una delle parti più importanti del generatore di temi di Divi è la capacità di aggiungere dinamicamente piè di pagina globali alle tue pagine web e ai tuoi post.
Dopo aver progettato un piè di pagina, puoi aggiungerlo automaticamente a qualsiasi tipo di pagina o post che desideri utilizzando il generatore di temi di Divi.
In questo tutorial, ti guideremo passo dopo passo attraverso il processo di creazione e aggiunta di un piè di pagina globale al tuo sito web.
Panoramica
Prima di immergerci nel tutorial, diamo un'occhiata al footer che andremo a progettare.
ufficio
Vai a Divi Theme Builder e aggiungi un piè di pagina globale
- Vai su Divi > Theme Builder e fai clic su " Aggiungi un piè di pagina globale«
- Scegliere " Crea un footer globale«
Personalizza la sezione n. 1
Colore di sfondo
Apri la sezione che trovi nella pagina e cambia il colore di sfondo della sezione.
- Sfondo: #000000
spaziatura
Passa alla scheda Style e quindi modificare le impostazioni di spaziatura per la sezione.
- Margine (superiore, sinistro e destro): 6vw
- Margine interno (sinistra e destra): 30px
confine
Quindi aggiungi un bordo superiore a sinistra e a destra.
- Rettangolo arrotondato in alto a sinistra: 20px
- Rettangolo arrotondato in alto a destra: 20px
Scatola delle ombre
Includere anche un'ombra di riquadro nelle impostazioni della sezione.
- Forza della sfocatura dell'ombra dell'arco: 135px
- Colore carattere sottotitoli: rgba(0,0,0,0.18)
Aggiungi una nuova riga alla sezione
Struttura della colonna
Continua aggiungendo una riga alla tua sezione utilizzando la seguente struttura a colonne:
Aggiungi un modulo di testo alla colonna
Aggiungi un titolo di dimensione H2 (Titolo 2)
Inserisci un modulo di testo con contenuto della taglia H2.
Impostazioni del testo H2
Passa alla scheda di Style del modulo e modificare di conseguenza i parametri del testo H2:
- Carattere dell'intestazione: Poppins
- Intestazione a luce soffusa: semigrassetto
- Allineamento del testo: centrato
- Colore del testo dell'intestazione: #ffffff
- Dimensione testo intestazione: 31px (desktop), 24px (tablet), 18px (telefono)
- Altezza della linea di intestazione: 1,6 em
dimensionamento
Aggiungi anche una larghezza massima al modulo.
- Larghezza massima: 700 pixel
Aggiungi modulo pulsante alla colonna
Aggiungi testo al pulsante
Inserisci un modulo Pulsante appena sotto il modulo Testo nella tua colonna e inserisci un testo a tua scelta.
allineamento
Passa alla scheda di Style del modulo e modificare l'allineamento del pulsante al centro.
- Allineamento pulsanti: centrato
Impostazioni dei pulsanti
Continua personalizzando il pulsante.
- Usa stili personalizzati per Button: Sì
- Dimensione testo pulsante: 12px
- Colore testo pulsante: #000000
- Pulsante sfondo: #FFFFFF
- Pulsante Larghezza bordo: 0 pixel
Leggi anche: Come visualizzare una pagina del blog come un carosello in DIVI
- Raggio bordo pulsante: 100 px
- Spaziatura delle lettere dei pulsanti: 1 px
- Carattere pulsante: Poppins
- Pulsante luce soffusa: semi grassetto
- Pulsante stile copia: TT
spaziatura
Aggiungi anche valori di riempimento personalizzati.
- Margine interno (superiore e inferiore): 14px
- Margine interno: sinistro (40px); Destra (58px)
Sezione 2
Aggiungi una seconda sezione "normale" sotto la precedente.
Colore di sfondo
Cambia colore di sfondo
- Sfondo: #ffffff
spaziatura
Quindi rimuovere tutti i margini interni (superiore e inferiore).
- Margine interno (superiore e inferiore): 0px
confine
Aggiungi anche un raggio di confine alla sezione.
- Rettangolo arrotondato (in alto a sinistra): 20px
- Rettangolo arrotondato (in alto a destra): 20px
Scatola delle ombre
E completa le impostazioni della sezione aggiungendo un'ombra sottile.
- Intensità sfocatura ombra scatola: 135px
- Colore carattere sottotitoli: rgba(0,0,0,0.18)
Aggiungi una nuova riga alla sezione
Struttura della colonna
Dopo aver completato le impostazioni della sezione, aggiungi una nuova riga utilizzando la seguente struttura di colonne:
dimensionamento
Senza ancora aggiungere moduli, apri le impostazioni della riga e modificale come segue:
- Usa larghezza grondaia personalizzata: Sì
- Spaziatura delle colonne: 1
- Armonizzare le altezze delle colonne: Sì
- Larghezza massima: 100%
- Larghezza massima: 100%
spaziatura
Quindi rimuovere i margini interni predefiniti (superiore e inferiore) dalla linea.
- Margine interno (superiore e inferiore): 0px
Spaziatura delle colonne
Continua aprendo le impostazioni della colonna per aggiungere valori di riempimento personalizzati.
- Margine interno (superiore e inferiore): 100px (desktop), 50px (tablet e telefono)
- Margine interno (sinistra e destra): 100px (desktop), 50px (tablet e telefono)
Aggiungi il modulo Testo n. 1 alla colonna
Aggiungi contenuto
Ora possiamo aggiungervi dei moduli. Aggiungi un modulo Testo alla colonna e inserisci il file contenuto de votre choix.
Impostazioni del testo
Passa alla scheda di Style del modulo e modificare di conseguenza i parametri di testo:
- Carattere del testo: Poppins
- Peso del carattere del testo: grassetto
- Colore del testo: #000000
- Dimensione del testo: 17px
- Allineamento del testo: centrato
spaziatura
Quindi aggiungi margini personalizzati (superiore e inferiore).
- Margine superiore: 10 px
- Margine inferiore: 30px
Aggiungi un modulo separatore alla colonna
Appena sotto il modulo Testo, aggiungi un modulo Separatore.
visibilità
Assicurati che l'opzione " Mostra separatore È abilitato
- Mostra separatore: Sì
Linea
Cambia il colore della linea in nero.
- Colore etichetta: #000000
dimensionamento
Modificare anche le impostazioni delle dimensioni dello splitter.
- Larghezza massima: 15%
- Allineamento del testo: centro
Aggiungi il modulo Testo n. 2 alla colonna
Aggiungi contenuto
Continua aggiungendo un altro modulo Testo alla colonna e a contenuto de votre choix.
Aggiungi un collegamento
Inserisci un link alla pagina a cui vuoi fare riferimento questo modulo.
Impostazioni del testo
Quindi passa alla scheda Style e modificare le impostazioni del testo come segue:
- Carattere del testo: Poppins
- Testo a luce soffusa: chiaro
- Testo Colore Testo: #777777
- Testo Dimensione testo: 15 px
- Allineamento del testo: centrato
spaziatura
Aggiungi anche un margine (in alto e in basso).
- Margine (superiore e inferiore): 10 px
Clonare il modulo di testo n. 2 secondo necessità
Una volta completato il secondo modulo Testo, puoi clonarlo tutte le volte che vuoi (a seconda di quanti elementi cliccabili del piè di pagina vuoi includere).
Modifica contenuto e collegamenti
Assicurati di modificare il contenuto del modulo e i collegamenti per ogni duplicato.
Clona due volte l'intera colonna
Una volta completata la colonna e i suoi moduli, puoi clonarla due volte.
Colore di sfondo della colonna 2
Quindi apri le impostazioni per la colonna 2 e cambia il colore di sfondo.
- Sfondo: #f9f9f9
Modifica contenuto e collegamenti
Assicurati di modificare tutti i contenuti e i collegamenti in ogni colonna duplicata.
Aggiungere una nuova colonna
Quindi, aggiungi una quarta colonna alla riga.
Colore di sfondo
Cambia il colore di sfondo della nuova colonna.
- Sfondo: #0fff7
spaziatura
Modificare i margini interni come segue:
- Margine interno (superiore e inferiore): 70px
- Margine interno (sinistra e destra): 50px
Aggiungi il modulo "Seguici sui social media" alla colonna 4
Aggiungi social network
Continua aggiungendo un modulo " Suivez-nous sur les réseaux sociaux nella colonna 4 e inserisci i social network di tua scelta.
Ripristina gli stili delle icone dei social media
Fare clic su ' Reimposta ruoli Elementi Stili per ciascuno dei social network.
allineamento
Quindi passa alla scheda Style e modificare l'allineamento del modulo.
- Allineamento del testo: centro
Impostazioni delle icone
Cambia anche il colore delle icone dei social media.
- Colore icona: #000000
Aggiungi il modulo di ottimizzazione e-mail alla colonna 4
Inserisci una mod " Opzione e-mail "sotto il modulo" Suivez-nous sur les réseaux sociaux«
Cancella contenuto e titolo del modulo
Account email
Quindi aggiungi un account di posta elettronica. Se non aggiungi un account e-mail, il modulo non verrà visualizzato dopo l'uscita dal generatore di temi.
Rimuovi il colore di sfondo
- Usa il colore di sfondo: No
Impostazioni sul campo
Passa alla scheda Style e modificare le impostazioni in loco come segue:
- Campi colore di sfondo: rgba(0,0,0,0)
- Campi colore testo: #000000
- Carattere Champs: Poppins
- Campi dimensione testo: 13px
- Campi larghezza bordo: 1 px
Impostazioni dei pulsanti
Personalizza anche il pulsante del tuo modulo.
- Usa stili personalizzati per Button: Sì
- Dimensione testo pulsante: 12px
- Colore testo pulsante: #000000
- Pulsante sfondo: #FFFFFF
- Larghezza bordo: 0px
- Raggio bordo pulsante: 100 px
- Spaziatura delle lettere dei pulsanti: 1 px
- Carattere pulsante: Poppins
- Pulsante luce fioca: semi grassetto
- Pulsante stile copia: TT
Guarda anche: Come creare un modulo di contatto appiccicoso in DIVI
- Imbottitura pulsanti (superiore e inferiore): 15px
Aggiungi il modulo di testo dinamico alla colonna 4
Il prossimo e ultimo modulo di cui abbiamo bisogno per completare questo progetto è un modulo di testo.
Attiva l'opzione " Usa contenuto dinamico".
Quindi selezionare l'opzione " Data Actuelle".
E modifica le impostazioni del contenuto dinamico come segue:
- Davanti: Copyright ©
- Dopo: | Tutti i diritti riservati
- Formato data: dogana
- Formato data personalizzato: 20 anni
Impostazioni del testo
Quindi, passa alla scheda stile e modifica le impostazioni del testo:
- Carattere del testo: Poppins
- Testo Colore Testo: #000000
- Testo Dimensione testo: 16 px
spaziatura
Completa i parametri del modulo aggiungendo margine e voilà!
- Margine superiore: 50 px
Salva le opzioni globali del footer e del generatore di temi
Una volta terminato, assicurati di salvare il tuo lavoro prima di uscire dal builder. Tema Divi.
Non appena sei fuori dal layout del modello, salva tutte le modifiche al generatore di temi e il gioco è fatto!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato.
Scarica DIVI ora!!!
Conclusione
In questo tutorial, ti abbiamo mostrato quanto sia facile creare un bellissimo footer globale personalizzato con il generatore di temi di Divi.
Ci auguriamo che questo tutorial ti ispiri a creare bellissimi piè di pagina globali per i tuoi prossimi progetti Divi.
Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Tuttavia, puoi anche consultare 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.
...
