Cum să creați o bară de subsol lipicioasă cu opțiunile lipicioase ale lui Divi

Dacă sunteți în căutarea unei modalități de a adăuga un CTA care vă urmărește vizitatorii în timp ce navighează prin site-ul dvs. web, vă recomandăm să alegeți o bară de subsol lipicioasă. O bară de subsol lipicioasă este utilizată în partea de jos a browserului dvs. și puteți include orice îndemn la alegere, indiferent dacă este un buton sau informații de contact. De îndată ce vizitatorii parcurg zona de subsol a paginii dvs., bara de subsol și designul subsolului se vor îmbina în timp ce vor schimba stilurile barei de subsol lipicioase. Această frumoasă estetică vă poate ajuta să creșteți ratele de conversie pe paginile dvs.! Veți putea descărca gratuit fișierul șablon JSON.

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați Șablonul de subsol global GRATUIT

Pentru a pune mâna pe șablonul de subsol global gratuit, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Creați un șablon de subsol nou

Accesați Divi Theme Builder și adăugați un subsol nou global sau personalizat

Începeți accesând Divi Theme Builder din backend-ul site-ului dvs. WordPress. Acolo, adăugați un subsol nou sau personalizat.

Începeți să construiți de la zero

Începeți să construiți șablonul de subsol de la zero.

2. Construiți designul subsolului

Setări secțiune

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și aplicați o culoare de fundal neagră.

• Culoare fundal: # 000000

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și schimbați culoarea de fundal.

• Culoare fundal: # ea6c01

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare în continuare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 90%
• Lățime maximă: 2580 px
• Alinierea rândurilor: centru

Spațiere

Adăugați niște umpluturi personalizate în partea de sus și de jos și pe dimensiuni mai mici ale ecranului.

• Căptușeală superioară: 5 px (numai tabletă și telefon)
• Căptușeală inferioară: 5 px (numai tabletă și telefon)

Frontieră

Apoi, adăugați câteva colțuri rotunjite receptive la setările de margine.

• Toate colțurile:
  • Desktop: 30 px
  • Tabletă și telefon: 15 px

Revărsări

Și pentru a ne asigura că putem crea suprapuneri ulterior pe tutorial, vom seta deversările de rânduri la vizibile.

• Overflow orizontal: Vizibil
• Overflow vertical: vizibil

Coloanele 1 și 3 Vizibilitate

Pentru a preveni apariția prea multor elemente din bara de subsol pe dimensiuni mai mici ale ecranului, vom ascunde prima și ultima coloană din rândul nostru atât pe tabletă, cât și pe telefon.

Adăugați Blurb Module la coloana 1

Adauga continut

Este timpul să adăugați module, începând cu un modul Blurb în coloana 1. Adăugați un conținut la alegere.

Selectați pictograma

Selectați o pictogramă în continuare.

Setări pictograme

Treceți la fila de proiectare a modulului și stilizați pictograma în consecință:

• Culoare pictogramă: # f5d72e
• Pictogramă cerc: Da
• Culoare cerc: # 000000
• Plasare imagine / pictogramă: sus
• Aliniere imagine / pictogramă: centru
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 32 px

Setări text

Apoi, modificați setările de text.

• Aliniere text: centru
• Culoarea textului: deschis

Setări text titlu

Efectuați și câteva modificări la setările textului titlului.

• Titlu Font: Poppins
• Culoare text titlu: # 000000

Setări text corp

Modificați și setările pentru textul corpului.

• Font corp: Poppins
• Greutatea fontului corpului: Ultra Bold
• Dimensiunea textului corpului: 20 px

Dimensionare

Puneți lățimea conținutului la „100%” în setările de dimensionare următoare.

• Lățimea conținutului: 100%

Spațiere

Pentru a crea o suprapunere, adăugați o marjă superioară negativă la setările de spațiere.

• Marja superioară: -60px

Animaţie

Și completați setările modulului eliminând animația pictogramei din setările animației.

• Animație imagine / pictogramă: fără animație

Clonați modulul Blurb și plasați duplicatul în coloana 3

După ce ați finalizat primul modul Blurb din coloana 1, clonați-l o dată și plasați duplicatul în coloana 3.

Schimbați conținutul și pictograma

Schimbați conținutul și pictograma pentru duplicat.

Adăugați Blurb Module în coloana 2

Selectați pictograma

Apoi, adăugați un nou modul Blurb în coloana 2. Lăsați caseta de conținut goală și selectați o pictogramă la alegere.

Culoare de fundal

Adăugați o culoare de fundal în continuare.

• Culoare fundal: # 000000

Setări pictograme

Treceți la fila de proiectare a modulului și modificați setările pictogramei în consecință:

• Culoare pictogramă: #ffffff
• Plasare imagine / pictogramă: sus
• Aliniere imagine / pictogramă: centru
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 30 px

Dimensionare

Apoi faceți câteva modificări la setările de dimensionare.

• Lățime: 70 px
• Alinierea modulului: centru
• Înălțime: 40 px

Spațiere

Apoi, aplicați marjele personalizate și valorile de umplere pentru diferite dimensiuni ale ecranului.

• Marja superioară: -20px (numai tabletă și telefon)
• Căptușeală superioară: 5 px
• Căptușeală inferioară: 0 px

Frontieră

Apoi, adăugați câteva colțuri rotunjite la setările de margine.

• Toate colțurile: 10 px

Animaţie

Și eliminați animația implicită din setările animației.

• Animație imagine / pictogramă: fără animație

Adăugați un modul de text în coloana 2

Adauga continut

Următorul și ultimul modul de care avem nevoie în acest rând este un modul de text din coloana 2. Adăugați un conținut la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Greutatea fontului textului: Semi Bold
• Dimensiune text: 18 px
• Înălțimea liniei textului: 1,8em
• Aliniere text: centru

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga module, deschideți setările rândurilor, accesați fila de proiectare și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Lățime maximă: 2580 px

Spațiere

Adăugați câteva margini de sus și de jos în continuare.

• Marja superioară: 50 px
• Marja inferioară: 50 px

Adăugați modulul de imagine în coloana 1

Incarca imaginea

Adăugați un modul de imagine în coloana 1 și încărcați sigla sau orice fel de imagine la alegere.

Dimensionare

Treceți la fila de proiectare a modulului și modificați setările de dimensionare după cum urmează:

• Lățime: 59%
• Alinierea modulului: stânga

Adăugați un modul de text în coloana 2

Adăugați conținut H3

Apoi, adăugați un modul de text în coloana 2 cu un conținut H3 la alegere.

Setări text H3

Modificați setările de text H3 ale modulului după cum urmează:

• Rubrica 3 Font: Poppins
• Titlul 3 Greutate font: îndrăzneț
• Rubrica 3 Culoarea textului: # 6d6d6d

Clonați modulul de text 3x și răspândiți în coloana 3 și 4

După ce ați finalizat acest modul de text, puteți clona de trei ori și răspândi duplicatele pe cele două coloane rămase ale rândului.

Schimbați conținutul

Asigurați-vă că modificați conținutul din fiecare modul de text duplicat.

Adăugați un modul de text în coloana 2

Adauga continut

Adăugați un alt modul de text chiar sub modulul de text anterior din coloana 2 și adăugați un conținut legat la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Poppins
• Dimensiune text: 30 px
• Înălțimea liniei de text: 1em
• Alinierea textului: stânga
• Culoarea textului: deschis

Setări text link

Schimbați și culoarea textului linkului.

• Culoare text link: #ffffff

Clonați modulul text după cum este necesar

După ce ați finalizat modulul de text, clonați-l de câte ori doriți.

Schimbați conținutul

Asigurați-vă că modificați conținutul și linkurile din fiecare modul duplicat.

Adăugați un modul de text în coloana 3

Adauga continut

Apoi, adăugați un alt modul de text în coloana 3. Adăugați un conținut legat la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Poppins
• Dimensiune text: 22 px
• Înălțimea liniei de text: 1em
• Alinierea textului: stânga
• Culoarea textului: deschis

Setări text link

Modificați și culoarea textului linkului.

• Culoare text link: # ea6c01

Clonați modulul text după cum este necesar

Clonați acest modul de câte ori aveți nevoie.

Schimbați conținutul

Și, desigur, schimbați conținutul și linkurile după cum este necesar.

Adăugați un modul de text în coloana 4

Adauga continut

În coloana 4, vom adăuga un alt modul de text sub primul modul de text. Adăugați un conținut la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Poppins
• Dimensiune text: 16 px
• Înălțimea liniei textului: 1,8em
• Alinierea textului: stânga
• Culoarea textului: deschis

Adăugați Social Media Follow în coloana 4

Adăugați rețele sociale la alegere

Apoi, adăugați un modul de urmărire a rețelelor sociale la sfârșitul coloanei. Adăugați rețelele sociale la alegere.

Eliminați individual culoarea de fundal a fiecărei rețele sociale

Eliminați culoarea de fundal a fiecărei rețele sociale individual.

Spațiere

Reveniți la setările obișnuite ale modulului, accesați setările de spațiere și adăugați câteva valori de marjă personalizate.

• Marja superioară: -15 px
• Marja stângă: -8px

Adăugați rândul # 3

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor, treceți la fila de proiectare și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Egalizați înălțimile coloanei: Da
• Lățime maximă: 2580 px

Adăugați un modul de text în coloana 1

Adauga continut

Apoi, adăugați un modul de text în coloana 1. Introduceți un conținut la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Poppins
• Culoarea textului: # 595959
• Dimensiune text: 13 px
• Aliniere text: centru

Setări text link

Modificați și culoarea textului linkului.

• Culoare text link: # 595959

Clonați modulul de text de două ori și plasați duplicatele în coloanele rămase

După ce ați finalizat modulul din coloana 1, îl puteți clona de două ori și puteți plasa duplicatele în cele două coloane rămase ale rândului.

Schimbați alinierile de text

Modificați aliniamentele de text pentru fiecare modul de text duplicat în consecință:

• Modulul de text din coloana 2:
  • Desktop: Centru
  • Tabletă și telefon: stânga

• Modulul de text din coloana 3:
  • Desktop: Corect
  • Tabletă și telefon: stânga

Schimbați conținutul

Și schimbați și conținutul din ambele module duplicate.

3. Aplicați Efecte lipicioase pe bara de subsol

Deschideți rândul 1 și aplicați setări lipicioase

Acum că fundația noastră de design este la locul său, este timpul să aplicăm efectul lipicios. Deschideți primul rând din secțiune, accesați fila avansată și aplicați următoarele setări lipicioase:

• Poziție lipicioasă: lipiți-vă de partea de jos
• Decalaj inferior lipicios:
  • Desktop: 50 px
  • Tabletă și telefon: 20 px

Stiluri lipicioase la rând

Culoare de fundal

Acum că ne-am transformat rândul în lipicios, putem aplica stiluri lipicioase pe rând și toate elementele copilului său. Începeți prin adăugarea unei culori de fundal lipicioase la rândul # 1.

• Culoare de fundal lipicioasă: # 000000

Aplicați stiluri lipicioase la modulele Blurb din coloanele 1 și 3

Setări pictograme

Apoi, deschideți modulele Blurb din coloanele 1 și 3 și adăugați o culoare de cerc lipicios.

• Culoare Sticky Circle: # ea6c01

Setări text titlu

Adăugați și o culoare de text lipicioasă pentru titlu.

• Culoarea textului lipicios al titlului: # ea6c01

Aplicați stiluri lipicioase la modulul Blurb din coloana 2

Culoare de fundal

Apoi, deschideți modulul Blurb din coloana 2 și aplicați o culoare de fundal lipicioasă.

• Culoare de fundal lipicioasă: # ea6c01

4. Salvați toate modificările șablonului și temei

După ce ați parcurs pașii lipicioși, asigurați-vă că salvați modificările șablonului și ale constructorului de teme înainte de a vizualiza rezultatul pe site-ul dvs. web!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, ți-am arătat cum să devii creativ cu opțiunile lipicioase ale lui Divi. Mai precis, v-am arătat cum să construiți o bară de subsol lipicioasă care să fuzioneze cu zona de subsol principală odată ce oamenii derulează pagina pe care se află. Ați putut descărca gratuit și șablonul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.