Cum să creați un subsol personalizat cu Divi's Theme Builder

Divi Theme Builder marchează o nouă eră și schimbă modul în care proiectăm site-uri web. Una dintre cele mai importante părți ale acestei funcții este posibilitatea de a adăuga dinamic pagini de subsol globale la paginile și postările dvs. După ce ați creat un subsol, îl puteți adăuga automat la orice tip de pagină sau postare doriți folosind Divi's Theme Builder. Acum, în acest tutorial, vă vom ghida pas cu pas prin procesul de creare și adăugare a unui subsol global pe site-ul dvs. web. Veți putea descărca și șablonul JSON gratuit!

Să ajungem la asta.

previzualizare

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

Desktop

Mobil

Descărcați gratuit Footerul personalizat global

Pentru a pune mâna pe subsolul global personalizat 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!

Abonați-vă la canalul nostru Youtube

1. Accesați Divi's Theme Builder

Începeți accesând Theme Builder din Opțiunile temei Divi.

2. Adăugați și creați subsol global

Acolo, puteți adăuga un subsol global din biblioteca Divi sau puteți începe să construiți unul de la zero. În acest tutorial, vom crea un subsol personalizat de la zero, așa că mergeți mai departe și alegeți prima opțiune.

Adăugați secțiunea nr. 1

Culoare de fundal

E timpul să începi să creezi! Deschideți secțiunea pe care o puteți găsi pe pagină și modificați culoarea de fundal a secțiunii.

• Culoare fundal: # 000000

Spațiere

Modificați apoi setările de spațiere ale secțiunii.

• Marja superioară: 6vw
• Marja stângă: 6vw
• Marja dreaptă: 6vw
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Frontieră

Adăugați câteva margini sus, stânga și dreapta.

• În stânga sus: 20 px
• În dreapta sus: 20 px

Box Shadow

Includeți și o umbră de casetă în setările secțiunii.

• Puterea neclarității umbrei cutiei: rgba (0,0,0,0,18)
• Culoare umbră: rgba (0,0,0,0.18)

Adăugați un rând nou la secțiune

Structura coloanei

Continuați adăugând un rând în secțiunea dvs. utilizând următoarea structură de coloane:

Adăugați un modul de text în coloană

Adăugați conținut H2

Adăugați un modul de text cu un conținut H2.

Setări text H2

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

• Rubrica 2 Font: Poppins
• Titlul 2 Greutate font: Semi Bold
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: #ffffff
• Titlul 2 Dimensiune text: 31 px (desktop), 24 px (tabletă), 18 px (telefon)
• Titlul 2 Înălțimea liniei: 1.6em

Dimensionare

Adăugați și o lățime maximă la modul.

• Lățime maximă: 700 px

Adăugați un modul buton în coloană

Adăugați o copie

Adăugați un modul buton chiar sub modulul text din coloana dvs. și introduceți o copie la alegere.

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea butonului în centru.

• Aliniere buton: centru

Setări buton

Continuați stilizând butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 12 px
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: #FFFFFF
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 100 px
• Distanța dintre litere și butoane: 1 px
• Buton Font: Poppins
• Buton Font Greutate: Semi Bold
• Stilul fontului butonului: majuscule

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 14 px
• Căptușeală inferioară: 14 px
• Garnitura stânga: 40 px
• Garnitura dreapta: 58 px

Adăugați secțiunea 2

Culoare de fundal

Treci la următoarea secțiune obișnuită! Alegeți o culoare de fundal a secțiunii albe.

• Culoare fundal: #ffffff

Spațiere

Eliminați toate căptușeala superioară și inferioară următoare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Adăugați și o anumită rază de margine la secțiune.

• În stânga sus: 20 px
• În dreapta sus: 20 px

Box Shadow

Și completați setările secțiunii adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 135 px
• Culoare umbră: rgba (0,0,0,0.18)

Adăugați un rând nou la secțiune

Structura coloanei

După ce ați completat setările secțiunii, adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați umplutura implicită de sus și de jos a rândului în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Spațiere coloană

Continuați deschizând setările coloanei și adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 100 px (desktop), 50 px (tabletă și telefon)
• Căptușeală inferioară: 100 px (desktop), 50 px (tabletă și telefon)
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Adăugați modulul de text nr. 1 în coloană

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul de text obișnuit în coloana 1 și 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 în consecință:

• Font text: Poppins
• Greutatea fontului textului: Bold
• Culoarea textului: # 000000
• Dimensiune text: 17 px
• Aliniere text: centru

Spațiere

Adăugați câteva margini superioare și inferioare personalizate în continuare.

• Marja superioară: 10 px
• Marja inferioară: 30 px

Adăugați modulul divizor în coloană

Vizibilitate

Chiar sub modulul text, adăugați un modul divizor și asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Schimbați culoarea liniei în negru.

• Culoare linie: # 000000

Dimensionare

Modificați și setările de dimensionare ale divizorului.

• Lățime: 15%
• Alinierea modulului: centru

Adăugați modulul de text nr. 2 în coloană

Adauga continut

Continuați adăugând un alt modul de text în coloană.

Adăugați un link

Adăugați un link la pagina la care doriți să se refere acest modul.

Setări text

Apoi, treceți la fila de proiectare și modificați setările de text după cum urmează:

• Font text: Poppins
• Greutatea fontului textului: ușoară
• Culoarea textului: # 777777
• Dimensiune text: 15 px
• Aliniere text: centru

Spațiere

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

• Marja superioară: 10 px
• Marja inferioară: 10 px

Clonați modulul de text nr. 2 atât cât este necesar

După ce ați finalizat cel de-al doilea modul de text din coloană, îl puteți clona de câte ori aveți nevoie (în funcție de câte elemente de subsol pe care doriți să le includeți).

Schimbați conținutul și linkurile

Asigurați-vă că modificați conținutul modulului și linkurile pentru fiecare duplicat.

Clonați întreaga coloană de două ori

După ce ați completat coloana și modulele sale, puteți clona întreaga coloană de două ori.

Coloana 2 Culoare fundal

Apoi, deschideți setările coloanei 2 și schimbați culoarea de fundal.

• Coloana 2 Culoare fundal: # f9f9f9

Schimbați conținutul și linkurile

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

Adăugați o coloană nouă

Apoi, adăugați o a patra coloană la rând.

Culoare de fundal

Schimbați culoarea de fundal a noii coloane.

• Culoare fundal: # 0fffc7

Spațiere

Împreună cu valorile de umplere a coloanei.

• Căptușeală superioară: 70 px
• Căptușeală inferioară: 70 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

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

Adăugați rețele sociale

Continuați adăugând un modul Social Follow Follow în coloana 4.

Resetați stilurile rețelelor sociale

Resetați stilurile articolelor pentru fiecare rețea socială pe care o adăugați.

Aliniere

Apoi, treceți la fila de proiectare și schimbați alinierea modulului.

• Alinierea modulului: centru

Setări pictograme

Modificați și culoarea pictogramei.

• Culoare pictogramă: # 000000

Adăugați modulul Optin de e-mail în coloana 4

Eliminați conținutul

Continuați adăugând un modul Optin de e-mail în coloana 4 și eliminați titlul și conținutul corpului.

Cont de email

Adăugați un cont de e-mail în continuare. Fără a adăuga contul de e-mail, modulul nu va apărea după ce ați ieșit din constructor.

Eliminați culoarea de fundal

Continuați eliminând culoarea de fundal a modulului.

• Utilizați culoarea de fundal: Nu

Setări câmpuri

Treceți la fila de proiectare și modificați setările câmpurilor după cum urmează:

• Culoare fundal câmpuri: rgba (0,0,0,0)
• Culoare text câmpuri: # 000000
• Câmpuri Font: Poppins

• Dimensiune text câmpuri: 13 px
• Lățimea chenarului câmpurilor: 1 px
• Culoarea chenarului câmpurilor: # 000000

Setări buton

Stilizați și butonul modulului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 12 px
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: #FFFFFF
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 100 px
• Distanța dintre litere și butoane: 1 px
• Buton Font: Poppins
• Buton Font Greutate: Semi Bold
• Stilul fontului butonului: majuscule

• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px

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

Conținut dinamic

Următorul și ultimul modul de care avem nevoie pentru a finaliza acest design este un modul de text. Activați opțiunea de conținut dinamic din caseta de conținut.

Apoi, selectați opțiunea „Data curentă”.

• Conținut dinamic: Data curentă

Și modificați setările conținutului dinamic după cum urmează:

• Înainte: Copyright & copy;
• După: | Toate drepturile rezervate
• Format dată: personalizat
• Format de dată personalizat: 20 de ani

Setări text

Apoi, treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Poppins
• Culoarea textului: # 000000
• Dimensiune text: 16 px

Spațiere

Completați setările modulului adăugând o marjă superioară și ați terminat!

• Marja superioară: 50 px

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 acest tutorial, v-am arătat cât de ușor este să creați un frumos subsol personalizat la nivel global cu noul Divi Theme Builder. Theme Builder și modulul încorporat al Divi și opțiunile de proiectare vă ajută să economisiți mult timp și să creați site-uri web uimitoare în cel mai scurt timp. Sperăm că acest tutorial vă va inspira să creați subsoluri globale frumoase pentru viitoarele dvs. proiecte Divi. 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.