Doriți să creați un subsol personalizat în DIVI?
Una dintre cele mai importante părți ale constructorului de teme Divi este capacitatea de a adăuga în mod dinamic subsoluri globale la paginile și postările tale web.
Odată ce ați proiectat un subsol, îl puteți adăuga automat la orice tip de pagină sau postare doriți folosind generatorul de teme Divi.
În acest tutorial, vă vom ghida pas cu pas prin procesul de creare și adăugare a unui subsol global la dvs. site-ul web.
studiu
Înainte de a ne aprofunda în tutorial, să aruncăm o privire la subsolul pe care îl vom proiecta.
Birou
Accesați Divi Theme Builder și adăugați un subsol global
- Accesați Divi > Theme Builder și faceți clic pe „ Adăugați un subsol global«
- A alege " Creați un subsol global«
Personalizați secțiunea #1
Culoare de fundal
Deschideți secțiunea pe care o puteți găsi pe pagină și schimbați culoarea de fundal a secțiunii.
- Fundal: #000000
spaţierea
Comutați la filă Stil și apoi modificați setările de spațiere pentru secțiune.
- Marja (sus, stânga și dreapta): 6vw
- Marja internă (stânga și dreapta): 30px
frontieră
Apoi adăugați un chenar de sus la stânga și la dreapta.
- Dreptunghi rotunjit din stânga sus: 20px
- Dreptunghi rotunjit sus, dreapta: 20px
Cutie de umbră
Includeți, de asemenea, o umbră de casetă în setările secțiunii.
- Intensitatea estomparii umbrei arcului: 135px
- Culoare font subtitrare: rgba(0,0,0,0.18)
Adăugați o nouă linie la secțiune
Structura coloanei
Continuați prin adăugarea unui rând la secțiunea dvs. folosind următoarea structură de coloane:
Adăugați un modul Text la coloană
Adăugați un titlu cu dimensiunea H2 (Titlul 2)
Inserați un modul Text cu cuprins de dimensiune H2.
Setări text H2
Comutați la fila de Stil a modulului și modificați parametrii textului H2 în consecință:
- Font antet: Poppins
- Antet Soft Light: semi-aldine
- Alinierea textului: centrat
- Culoarea textului antetului: #ffffff
- Dimensiunea textului antetului: 31px (desktop), 24px (tabletă), 18px (telefon)
- Înălțimea liniei antetului: 1,6 em
dimensionarea
De asemenea, adăugați o lățime maximă la modul.
- Lățimea maximă: 700 pixeli
Adăugați modul de buton la coloană
Adăugați text la buton
Introduceți un modul Button chiar sub modulul Text în coloana dvs. și introduceți textul la alegere.
aliniere
Comutați la fila de Stil a modulului și modificați alinierea butonului la centru.
- Alinierea butoanelor: centrat
Setări buton
Continuați prin personalizarea butonului.
- Utilizați stiluri personalizate pentru Buton: Da
- Dimensiunea textului butonului: 12px
- Culoarea textului butonului: #000000
- Buton de fundal: #FFFFFF
- Buton pentru lățimea chenarului: 0 pixeli
Citiți și: Cum să afișați o pagină de blog ca un carusel în DIVI
- Raza chenarului butonului: 100 px
- Spațiere între litere de la butoane: 1 px
- Font pentru buton: Poppins
- Buton pentru lumină moale: semi-îndrăzneață
- Buton de copiere a stilului: TT
spaţierea
De asemenea, adăugați valori personalizate ale marjei interioare.
- Marja internă (sus și jos): 14px
- Marja interioară: stânga (40px); Dreapta (58px)
Sectiunea 2
Adăugați o a doua secțiune „normală” sub cea anterioară.
Culoare de fundal
Schimbați culoarea de fundal
- Fundal: #ffffff
spaţierea
Apoi eliminați toate marginile interne (Sus și Jos).
- Marja internă (sus și jos): 0px
frontieră
De asemenea, adăugați o rază de margine la secțiune.
- Dreptunghi rotunjit (stânga sus): 20px
- Dreptunghi rotunjit (dreapta sus): 20px
Cutie de umbră
Și completați setările secțiunii adăugând o umbră subtilă a casetei.
- Intensitatea estomparii umbrei casetei: 135px
- Culoare font subtitrare: rgba(0,0,0,0.18)
Adăugați o nouă linie la secțiune
Structura coloanei
După ce ați finalizat setările secțiunii, adăugați un nou rând folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările rândului și modificați-le după cum urmează:
- Utilizați lățimea jgheab personalizată: da
- Distanța între coloane: 1
- Armonizarea înălțimii coloanei: Da
- Lățime maximă: 100%
- Lățime maximă: 100%
spaţierea
Apoi eliminați marginile interioare implicite (sus și jos) din linie.
- Marja internă (sus și jos): 0px
Spațierea coloanelor
Continuați prin deschiderea setărilor coloanei pentru a adăuga valori personalizate de umplutură.
- Marja interioară (sus și jos): 100px (desktop), 50px (tabletă și telefon)
- Marja internă (stânga și dreapta): 100 px (desktop), 50 px (tabletă și telefon)
Adăugați modulul Text #1 la coloană
Adăugați conținut
Acum îi putem adăuga module. Adăugați un modul Text în coloană și introduceți cuprins de votre choix.
Setări text
Comutați la fila de Stil a modulului și modificați parametrii textului în consecință:
- Text Font: Poppins
- Greutatea fontului textului: aldine
- Culoare text: #000000
- Dimensiunea textului: 17px
- Alinierea textului: centrat
spaţierea
Apoi adăugați margini personalizate (sus și jos).
- Marja superioară: 10 px
- Marja inferioară: 30px
Adăugați un modul Separator la coloană
Chiar sub modulul Text, adăugați un modul Separator.
vizibilitate
Asigurați-vă că opțiunea " Arată Separator Este activat.
- Arată separator: Da
Ligne
Schimbați culoarea liniei în negru.
- Culoare etichetă: #000000
dimensionarea
Modificați, de asemenea, setările de dimensionare a splitterului.
- Lățime maximă: 15%
- Alinierea textului: Centru
Adăugați modulul Text #2 la coloană
Adăugați conținut
Continuați prin adăugarea unui alt modul Text la coloană, precum și a cuprins de votre choix.
Adăugați un link
Introduceți un link către pagina la care doriți să se refere acest modul.
Setări text
Apoi treceți la fila Stil și modificați setările de text după cum urmează:
- Font text: Poppins
- Text cu lumină moale: clar
- Culoare text Text: #777777
- Dimensiunea textului text: 15 px
- Alinierea textului: centrat
spaţierea
De asemenea, adăugați o marjă (Sus și Jos).
- Marja (sus și jos): 10 px
Clonează modulul text #2 după cum este necesar
După ce ați finalizat al doilea modul Text, îl puteți clona de câte ori aveți nevoie (în funcție de câte elemente de subsol pe care se poate face clic pe care doriți să le includeți).
Editați conținutul și linkurile
Asigurați-vă că editați conținutul modulului și linkurile pentru fiecare duplicat.
Clonează întreaga coloană de două ori
După ce ați completat coloana și modulele acesteia, o puteți clona de două ori.
Culoare de fundal pentru coloana 2
Apoi deschideți setările pentru coloana 2 și schimbați culoarea de fundal.
- Fundal: #f9f9f9
Editați conținutul și linkurile
Asigurați-vă că editați tot conținutul și linkurile din fiecare coloană duplicată.
Adaugă o nouă coloană
Apoi, adăugați o a patra coloană la rând.
Culoare de fundal
Schimbați culoarea de fundal a noii coloane.
- Fundal: #0fffc7
spaţierea
Modificați marginile interioare după cum urmează:
- Marja internă (sus și jos): 70px
- Marja internă (stânga și dreapta): 50px
Adăugați modulul „Urmărește-ne pe rețelele sociale” în coloana 4
Adăugați rețele sociale
Continuați prin adăugarea unui modul " Urmărește-ne pe rețelele sociale în coloana 4 și introduceți rețelele sociale la alegere.
Resetați stilurile pictogramelor rețelelor sociale
Faceți clic pe Resetați Roluri Elemente Stiluri pentru fiecare dintre rețelele sociale.
aliniere
Apoi treceți la fila Stil și modificați alinierea modulului.
- Alinierea textului: Centru
Setări pictograme
Schimbați și culoarea pictogramelor rețelelor sociale.
- Culoare pictogramă: #000000
Adăugați modulul Optin pentru e-mail la coloana 4
Introduceți un mod " Opțiune pentru e-mail „sub modul” Urmărește-ne pe rețelele sociale«
Ștergeți conținutul și titlul modulului
Cont de email
Apoi adăugați un cont de e-mail. Dacă nu adăugați un cont de e-mail, modulul nu va apărea după ce părăsiți generatorul de teme.
Eliminați culoarea de fundal
- Utilizați culoarea de fundal: Nu
Setări câmp
Comutați la filă Stil și modificați setările de câmp după cum urmează:
- Câmpuri de culoare de fundal: rgba(0,0,0,0)
- Câmpuri de culoare text: #000000
- Font Champs: Poppins
- Câmpuri pentru dimensiunea textului: 13 px
- Câmpuri pentru lățimea chenarului: 1 px
Setări buton
De asemenea, personalizați butonul modulului dvs.
- Utilizați stiluri personalizate pentru Buton: Da
- Dimensiunea textului butonului: 12px
- Culoarea textului butonului: #000000
- Buton de fundal: #FFFFFF
- Lățimea chenarului: 0px
- Raza chenarului butonului: 100 px
- Spațiere între litere de la butoane: 1 px
- Font pentru buton: Poppins
- Buton pentru lumină slabă: semi-îndrăzneață
- Buton de copiere a stilului: TT
Vezi si: Cum să creați un formular de contact lipicios în DIVI
- Buton Padding (Sus și Jos): 15px
Adăugați modul de text dinamic la coloana 4
Următorul și ultimul modul de care avem nevoie pentru a finaliza acest design este un modul Text.
Activați opțiunea „ Utilizați conținut dinamic".
Apoi selectați opțiunea " data curenta".
Și modificați setările de conținut dinamic după cum urmează:
- Față: Copyright ©
- După: | Toate drepturile rezervate
- Format data: Vama
- Format personalizat de dată: 20 ani
Setări text
Apoi, comutați la fila stil și modificați setările de text:
- Font text: Poppins
- Culoare text Text: #000000
- Dimensiunea textului text: 16 px
spaţierea
Completați parametrii modulului adăugând margine și voilà!
- Marja superioară: 50 px
Salvați opțiunile globale de subsol și de generator de teme
După ce ați terminat, asigurați-vă că vă salvați munca înainte de a părăsi constructorul. Divi tema.
De îndată ce ați ieșit din aspectul șablonului, salvați toate modificările generatorului de teme și ați terminat!
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire asupra rezultatului.
Descărcați DIVI acum!!!
Concluzie
În acest tutorial, v-am arătat cât de ușor este să creați un subsol global frumos personalizat cu generatorul de teme Divi.
Sperăm că acest tutorial vă va inspira să creați subsoluri globale frumoase pentru următoarele proiecte Divi.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
