Come aggiungere i widget del menu della categoria dei post al piè di pagina globale di Divi?
Pubblicato: 2020-08-12Quando crei un piè di pagina personalizzato all'interno di Divi's Theme Builder, ci sono diversi modi per avvicinarti all'aggiunta degli elementi del piè di pagina. Potresti optare per un piè di pagina basato su modulo, in cui aggiungi elementi del piè di pagina all'interno dei moduli di testo con collegamenti appropriati, ma potresti anche decidere di aggiungere diversi widget di piè di pagina al tuo design, utilizzando il modulo della barra laterale di Divi e modellarli utilizzando il built-in di Divi opzioni. Nel tutorial di oggi, ti mostreremo come procedere con la seconda opzione. Più specificamente, ti mostreremo come aggiungere i widget del menu delle categorie di post al tuo piè di pagina. Lo stile di design che stiamo utilizzando si abbina perfettamente al pacchetto di layout di ricette alimentari. Inizieremo aggiungendo le diverse categorie di post al nostro sito web. Quindi creeremo i menu a piè di pagina all'interno di WordPress. Successivamente, creeremo i nostri widget e, ultimo ma non meno importante, aggiungeremo i widget al nostro piè di pagina Divi personalizzato all'interno del Divi Theme Builder. Potrai anche scaricare gratuitamente il file JSON!
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. Imposta categorie di post per il tuo sito web
Vai alle categorie dei tuoi post
Nella prima parte di questo tutorial, ci assicureremo che tutte le categorie di post siano impostate prima di iniziare ad aggiungerle ai menu a piè di pagina personalizzati. Per farlo, vai alle categorie dei tuoi post all'interno del backend di WordPress.
Imposta la struttura della categoria dei post a tua scelta
Imposta tutte le diverse categorie di post che desideri includere nel piè di pagina se non l'hai già fatto. Per questo tutorial, avremo bisogno di tre diversi gruppi di categorie di post poiché includeremo tre diversi widget di menu di categorie di post nel nostro piè di pagina personalizzato.
2. Crea diversi menu di WordPress di categoria
Vai ai menu
Successivamente, creeremo un menu separato per ogni gruppo di categorie di post. Passa ai menu all'interno delle impostazioni dell'aspetto del tuo sito Web WordPress.
Crea il primo menu a piè di pagina
Aggiungi un primo menu a piè di pagina e assegnandogli un nome riconoscibile.
- Nome del menu: Menu a piè di pagina #1
Aggiungi categorie di post
Aggiungi il tuo primo gruppo di categorie di post a questo nuovo menu.
Crea il secondo e il terzo menu a piè di pagina per altre categorie di post
Fai la stessa cosa per altri due gruppi di categorie di post.
- Nome del menu: Menu a piè di pagina #2
- Nome del menu: Menu a piè di pagina #3
3. Crea widget piè di pagina
Vai ai widget
Ora che abbiamo le nostre categorie di post e i menu delle categorie di post in atto, possiamo inserirli all'interno dei nostri widget dell'area del piè di pagina. Per farlo, vai ai widget nel tuo backend di WordPress.
Aggiungi il menu del piè di pagina n. 1 all'area del piè di pagina n. 1
Lì, aggiungi un primo widget del menu di navigazione alla tua Area piè di pagina n. 1. All'interno del menu di navigazione, seleziona il primo menu a piè di pagina che hai creato nella parte precedente di questo tutorial.
Aggiungi il menu del piè di pagina n. 2 all'area del piè di pagina n. 2
Posiziona il menu della seconda categoria di post nella seconda area a piè di pagina.
Aggiungi il menu del piè di pagina n. 3 all'area del piè di pagina n. 3
E il terzo menu a piè di pagina nell'area del terzo piè di pagina.
Aggiungi post recenti all'area piè di pagina #4
L'ultimo widget di cui abbiamo bisogno, che aggiungeremo alla quarta area a piè di pagina, è il widget dei post recenti. Questo widget mostrerà dinamicamente i tuoi ultimi 5 post recenti come link.
3. Crea un piè di pagina globale all'interno di Divi Theme Builder
Vai al tuo generatore di temi Divi e inizia a creare il modello di piè di pagina
Ora che le nostre categorie di post, i menu delle categorie di post e i widget sono a posto, è ora di passare a Divi! Vai al tuo Divi Theme Builder e inizia a creare un piè di pagina globale o personalizzato.
Impostazioni della sezione
Colore di sfondo
Una volta all'interno del modello di piè di pagina, noterai una sezione. Apri quella sezione e aggiungi un colore di sfondo. Lo stile che utilizziamo in questo design si abbina perfettamente al pacchetto di layout di ricette alimentari, ma l'approccio funzionerà con qualsiasi tipo di design tu scelga.
- Colore di sfondo: #ff7864
Immagine di sfondo
Aggiungi un'immagine di sfondo successiva. Se vuoi usare esattamente lo stesso di questo tutorial, puoi trovarlo nella cartella che puoi scaricare all'inizio di questo tutorial.
- Dimensione immagine di sfondo: adatta
Spaziatura
Passa alla scheda Design della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Sfondo sfumato
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e applica uno sfondo sfumato.
- Colore 1: rgba(10,10,10,0.05)
- Colore 2: rgba(10,10,10,0.18)
Dimensionamento
Passa alla scheda Progettazione della riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza massima: 1680 px
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Impostazioni colonna 1
Spaziatura
Quindi, apri le impostazioni della colonna 1 e aggiungi alcuni valori di riempimento personalizzati nella scheda di progettazione.
- Imbottitura superiore: 5%
- Imbottitura inferiore: 5%
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Frontiera
Stiamo usando un bordo destro anche sul desktop.
- Larghezza bordo destro:
- Desktop: 2px
- Tablet e telefono: 0px
- Colore bordo destro: #ff7864
Impostazioni colonna 2
Spaziatura
Quindi, apri le impostazioni della colonna 2 e applica i seguenti valori di riempimento:
- Imbottitura superiore: 5%
- Imbottitura inferiore: 5%
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Aggiungi modulo immagine alla colonna 1
Carica logo
È ora di aggiungere moduli, iniziando con un modulo immagine nella colonna 1. Carica un logo di tua scelta e modellalo come preferisci.
Aggiungi modulo di testo alla colonna 2
Aggiungi contenuto H2
Nella seconda colonna, stiamo aggiungendo un modulo di testo con alcuni contenuti descrittivi di H2.
Impostazioni testo H2
Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:
- Carattere titolo 2: Cormorant Garamond
- Intestazione 2 Peso del carattere: medio
- Colore testo titolo 2: #ffffff
- Intestazione 2 Dimensione del testo:
- Desktop e tablet: 40 pixel
- Telefono: 35px
- Altezza riga intestazione 2: 1,3 em
Aggiungi riga #2
Struttura della colonna
Alla prossima riga. In questa riga, posizioneremo tutti i nostri widget. Scegli la seguente struttura di colonne:
Colore di sfondo
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e applica un colore di sfondo.
- Colore di sfondo: rgba(10,10,10,0.05)
Dimensionamento
Passa alla scheda Design e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza massima: 1680 px
Spaziatura
Rimuovi anche tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Spaziatura di tutte le colonne
Quindi, apri le colonne singolarmente e applica i seguenti valori di riempimento a ciascuna di esse:
- Imbottitura superiore: 5%
- Imbottitura inferiore: 5%
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Bordo colonna 1
Successivamente, aggiungeremo un bordo alla colonna 1.
- Larghezza bordo destro:
- Desktop e tablet: 2px
- Telefono: 0px
- Colore bordo destro: #ff7864
Bordo colonna 2
Usiamo lo stesso bordo, con alcuni valori reattivi diversi, per la seconda colonna.
- Larghezza bordo destro:
- Desktop: 2px
- Telefono e tablet: 0px
- Colore bordo destro: #ff7864
Bordo colonna 3
E, ultimo ma non meno importante, aggiungeremo anche un bordo destro alla terza colonna.
- Larghezza bordo destro:
- Desktop e tablet: 2px
- Telefono: 0px
- Colore bordo destro: #ff7864
Aggiungi il modulo della barra laterale alla colonna 1
È ora di aggiungere i nostri widget del menu delle categorie di post! Per farlo, utilizzeremo il modulo Sidebar integrato di Divi. Aggiungine uno alla prima colonna della riga.
Seleziona l'area piè di pagina n. 1
Seleziona la prima area del piè di pagina. Questo è collegato al nostro primo menu di categorie di post che abbiamo creato.
- Area widget: Area piè di pagina #1
Disposizione
Passa alla scheda di progettazione del modulo e disabilita il separatore di bordi.
- Mostra separatore bordo: No
Impostazioni del corpo del testo
Modifica anche le impostazioni del testo del corpo.
- Carattere del corpo: Montserrat
- Peso del carattere del corpo: medio
- Colore del corpo del testo: #ffffff
- Dimensione del testo del corpo: 13px
Spaziatura
E completa le impostazioni del modulo aggiungendo un'imbottitura superiore e inferiore alle impostazioni di spaziatura.
- Imbottitura superiore: 5%
- Imbottitura inferiore: 5%
Clona il modulo della barra laterale due volte e posiziona i duplicati nelle colonne 2 e 3
Una volta completato il primo modulo della barra laterale, puoi clonarlo due volte e posizionare i duplicati nelle colonne 2 e 3.
Modifica aree piè di pagina
Modifica l'area del widget per ogni duplicato per visualizzare i diversi menu di categorie di post che hai creato.
- Area widget: Area piè di pagina #2
- Area widget: Area piè di pagina #3
Aggiungi il modulo della barra laterale alla colonna 4
Ora, nell'ultima colonna, stiamo aggiungendo un nuovo modulo della barra laterale.
Seleziona l'area piè di pagina #4
In questo modulo, selezioniamo la quarta area a piè di pagina che abbiamo creato contenente i nostri post recenti.
- Area widget: Area piè di pagina #4
Impostazioni del testo del titolo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del titolo come segue:
- Carattere del titolo: Cormorant Garamond
- Colore del testo del titolo: #ffffff
- Dimensione del testo del titolo: 30px
Impostazioni del corpo del testo
Apporta anche alcune modifiche alle impostazioni del testo del corpo.
- Carattere del corpo: Montserrat
- Peso del carattere del corpo: medio
- Colore del corpo del testo: #dddddd
- Dimensione del testo del corpo: 13px
Spaziatura
E completa le impostazioni del modulo e questo tutorial aggiungendo un'imbottitura personalizzata in alto e in basso alle impostazioni di spaziatura del modulo. Questo è tutto! Assicurati di salvare tutte le modifiche di Divi Theme Builder prima di visualizzare il risultato sul tuo sito web.
- Imbottitura superiore: 5%
- Imbottitura inferiore: 5%
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 come combinare Divi Theme Builder con i widget footer di WordPress e il modulo Divi Sidebar. Più specificamente, ti abbiamo mostrato come aggiungere i widget del menu delle categorie di post al tuo piè di pagina globale per rendere più facile il viaggio di navigazione dei tuoi visitatori. Questo approccio ti aiuterà a modellare gli elementi del piè di pagina utilizzando le opzioni integrate di Divi mantenendo i menu e i widget del piè di pagina all'interno del backend di WordPress. Sei stato anche in grado di scaricare il file JSON gratuitamente! 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.