Come utilizzare i moduli Blurb come elementi a piè di pagina con Divi

I moduli Blurb sono un'ottima scelta per i piè di pagina Divi. Possono visualizzare immagini o icone in diversi layout e hanno molte personalizzazioni. Sono particolarmente ideali per collegamenti con icone per creare punti elenco con stile. Fortunatamente, non è difficile creare questi tipi di collegamenti utilizzando i moduli blurb Divi. In questo articolo, vedremo come utilizzare i moduli blurb per gli elementi del piè di pagina nei tuoi piè di pagina Divi.

Anteprima

Prima di iniziare, diamo un'occhiata a come apparirà il nostro footer su desktop e smartphone.

Desktop con elementi a piè di pagina dei moduli Blurb

Ecco la versione desktop del footer che creeremo. Stiamo usando le sfocature nell'angolo in alto a destra per creare collegamenti.

Telefono con elementi a piè di pagina dei moduli Blurb

Ecco come apparirà il footer con le nostre blurb su uno smartphone.

Scarica un modello di piè di pagina Divi

Innanzitutto, avrai bisogno di un modello di piè di pagina per Divi Theme Builder. Puoi crearne uno tuo o utilizzare uno dei piè di pagina gratuiti forniti da Elegant Themes nel blog. Puoi trovarli cercando nel blog "piè di pagina gratuito". Scarica e decomprimi la cartella sul tuo computer.

Per i miei esempi, sto usando il modello gratuito di intestazione e piè di pagina per il pacchetto layout di intelligenza artificiale di Divi.

Iscriviti al nostro canale Youtube

Carica il tuo modello di piè di pagina Divi

Per caricare il tuo file JSON, vai su Divi > Theme Builder nella dashboard di WordPress. Seleziona Portabilità e fai clic sulla scheda Importa della modale che si apre. Fai clic su Scegli file e vai al file sul tuo computer e selezionalo. Fai clic su Importa modelli Divi Theme Builder e attendi che il file venga importato. Elimina l'intestazione se non desideri utilizzarla. Fare clic su Salva modifiche .

Ora sei pronto per personalizzare il tuo nuovo footer Divi. Puoi modificare il piè di pagina da qui sul back-end, oppure puoi selezionarlo all'interno del Visual Builder sul front-end. Modificherò il piè di pagina sul back-end perché l'intestazione ha un menu personalizzato e si apre nel builder per impostazione predefinita.

Sto anche usando la pagina di destinazione dell'Artificial Intelligence Layout Pack per gli elementi della mia pagina. Il layout e l'intestazione hanno entrambi molte code di progettazione da cui attingere. Mi piace particolarmente il design del menu nel modello di intestazione e piè di pagina di Intelligenza artificiale. Userò tutto questo per aiutarmi a progettare i collegamenti blurb nel piè di pagina.

Usa i moduli Blurb come elementi del piè di pagina

Sostituirò i collegamenti nelle due sezioni intitolate Cosa facciamo e Risorse . Questo ci porterà i link che vogliamo e li evidenzierà con le icone. Userò la prima intestazione e ridurrò il numero di collegamenti. Modelleremo il primo e poi lo cloneremo per creare il resto.

Innanzitutto, elimina i moduli in una delle due colonne. Lo trasformeremo in un layout a due colonne, quindi avremo solo bisogno di una colonna per i nostri moduli blurb come elementi di piè di pagina.

Apri le impostazioni della riga e seleziona un layout a due colonne .

Infine, elimina il modulo di testo che include i collegamenti. Abbiamo solo bisogno del modulo del titolo.

Passa il mouse sull'area in cui desideri aggiungere il modulo e seleziona l' icona più . Scegli il modulo blurb dall'elenco.

Configura il modulo Blurb

Il modulo blurb include un titolo, un corpo del testo e un'immagine. Useremo il titolo come collegamento. Il corpo del testo può essere utilizzato per brevi descrizioni. Lo cancellerò per questo tutorial. Se vuoi usarlo, ti consiglio di mantenere il testo il più breve possibile e di usare solo un paio di sfocature. Al posto dell'immagine, useremo un'icona.

Ho aggiunto il nome del collegamento ed eliminato il corpo del testo. Quindi, seleziona Usa icona in Immagine e icona. Seleziona la tua icona nel selettore di icone. Aggiungi l' URL al campo URL del link del titolo nella sezione Link. Lascia il resto delle impostazioni del collegamento ai valori predefiniti. Questo è tutto ciò che faremo in questa scheda.

• Titolo: il nome del tuo link
• Icona: chiavi doppie
• URL del link del titolo: il tuo link

Nella scheda Design, inserisci #db0eb7 per il colore dell'icona . Imposta la posizione dell'immagine/icona a sinistra.

• Colore icona: #db0eb7
• Posizionamento immagine/icona: a sinistra

Per Larghezza immagine/icona , seleziona Desktop e impostalo su 20px.

• Larghezza immagine/icona del desktop: 20px

Seleziona Telefono in Larghezza immagine/icona e impostalo su 15px.

• Larghezza immagine/icona del telefono: 15px

Imposta la larghezza del bordo dell'immagine/icona su 1px e il colore su # 39c0ed.

• Larghezza bordo immagine/icona: 1px
• Colore bordo immagine/icona: #39c0ed

Aggiungi 10px a tutti e quattro i lati del riempimento immagine/icona .

• Imbottitura immagine/icona: 10px (in alto, in basso, a sinistra, a destra)

Scorri verso il basso fino a Testo del titolo . Imposta il carattere su Archivo e il colore su bianco.

• Carattere del titolo: Archivio
• Colore del testo del titolo: #ffffff

Scorri fino a Spaziatura e aggiungi 14vh al riempimento sinistro .

• Imbottitura desktop, sinistra: 14vh

Seleziona l'icona del telefono e aggiungi 4vh al Left Padding . Questo numero può essere regolato per adattarsi alla lunghezza dei tuoi titoli.

• Imbottitura del telefono, sinistra: 4vh

Scheda Avanzate

Successivamente, aggiungeremo alcuni CSS personalizzati al titolo, quindi è centrato con l'icona. Vai alla scheda Avanzate e aggiungi 12px di riempimento superiore al titolo Blurb.

• Scheda Avanzate Titolo Blurb CSS personalizzato: padding-top:12px

Duplica il modulo Blurb

Quindi, crea tre copie del modulo blurb facendo clic sul pulsante Duplica modulo tre volte. Questo ci consentirà di utilizzare i moduli blurb per gli elementi del piè di pagina al posto dei collegamenti di testo.

Apri il secondo modulo blurb e aggiungi il titolo del link, seleziona una nuova icona e aggiungi l'URL. Apri la scheda Design e cambia il Colore bordo immagine/icona in #db0eb7.

• Titolo: il nome del tuo link
• Icona: chiave singola
• URL del link del titolo: il tuo link
• Colore bordo immagine/icona: #db0eb7

Apri il terzo modulo blurb e aggiungi il titolo del link, seleziona una nuova icona e aggiungi l'URL. Apri la scheda Design e cambia il Colore bordo immagine/icona su # f59910.

• Titolo: il nome del tuo link
• Icona: ingranaggio singolo
• URL del link del titolo: il tuo link
• Colore bordo immagine/icona: #f59910

Apri il quarto modulo blurb e aggiungi il titolo del link, seleziona una nuova icona e aggiungi l'URL. Apri la scheda Design e cambia il Colore bordo immagine/icona in #db0eb7. È già impostato su questo colore perché hai clonato il primo modulo.

• Titolo: il nome del tuo link
• Icona: doppio ingranaggio
• URL del link del titolo: il tuo link
• Colore bordo immagine/icona: #db0eb7

Risultati

Ecco uno sguardo ai nostri moduli blurb Divi come elementi a piè di pagina per entrambe le versioni desktop e telefono del mio layout.

Desktop con elementi a piè di pagina dei moduli Blurb

Ecco come è risultata la nostra versione desktop del footer.

Telefono con elementi a piè di pagina dei moduli Blurb

Ecco come appare il footer su uno smartphone.

Considerazioni finali su come utilizzare gli elementi a piè di pagina dei moduli Blurb

Questo è il nostro sguardo su come utilizzare i moduli blurb per gli elementi del piè di pagina nei tuoi piè di pagina Divi. I blurb sono un'ottima scelta per i collegamenti. Sono semplici da usare e hanno molte opzioni di personalizzazione con immagini e icone. Usa le icone con o senza bordi e ingrandiscile quanto vuoi. Le icone che abbiamo usato qui funzionano perfettamente con il design del menu di intestazione.

Vogliamo sentire da voi. Hai utilizzato i moduli blurbs per gli elementi del piè di pagina sul tuo sito Web Divi? Facci sapere la tua esperienza nei commenti.