Cum să adăugați modele creative de fundal în bara de subsol de jos a lui Divi

Bara de subsol de jos a lui Divi este o piesă mică, dar semnificativă a site-ului dvs. web. Și cu anumite aspecte de pagină, poate fi necesară adăugarea unei atingeri finale creative la bara de jos.

În acest tutorial, vă voi arăta cum să adăugați modele de fundal personalizate pentru bara de subsol de jos a lui Divi. Eliminând culoarea de fundal implicită a barei de subsol de jos și adăugând o marjă personalizată unei secțiuni, puteți valorifica setările de proiectare ale unei secțiuni pentru a crea modele de fundal grozave.

Să începem.

O scurtă privire

Iată o scurtă prezentare a câtorva exemple de modele pe care le puteți construi cu acest tutorial.

Personalizarea barei de subsol din partea de jos a temei Customizer

Înainte de a putea adăuga fundaluri personalizate în spatele barei de subsol de jos, trebuie să scăpăm de culoarea de fundal implicită utilizată.

Accesați personalizatorul temei și navigați la subsol> Bara de jos. Apoi schimbați culoarea de fundal pentru a fi complet transparentă.

Este posibil să nu observați o schimbare prea mare în previzualizare, deoarece există încă o culoare de fundal de subsol în spatele barei de jos. Culoarea de fundal a subsolului poate fi modificată sub subsol> Aspect, dar este o idee bună să lăsați acea culoare de fundal activă ca rezervă. Fundalul personalizat va fi adăugat la bara de jos folosind o secțiune de la o pagină la alta. Prin urmare, dacă aveți acest fundal, veți asigura că conținutul barei de jos are un fundal pe paginile care nu au fundalul personalizat.

De asemenea, puteți schimba culoarea textului barei de jos și culoarea pictogramei sociale în alb dacă intenționați să aveți un design de fundal mai închis. Acest lucru vă va asigura că conținutul este mai lizibil.

Crearea proiectului de fundal al secțiunii pentru bara de jos

Acum că bara de jos a subsolului are un fundal transparent, suntem gata să proiectăm fundalul secțiunii noastre și să îl poziționăm în spatele barei.

Dacă nu ați făcut-o deja, creați o pagină nouă și alegeți „Construiți de la zero”. Apoi introduceți un aspect cu o coloană pentru rândul secțiunii.

Nu este nevoie să adăugați un modul la rând, deoarece vom avea nevoie doar de secțiune și rând pentru desenele de fundal.

Apoi, accesați setările de rând și adăugați spațiu după cum urmează:

Marjă personalizată: 0 px sus, 0 px jos
Împletire personalizată (desktop): 80 px sus, 80 px jos
Căptușeală personalizată (tabletă): 100 px sus, 100 px jos

Această distanță este necesară pentru a conferi o anumită înălțime secțiunii noastre, păstrând în același timp spațiul necesar pentru separatoarele de secțiuni pe care le vom adăuga pentru proiectarea noastră de fundal.

Acum, accesați setările secțiunii și actualizați spațiul după cum urmează:

Marjă personalizată (desktop): -55px jos
Marja personalizată (tabletă): -94px Partea de jos
Căptușeală personalizată: 0 px sus, 0 px jos

Marja de jos -55px trage bara de jos în zona secțiunii, astfel încât orice design pe care îl adăugăm la secțiunea noastră să stea în spatele barei de jos. Bara de jos implicit are 54px înălțime pe desktop și aproximativ 94px înălțime pe tabletă, de aceea aveți nevoie de o marjă negativă mai mare pentru tabletă.

A scăpa de căptușeala superioară și inferioară maximizează spațiul necesar pentru separatorul de secțiuni pe care îl vom adăuga mai târziu.

Adăugarea divizorului inferior

Apoi, adăugați un divizor inferior în secțiune pentru a încadra conținutul subsolului dvs. după cum urmează:

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor: # 121212
Înălțimea divizorului: 120 px (desktop), 150 px (tabletă), 150 px (smartphone)
Repartitor orizontal Repetare: 0,9x (desktop), 0,5x (tabletă), 0,5x (smartphone)
Flip divizor: vertical

În acest moment, conținutul barei de jos (textul și pictogramele sociale) sunt ascunse în spatele divizorului, chiar dacă aranjamentul divizorului este setat sub conținutul secțiunii. Acest lucru se datorează faptului că subsolul inferior nu face parte din punct de vedere tehnic al conținutului secțiunii. Pentru a remedia acest lucru, trebuie să adăugăm un index z personalizat la secțiunea noastră, astfel încât să stea în spatele subsolului inferior.

Sub fila avansată, adăugați următorul fragment CSS personalizat la Elementul principal:

z-index: 0;

Acum, conținutul barei de subsol va sta deasupra secțiunii dvs. și aveți un design frumos de fundal care încadrează bara de subsol.

Și se va regla frumos și pe mobil.

Cu această structură de bază, aveți la dispoziție un design frumos al secțiunii. Având în vedere acest lucru, continuați și salvați această secțiune în biblioteca dvs., astfel încât să puteți utiliza această structură ca punct de plecare pentru explorarea proiectelor de acum.

Acum sunteți gata să explorați noi modele. Puteți schimba divizorul inferior în diferite stiluri și culori pentru a crea nenumărate modele de cadre de fundal. Este posibil să fie nevoie să adăugați reglarea înălțimii divizorului și a valorilor de repetare orizontală în funcție de stilul divizorului pe care îl alegeți.

Iată câteva exemple.

Utilizarea Divizorului superior cu un gradient de fundal personalizat

Utilizarea unui singur separator de fund ca design al cadrului de fundal pentru subsolul de jos este oarecum limitativă. Dar dacă utilizați un separator superior ca design al cadrului, puteți utiliza un gradient de fundal personalizat pentru secțiunea dvs. Aceasta va deschide noi uși de explorat.

Accesați setările secțiunii și setați stilul de separare inferior la nici unul. Apoi adăugați un gradient de fundal ca fundal al secțiunii.

Acum puteți adăuga un stil divizor de top la secțiunea dvs. pentru a crea un aspect nou.

Iată câteva exemple de modele posibile doar prin schimbarea fundalului de gradient și a stilului divizor.

Combinarea divizoarelor cu gradienții de fundal pentru un design multicolor cu chenar

Acum este timpul să-l ridicăm cu o crestătură. Amintiți-vă, există multe posibilități pentru a crea modele de fundal unice în secțiuni și rânduri. Deci, pentru acest ultim exemplu, vă voi arăta cum să combinați aceste caracteristici pentru a crea un design complet unic.

Pentru a începe acest design, continuați și utilizați secțiunea salvată în bibliotecă făcând clic pentru a adăuga o nouă secțiune în generatorul vizual, selectând adăugarea din fila bibliotecă și alegând aspectul secțiunii.

Odată ce secțiunea a fost adăugată la pagină, suntem gata să personalizăm.

Pentru început, accesați setările secțiunii și actualizați următoarele:

Culoarea din stânga a gradientului de fundal: # 29c4a9
Culoarea din stânga a gradientului de fundal: # 2b87da

Direcția gradientului: 90 grade
Poziția inițială: 50%
Poziție finală: 0%

Acum adăugați un divizor de top, după cum urmează:

Stilul divizorului superior: vezi captura de ecran
Culoare divizor: #ffffff
Înălțimea divizorului: 120 px (desktop), 150 px (tabletă), 150 px (smartphone)
Repartitor orizontal Repetare: 0,9x (desktop), 0,5x (tabletă), 0,5x (smartphone)
Flip divizor: vertical

Aceste setări ale divizorului reflectă complet divizorul inferior, astfel încât să creeze o margine care înconjoară divizorul inferior. Deoarece divizorul în sine este alb, acest lucru lasă impresia că gradientul de fundal este o extensie a divizorului inferior.

Acum, accesați setările rândului și adăugați un gradient de fundal după cum urmează:

Culoarea din stânga a gradientului de fundal: # df52ff
Culoarea din stânga a gradientului de fundal: # 2b87da

Direcția gradientului: 90 grade
Poziția inițială: 50%
Poziție finală: 0%

Pentru a egaliza lățimea fiecărui segment de culoare pentru fundal, dați rândului o lățime personalizată de 50%.

Iată designul final!

Gânduri finale

A avea un design personalizat de fundal pentru bara de subsol din partea de jos a Divi poate fi un plus revigorant pentru pagina dvs. Este nevoie doar de câteva personalizări pentru o secțiune situată în partea de jos a paginii. Din păcate, designul este limitat la o singură pagină și nu ar putea fi aplicat la nivel de site. De aceea, culoarea de fundal a subsolului este utilizată ca rezervă. Dar odată ce salvați secțiunea în biblioteca dvs., o puteți plasa cu ușurință în orice pagină doriți. Puteți chiar să adăugați la oricare dintre aspectele noastre premade pentru a fi utilizate în următorul dvs. proiect. Tot ce trebuie să faceți este să vă asigurați că adăugați secțiunea chiar în partea de jos a paginii. Sperăm că îl veți găsi util!

De asemenea, s-ar putea să fiți interesat să vă încadrați meniul de navigare folosind o tehnică similară.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!