Come aggiungere disegni di sfondo creativi alla barra del piè di pagina inferiore di Divi

La barra del piè di pagina inferiore di Divi è una parte piccola ma significativa del tuo sito web. E con alcuni layout di pagina, potrebbe essere necessario aggiungere un tocco finale creativo a quella barra in basso.

In questo tutorial, ti mostrerò come aggiungere design di sfondo personalizzati per la barra del piè di pagina inferiore di Divi. Eliminando il colore di sfondo predefinito della barra del piè di pagina inferiore e aggiungendo un margine personalizzato a una sezione, puoi sfruttare le impostazioni di progettazione di una sezione per creare fantastici disegni di sfondo.

Iniziamo.

Una sbirciata

Ecco un'anteprima di alcuni progetti di esempio che puoi creare con questo tutorial.

Personalizzazione della barra del piè di pagina inferiore in Personalizzatore temi

Prima di poter aggiungere sfondi personalizzati dietro la nostra barra del piè di pagina inferiore, dobbiamo eliminare il colore di sfondo predefinito utilizzato.

Vai al personalizzatore del tema e vai a Piè di pagina> Barra in basso. Quindi cambia il colore di sfondo in modo che sia completamente trasparente.

Potresti non notare un grande cambiamento nell'anteprima perché c'è ancora un colore di sfondo del piè di pagina dietro la barra in basso. Il colore di sfondo del piè di pagina può essere modificato in Piè di pagina > Layout, ma è una buona idea lasciare attivo quel colore di sfondo come fallback. Lo sfondo personalizzato verrà aggiunto alla barra inferiore utilizzando una sezione pagina per pagina. Quindi avere questo sfondo assicurerà che il contenuto della barra in basso abbia uno sfondo sulle pagine che non hanno lo sfondo personalizzato in atto.

Puoi anche cambiare il colore del testo della barra inferiore e il colore dell'icona social in bianco se prevedi di avere uno sfondo più scuro. Ciò assicurerà che il contenuto sia più leggibile.

Creazione del progetto di sfondo della sezione per la barra inferiore

Ora che la barra inferiore del piè di pagina ha uno sfondo trasparente, siamo pronti per progettare lo sfondo della nostra sezione e posizionarlo dietro la barra.

Se non l'hai già fatto, crea una nuova pagina e scegli "Costruisci da zero". Quindi inserire un layout a una colonna per la riga della sezione.

Non è necessario aggiungere un modulo alla riga poiché avremo bisogno solo della sezione e della riga per i disegni di sfondo.

Quindi, vai alle impostazioni della riga e aggiungi un po' di spazio come segue:

Margine personalizzato: 0 px in alto, 0 px in basso
Imbottitura personalizzata (desktop): 80 px in alto, 80 px in basso
Imbottitura personalizzata (tablet): 100 px in alto, 100 px in basso

Questa spaziatura è necessaria per dare una certa altezza alla nostra sezione preservando lo spazio necessario per i divisori di sezione che aggiungeremo per il nostro design di sfondo.

Ora vai alle impostazioni della sezione e aggiorna la spaziatura come segue:

Margine personalizzato (desktop): -55px inferiore
Margine personalizzato (tablet): -94 px inferiore
Imbottitura personalizzata: 0px in alto, 0px in basso

Il margine inferiore -55px tira la barra inferiore nell'area della sezione in modo che qualsiasi disegno aggiungiamo alla nostra sezione si trovi dietro la nostra barra inferiore. La barra inferiore per impostazione predefinita è alta 54 px sul desktop e alta circa 94 px sul tablet, ecco perché è necessario un margine negativo maggiore per il tablet.

L'eliminazione dell'imbottitura superiore e inferiore massimizza lo spazio necessario per il divisore di sezione che aggiungeremo in seguito.

Aggiunta del divisore inferiore

Quindi, aggiungi un divisore inferiore alla sezione per inquadrare il contenuto del piè di pagina come segue:

Stile divisore inferiore: vedi screenshot
Colore divisore: #121212
Altezza divisore: 120 px (desktop), 150 px (tablet), 150 px (smartphone)
Ripetizione orizzontale divisore: 0,9x (desktop), 0,5x (tablet), 0,5x (smartphone)
Flip divisore: verticale

In questo momento, il contenuto della barra inferiore (il testo e le icone social) viene nascosto dietro il divisore anche se la disposizione del divisore è impostata su sotto il contenuto della sezione. Questo perché tecnicamente il piè di pagina in basso non fa parte del contenuto della sezione. Per risolvere questo problema, dobbiamo aggiungere uno z-index personalizzato alla nostra sezione in modo che si trovi dietro il piè di pagina inferiore.

Nella scheda Avanzate, aggiungi il seguente frammento CSS personalizzato all'Elemento principale:

z-index: 0;

Ora il contenuto della barra del piè di pagina si troverà sopra la tua sezione e hai un bel design di sfondo che incornicia la barra del piè di pagina.

E si adatterà bene anche sui dispositivi mobili.

Con questa struttura di base in atto hai un bel design di sezione su cui costruire. Con questo in mente, vai avanti e salva questa sezione nella tua libreria in modo da poter utilizzare questa struttura come punto di partenza per esplorare i progetti ora.

Ora sei pronto per esplorare nuovi design. È possibile modificare il divisore inferiore in stili e colori diversi per creare innumerevoli design di cornici di sfondo. Potrebbe essere necessario aggiungere la regolazione dell'altezza del divisore e dei valori di ripetizione orizzontale a seconda dello stile del divisore scelto.

Ecco alcuni esempi.

Utilizzo del divisore superiore con un gradiente di sfondo personalizzato

L'uso di un singolo divisore inferiore come design della cornice di sfondo per il piè di pagina inferiore è in qualche modo limitante. Ma se usi un divisore superiore come design della cornice, puoi utilizzare una sfumatura di sfondo personalizzata per la tua sezione. Questo aprirà nuove porte da esplorare.

Vai alle impostazioni della sezione e imposta lo stile del divisore inferiore su nessuno. Quindi aggiungi un gradiente di sfondo come sfondo della sezione.

Ora puoi aggiungere uno stile di divisore superiore alla tua sezione per creare un nuovo look.

Ecco alcuni esempi di design possibili semplicemente cambiando lo sfondo sfumato e lo stile del divisore.

Combinazione di divisori con sfumature di sfondo per un design del bordo multicolore

Ora è il momento di fare un salto di qualità. Ricorda, ci sono molte possibilità per creare design di sfondo unici all'interno di sezioni e righe. Quindi, per quest'ultimo esempio, ti mostrerò come combinare queste funzionalità per creare un design completamente unico.

Per iniziare subito questo design, vai avanti e usa la sezione che hai salvato nella tua libreria facendo clic per aggiungere una nuova sezione nel visual builder, selezionando la scheda aggiungi dalla libreria e scegliendo il layout della sezione.

Una volta che la sezione è stata aggiunta alla pagina, siamo pronti per la personalizzazione.

Per cominciare, vai alle impostazioni della sezione e aggiorna quanto segue:

Colore sfondo sfumato sinistro: #29c4a9
Colore sfondo sfumato sinistro: #2b87da

Direzione gradiente: 90 gradi
Posizione di partenza: 50%
Posizione finale: 0%

Ora aggiungi un divisore superiore come segue:

Stile divisore superiore: vedi screenshot
Colore divisorio: #ffffff
Altezza divisore: 120 px (desktop), 150 px (tablet), 150 px (smartphone)
Ripetizione orizzontale divisore: 0,9x (desktop), 0,5x (tablet), 0,5x (smartphone)
Flip divisore: verticale

Queste impostazioni del divisore rispecchiano completamente il divisore inferiore in modo che crei un bordo che circonda il divisore inferiore. Poiché il divisore stesso è bianco, questo dà l'impressione che il gradiente di sfondo sia un'estensione del divisore inferiore.

Ora vai alle impostazioni della riga e aggiungi un gradiente di sfondo come segue:

Colore sfondo sfumato sinistro: #df52ff
Colore sfondo sfumato sinistro: #2b87da

Direzione gradiente: 90 gradi
Posizione di partenza: 50%
Posizione finale: 0%

Per equalizzare la larghezza di ogni segmento di colore per lo sfondo, assegna alla riga una larghezza personalizzata del 50%.

Ecco il disegno definitivo!

Pensieri finali

Avere un design di sfondo personalizzato per la barra del piè di pagina inferiore di Divi può essere un'aggiunta rinfrescante alla tua pagina. Tutto ciò che serve sono alcune personalizzazioni a una sezione che si trova nella parte inferiore della pagina. Sfortunatamente, il design è limitato a una singola pagina e non potrebbe essere applicato a tutto il sito. Ecco perché il colore di sfondo del piè di pagina viene utilizzato come fallback. Ma una volta salvata la sezione nella tua libreria, puoi facilmente rilasciarla in qualsiasi pagina tu voglia. Puoi anche aggiungere a uno qualsiasi dei nostri layout predefiniti da utilizzare nel tuo prossimo progetto. Tutto quello che devi fare è assicurarti di aggiungere la sezione in fondo alla pagina. Spero che lo troverai utile!

Inoltre, potresti essere interessato a inquadrare il tuo menu di navigazione usando una tecnica simile.

Non vedo l'ora di sentirti nei commenti.

Saluti!