Come creare un piè di pagina personalizzato con Divi's Theme Builder

Il Divi Theme Builder segna una nuova era e cambia il modo in cui progettiamo i siti web. Una delle parti più importanti di questa funzione è la possibilità di aggiungere dinamicamente piè di pagina globali alle tue pagine e ai tuoi post. Dopo aver progettato un piè di pagina, puoi aggiungerlo automaticamente a qualsiasi tipo di pagina o post desideri utilizzando il Theme Builder di Divi. Ora, 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. Potrai anche scaricare gratuitamente il file JSON del modello!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al design globale del piè di pagina su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il piè di pagina globale personalizzato

Per mettere le mani sul footer globale personalizzato 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. Vai a Divi's Theme Builder

Inizia andando al Theme Builder nelle opzioni del tema Divi.

2. Aggiungi e crea un piè di pagina globale

Lì, puoi aggiungere un piè di pagina globale dalla tua libreria Divi o iniziare a crearne uno da zero. In questo tutorial, creeremo da zero un piè di pagina personalizzato, quindi vai avanti e scegli la prima opzione.

Aggiungi la sezione n. 1

Colore di sfondo

È ora di iniziare a creare! Apri la sezione che trovi nella pagina e cambia il colore di sfondo della sezione.

• Colore di sfondo: #000000

Spaziatura

Successivamente, modifica le impostazioni di spaziatura della sezione.

• Margine superiore: 6vw
• Margine sinistro: 6vw
• Margine destro: 6vw
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Frontiera

Aggiungi un bordo superiore sinistro e destro successivo.

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

Scatola ombra

Includi anche un'ombra di casella nelle impostazioni della sezione.

• Forza sfocatura ombra scatola: rgba (0,0,0,0.18)
• Colore ombra: rgba(0,0,0,0.18)

Aggiungi nuova riga alla sezione

Struttura della colonna

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

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

Aggiungi un modulo di testo con alcuni contenuti H2.

Impostazioni testo H2

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 di conseguenza:

• Intestazione 2 Carattere: Poppins
• Peso del carattere dell'intestazione 2: semi grassetto
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #ffffff
• Titolo 2: Dimensione testo: 31 px (desktop), 24 px (tablet), 18 px (telefono)
• Altezza riga intestazione 2: 1,6 em

Dimensionamento

Aggiungi anche una larghezza massima al modulo.

• Larghezza massima: 700 px

Aggiungi modulo pulsante alla colonna

Aggiungi copia

Aggiungi un modulo pulsante proprio sotto il modulo testo nella tua colonna e inserisci una copia a tua scelta.

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento del pulsante al centro.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Continua stilizzando il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 12px
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #FFFFFF
• Larghezza bordo pulsante: 0px

• Raggio del bordo del pulsante: 100 px
• Spaziatura tra le lettere dei pulsanti: 1px
• Carattere pulsante: Poppins
• Peso del carattere del pulsante: semi grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 14px
• Imbottitura inferiore: 14px
• Imbottitura sinistra: 40px
• Imbottitura destra: 58px

Aggiungi sezione #2

Colore di sfondo

Alla prossima sezione regolare! Scegli un colore di sfondo per la sezione bianca.

• Colore di sfondo: #ffffff

Spaziatura

Rimuovere tutte le imbottiture superiore e inferiore successivamente.

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

Frontiera

Aggiungi anche un raggio di bordo alla sezione.

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

Scatola ombra

E completa le impostazioni della sezione aggiungendo un'ombra sottile.

• Intensità sfocatura ombra riquadro: 135 px
• Colore ombra: rgba(0,0,0,0.18)

Aggiungi nuova riga alla sezione

Struttura della colonna

Una volta completate le impostazioni della sezione, aggiungi una nuova riga utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

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

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita della riga.

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

Spaziatura delle colonne

Continua aprendo le impostazioni della colonna e aggiungi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 100 px (desktop), 50 px (tablet e telefono)
• Imbottitura inferiore: 100 px (desktop), 50 px (tablet e telefono)
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un normale modulo di testo alla colonna 1 e inserisci del contenuto a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Poppins
• Peso del carattere del testo: grassetto
• Colore del testo: #000000
• Dimensione del testo: 17px
• Allineamento del testo: Centro

Spaziatura

Aggiungi successivamente un margine superiore e inferiore personalizzato.

• Margine superiore: 10px
• Margine inferiore: 30 px

Aggiungi modulo divisore alla colonna

Visibilità

Proprio sotto il modulo di testo, aggiungi un modulo divisore e assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Cambia il colore della linea in nero.

• Colore linea: #000000

Dimensionamento

Modifica anche le impostazioni di dimensionamento del divisore.

• Larghezza: 15%
• Allineamento del modulo: Centro

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

Continua aggiungendo un altro modulo di testo alla colonna.

Aggiungi collegamento

Aggiungi un collegamento alla pagina a cui desideri che questo modulo faccia riferimento.

Impostazioni testo

Quindi, passa alla scheda Design e modifica le impostazioni del testo come segue:

• Carattere del testo: Poppins
• Peso del carattere del testo: leggero
• Colore del testo: #777777
• Dimensione del testo: 15px
• Allineamento del testo: Centro

Spaziatura

Aggiungi anche un margine superiore e inferiore.

• Margine superiore: 10px
• Margine inferiore: 10px

Clona il modulo di testo n. 2 quanto necessario

Una volta completato il secondo modulo di testo nella colonna, puoi clonarlo tutte le volte che ne hai bisogno (a seconda di quanti elementi cliccabili a piè di pagina vuoi includere).

Modifica contenuto e collegamenti

Assicurati di modificare il contenuto del modulo e i collegamenti per ogni duplicato.

Clona l'intera colonna due volte

Una volta completata la colonna e i suoi moduli, puoi clonare l'intera colonna due volte.

Colore di sfondo della colonna 2

Quindi, apri le impostazioni della colonna 2 e cambia il colore di sfondo.

• Colore di sfondo della colonna 2: #f9f9f9

Modifica contenuto e collegamenti

Assicurati di modificare tutti i contenuti e i collegamenti in ogni colonna duplicata.

Aggiungi nuova colonna

Quindi, aggiungi una quarta colonna alla riga.

Colore di sfondo

Cambia il colore di sfondo della nuova colonna.

• Colore di sfondo: #0fffc7

Spaziatura

Insieme ai valori di riempimento della colonna.

• Imbottitura superiore: 70px
• Imbottitura inferiore: 70px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Aggiungi il modulo Segui social media alla colonna 4

Aggiungi social network

Continua aggiungendo un modulo di follow sui social media alla colonna 4.

Ripristina stili di social network

Reimposta gli stili degli elementi per ogni social network che aggiungi.

Allineamento

Quindi, passa alla scheda Progettazione e modifica l'allineamento del modulo.

• Allineamento del modulo: Centro

Impostazioni icona

Modifica anche il colore dell'icona.

• Colore icona: #000000

Aggiungi il modulo di attivazione della posta elettronica alla colonna 4

Rimuovi contenuto

Continua aggiungendo un modulo di attivazione e-mail alla colonna 4 e rimuovi il titolo e il contenuto del corpo.

Account email

Aggiungi un account e-mail dopo. Senza aggiungere l'account e-mail, il modulo non verrà visualizzato una volta uscito dal builder.

Rimuovi colore di sfondo

Continua rimuovendo il colore di sfondo del modulo.

• Usa colore di sfondo: No

Impostazioni dei campi

Passa alla scheda Progettazione e modifica le impostazioni dei campi come segue:

• Colore di sfondo dei campi: rgba(0,0,0,0)
• Colore testo campi: #000000
• Carattere dei campi: Poppins

• Dimensioni del testo dei campi: 13 px
• Larghezza bordo campi: 1px
• Colore bordo campi: #000000

Impostazioni dei pulsanti

Disegna anche il pulsante del tuo modulo.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 12px
• Colore del testo del pulsante: #000000
• Colore di sfondo del pulsante: #FFFFFF
• Larghezza bordo pulsante: 0px

• Raggio del bordo del pulsante: 100 px
• Spaziatura tra le lettere dei pulsanti: 1px
• Carattere pulsante: Poppins
• Peso del carattere del pulsante: semi grassetto
• Stile carattere pulsante: maiuscolo

• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px

Aggiungi modulo di testo dinamico alla colonna 4

Contenuto dinamico

Il prossimo e ultimo modulo di cui abbiamo bisogno per completare questo progetto è un modulo di testo. Abilita l'opzione del contenuto dinamico nella casella del contenuto.

Quindi, seleziona l'opzione "Data corrente".

• Contenuto dinamico: data corrente

E modifica le impostazioni del contenuto dinamico come segue:

• Prima: Copyright ©
• Dopo: | Tutti i diritti riservati
• Formato data: personalizzato
• Formato data personalizzato: 20 anni

Impostazioni testo

Quindi, passa alla scheda Progettazione e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Poppins
• Colore del testo: #000000
• Dimensione del testo: 16px

Spaziatura

Completa le impostazioni del modulo aggiungendo un margine superiore e il gioco è fatto!

• Margine superiore: 50 px

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 tutorial, ti abbiamo mostrato quanto sia facile creare un bellissimo footer globale personalizzato con il nuovo Theme Builder di Divi. Theme Builder e il modulo integrato di Divi e le opzioni di progettazione ti aiutano a risparmiare molto tempo e a creare siti Web straordinari in pochissimo tempo. Speriamo che questo tutorial ti ispiri a creare bellissimi piè di pagina globali per i tuoi prossimi progetti Divi. 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.