Ghidul final al personalizatorului temei Divi

Personalizatorul temei Divi este un instrument puternic și convenabil pentru personalizarea temei Divi. La fel ca Visual Builder, Divi Theme Customizer permite personalizări frontale vizuale și modificări de design care scot jocul de ghicire din procesul de personalizare. Dacă este utilizat în mod eficient, acest instrument poate fi un economisitor de timp și un startstarter pentru proiecte viitoare.

Postarea de astăzi este menită să vă ajute să înțelegeți mai bine modul în care funcționează Theme Customizer, astfel încât să o puteți folosi pentru a crește productivitatea pentru proiectele viitoare. Acoper aproape toate opțiunile disponibile în Theme Customizer cu accent pe acele opțiuni specifice Divi. Într-un fel, această postare servește ca o piesă de documentare care oferă câteva explicații aprofundate și sfaturi de proiectare pe parcurs. De asemenea, vă voi arăta cum să exportați setările Customizer pentru a le utiliza în următorul dvs. proiect.

Avem multe de acoperit, așa că să începem de la început.

Construit cu WordPress în minte

Tema Customizer a fost introdusă în WordPress 3.4. Această funcție convenabilă permite utilizatorilor WordPress să previzualizeze modificările pe care le fac temelor lor în timp real și apoi să salveze aceste modificări dintr-un singur clic. Ceea ce făcea mai multe ferestre și nenumărate reîmprospătări, acum se poate face rapid într-o singură fereastră a browserului.

Iată un exemplu de opțiuni Personalizator temă pe tema TwentySeventeen:

După cum puteți vedea, multe dintre caracteristicile WordPress care locuiau în diferite pagini din backend-ul WordPress (identitate site, meniuri, widget-uri etc.) pot fi acum accesate în acest personalizator front-end, toate într-un singur loc.

Pe de altă parte, Divi Theme Customizer a fost construit ca o versiune îmbunătățită a acestui Theme Customizer cu toate tipurile de opțiuni specifice Divi. Pentru utilizatori, acest lucru face procesul de personalizare Divi mult mai ușor. Și faptul că puteți vedea efectiv personalizările în timp ce editați (simultan) face din acesta un instrument de proiectare convenabil.

Personalizatorul de teme Divi are încă multe dintre opțiunile standard de personalizare WordPress, dar are și multe altele.

După cum puteți vedea, există mult mai multe setări care au fost adăugate la Divi Theme Customizer. Acum să începem să le explorăm mai în profunzime.

setari generale

Când începeți să vă personalizați tema, cred că este mai bine să începeți de sus cu Setări generale și să mergeți în jos.

Identitatea site-ului

Această secțiune nu este unică pentru Divi. Acesta este un loc convenabil pentru a schimba titlul site-ului și sloganul pentru site-ul dvs. De asemenea, puteți introduce o pictogramă de site care este utilizată pentru browsere și aplicații, diferită de pictograma favicon pe care o puteți adăuga în Opțiunile temei Divi.

setări de schemă

Setările de aspect vă permit să ajustați cadrul temei dvs. determinând cât spațiu este între secțiuni și rânduri și care va fi lățimea maximă a secțiunii dvs. principale de conținut.

ACTIVAȚI DISPOZIȚIA ÎN CUTIE

Aici puteți schimba site-ul dvs. într-un aspect cutie care încadrează conținutul site-ului dvs. și expune un fundal care poate fi personalizat.

LĂȚimea CONȚINUTULUI SITE-ULUI

Aici puteți seta lățimea maximă a secțiunii de conținut. Deoarece conținutul dvs. are un aspect receptiv, acesta se va regla la dimensiuni mai mici, dar nu se va extinde mai mult decât lățimea maximă stabilită aici.

Valoarea implicită este setată la 1080px. Aceasta este o lățime bună pentru majoritatea laptopurilor și desktopurilor standard.

LĂțimea GUTTERULUI SITE-ULUI

Lățimea jgheabului corespunde cantității de spațiu orizontal (marjă) dintre coloanele din fiecare rând.

Valorile opționale pentru lățimea jgheabului variază de la 1 la 4.

1 reprezintă marja zero între coloane.
2 reprezintă o marjă dreaptă de 3% între coloane.
3 reprezintă o marjă dreaptă de 5,5% între coloane.
4 reprezintă o marjă dreaptă de 8% între coloane.

FOLOSIȚI LĂȚIMEA BAZĂ LATERALĂ PERSONALIZATĂ

Aceasta setează lățimea implicită a barei laterale pentru tema dvs. Acest lucru se aplică tuturor paginilor de pe tema dvs. care au o bară laterală și nu sunt construite folosind Divi Builder.

SECȚIUNEA ȘI ÎNălțimea RÂNDULUI

Aceste opțiuni ajustează spațiul vertical (umplutura de sus și de jos) pentru fiecare secțiune și rând.

În mod implicit, umplerea secțiunii este de 50 px în partea de sus și de jos . Pentru Row, umplutura implicită este de 30 px în partea de sus și de jos . Cu toate acestea, modificând secțiunea sau rândul de umplere utilizând Customizer, valoarea de umplere se transformă într-un procent care corespunde numărului de pe discul de opțiune de pe tema de personalizare.

De exemplu, „0” reprezintă 0% din umplutura de sus și de jos, „1” reprezintă 1% din umplutura de sus și de jos, „2” reprezintă 2% și așa mai departe. Procentul de umplere se bazează pe lățimea containerului (secțiunea sau rândul). Deci, dacă lățimea reală a secțiunii este de 1080px și ați setat înălțimea secțiunii la 1, aceasta înseamnă că veți avea ...

1080px 0,01 = 10,8px

… 10.8 px de căptușeală în partea de sus și de jos.

Opțiunile variază de la 0 la 10, astfel încât să puteți avea până la 10% din umplutură.

TEMA CULOREA ACCENTULUI

Înainte de a începe să schimbați culorile pentru celelalte elemente, ar trebui să schimbați mai întâi acest lucru . După ce îl modificați, salvați și publicați setările și actualizați pagina. Acum, actualizarea Theme Accent Color ar fi trebuit să completeze automat alte elemente.

Actualizarea Theme Accent Color va actualiza, de asemenea, următoarele:

• Culoarea legăturii corpului
• Culoare antet widget
• Widget Bullet Color
• Footer Social Icons Social Plasați culoarea cursorului
• Culoare implicită pentru pictograme
• Meniu subsol Culoare link activ
• Culoarea de fundal a meniului secundar
• Culoare de fundal Slide In și Fullscreen Header Style
• Pictogramă meniu hamburger pentru culoarea meniului mobil
• Meniul principal Culoare link activ
• Meniu drop-down Culoare linie
• Culoarea fundalului meniului secundar
• Culoarea fundalului meniului derulant secundar
• Culoarea fundalului meniului secundar
• Culoare legătură meniu principal activ
• Meniu subsol Culoare link activ

Tipografie

Acesta este unul dintre cele mai importante aspecte ale site-ului dvs. web, care tinde să fie neglijat de utilizatori și dezvoltatori. Nu faceți greșeala de a trece cu vederea aceste opțiuni. Realizarea corectă a acestor detalii poate face o mare diferență. Dacă vă alocați timp pentru a seta tipografia implicită pentru tema dvs., puteți economisi și timp pe termen lung, deoarece nu va trebui să faceți personalizări la nivelul modulului.

MĂRIMEA TEXTULUI CORPORAL

Aceasta modifică textul implicit al corpului pentru tema dvs. Dimensiunea implicită este de 14 px.

Sfat de proiectare: Se pare că 14 px sunt puțin prea mici pentru o dimensiune standard a textului corpului. Într-adevăr, nu ar trebui să mergeți mai puțin de 16 px pentru dimensiunea fontului corpului de bază. Cei dintre noi aproape de 40 de ani și mai în vârstă vă vor mulțumi. Chiar și majoritatea browserelor folosesc 16 px ca dimensiune standard a fontului.

ÎNĂLȚIMEA LINII CORPORALE

Înălțimea liniei fiecărei linii de text.

Sfat de proiectare : înălțimea liniei se măsoară în valoarea lungimii „em”. Valoarea implicită a lui Divi este 1.7em pentru textul corpului. Această valoare em este mai bună decât o valoare pixel (px), deoarece se bazează pe dimensiunea curentă a fontului elementului și, astfel, se scalează cu valoarea inline părinte (sau, în cazul nostru, cu dimensiunea curentă a fontului). Valoarea „1.7em” reprezintă în principiu 1,7 ori dimensiunea curentă a fontului. Deci, dacă dimensiunea curentă a fontului este de 16 px, înălțimea liniei va fi de 27,2 px. Acest lucru vă oferă 5,6 pixeli de spațiu suplimentar în partea de sus și 5,6 pixeli în partea de jos. Acesta pare a fi un bun conducător (spațiu între liniile de copiere) pentru lizibilitate.

MĂRIMEA TEXTULUI DE CAP

Divi vă permite să setați dimensiunea implicită a textului antet h1 aici. Acest lucru afectează elemente ale Divi, cum ar fi titlurile modulului de antet Fullwidth. Dacă doriți să ajustați dimensiunea celorlalte niveluri ale antetului (h2, h3, etc ...), vă sugerez să adăugați cele din CSS suplimentar (acest lucru este tratat mai târziu în postare).

Sfat de proiectare: În majoritatea cazurilor, veți avea un singur antet pe pagină, așa că faceți-o să conteze. Gândiți-vă la titlul de pe coperta unei cărți. Este primul lucru pe care îl observă o persoană. Și, spre deosebire de sloganul popular, oamenii încă judecă cărțile după coperțile lor, mai ales în acest caz.

Valoarea implicită pentru dimensiunea textului antet este de 30 px. Aceasta este o dimensiune sigură bună pentru a începe. Mai ales că unele titluri vor necesita o copie mai lungă. Cu toate acestea, tind să gravitez la o dimensiune a antetului mai mare pentru a se potrivi dimensiunii tot mai mari a afișajelor monitorului. În plus, majoritatea clienților au nevoie de site-uri web cu titluri simple și scurte, cum ar fi „Despre noi” și „Contactați-ne”, care arată mai bine cu dimensiuni mai mari de caractere. Îmi place să îmi setez antetele h1 la cel puțin 48 px .

DISTANȚAREA LITERILOR DE CAP

Spațierea literelor reglează spațiul orizontal dintre litere. Valoarea Spațiere litere antet afectează toate nivelurile antetului (h1, h2, h3, h4, h5, h6), citatele bloc și titlurile diapozitivelor.

Sfat de proiectare: este o tehnică bună de proiectare pentru a reduce spațiul dintre litere pentru textul mai mare și pentru a crește spațiul dintre litere pentru textul mai mic . Când vine vorba de anteturi, textul mai mare, cu o greutate mai mare a fontului (bold), poate arăta mai bine, cu o distanță redusă între litere de -1 px.

Cu toate acestea, dacă puneți același antet cu majuscule, puteți constata că mărirea spațiului dintre litere la 1-2 px va arăta mai bine.

ÎNĂLȚIMEA LINIEI HEADER

La fel ca pentru valoarea spațierii literelor, valoarea înălțimii liniei antetului afectează toate nivelurile antetului (h1, h2, h3, h4, h5, h6), ghilimele și titlurile diapozitivelor. Datorită dimensiunii mai mari a fontului, 1em este setările implicite. Cred că o înălțime a liniei undeva între 1em și 1.3em arată bine, mai ales atunci când antetul merge la două linii sau mai mult.

STILUL FONTULUI HEADER

Utilizați aceste opțiuni pentru a schimba stilul de font al antetelor.

SEDIUL ȘI FONTUL CORPULUI

Fontul implicit din Divi este Open Sans , dar Divi Theme Customizer are aproape o sută de fonturi din care să alegi! Profitați de aceste fonturi încorporate și testați care dintre acestea funcționează cel mai bine pentru tema dvs.

Sfat de proiectare: pentru inspirație pentru împerecherile de fonturi, puteți verifica fontpair.co, care vă ajută să împerecheați Google Fonts împreună. Divi nu va accepta toate aceste fonturi, dar puteți căuta cele pe care Divi le acceptă pentru a vedea împerecherile care funcționează bine împreună.

CULOAREA CORPORULUI

Culoarea legăturii corpului este moștenită de culoarea accentului temei. Dar îl puteți schimba oricând aici.

Sfat de proiectare: dacă doriți, puteți adăuga un atribut de subliniere pentru toate linkurile corpului dvs. utilizând CSS suplimentar (a se vedea sfârșitul postării).

CULOAREA TEXTULUI CORPORAL

Aici puteți schimba culoarea textului corpului. Bloguri populare precum New York Times și Smashing Magazine folosesc # 333333 pentru culoarea textului corpului. Acest lucru tinde să se citească mai bine pe un fundal alb, după părerea mea.

CULOAREA TEXTULUI HEADER

Aici puteți schimba culoarea antetelor. Dacă rămâi cu o nuanță de negru, aș merge un pic mai întunecat decât textul corpului pentru a-l face să iasă puțin în evidență. Ceva de genul # 121212 ar funcționa.

fundal

Această opțiune setează fundalul temei dvs. Pentru tema Divi, această opțiune se aplică într-adevăr doar aspectului casetei . Culoarea de fundal implicită este albă (#ffffff), cu excepția cazului în care o schimbați aici. De asemenea, puteți adăuga o imagine de fundal dacă doriți.

Asta este pentru setările de aspect. După ce aveți aspectul la locul său, puteți începe să căutați elemente mai specifice.

Antet și navigare

Antetul și meniul de navigare sunt probabil cel mai important element pe tema dvs. Această secțiune are o mulțime de opțiuni pentru a crea aproape orice tip de antet doriți.

Format antet

Stil antet

Cele patru stiluri de antet pot oferi site-ului dvs. un aspect nou, cu un singur clic. Aceste stiluri includ Centrat, Centrat In-line Logo, Slide-in și Fullscreen.

De asemenea, puteți adăuga navigare verticală pe site-ul dvs., care poate fi o caracteristică unică. Și puteți alege să ascundeți navigarea până când derulați. Acest lucru ar fi util pentru un site cu o singură pagină care dorește să evidențieze mai mult conținut deasupra paginii fără a distrage atenția barei de navigare.

Bara de meniu principală

Bara de meniu principală este meniul principal din antetul site-ului dvs. web. Puteți personaliza complet modul în care arată meniul principal.

Sfat de proiectare: Trebuie să știți cu adevărat care vor fi legăturile dvs. de meniu înainte de a începe să perfecționați meniul cu ajutorul Divi Theme Customizer. Nu uitați că veți crea un meniu receptiv, așa că faceți-vă timp pentru a vă asigura că meniul arată excelent pe toate dimensiunile ecranului. Puteți face acest lucru făcând clic pe pictogramele dispozitivului din partea de jos a personalizatorului sau prin simpla ajustare a dimensiunii browserului. Dacă sunteți interesat, puteți afla cum să vă remediați navigarea receptivă aici.

Faceți lățimea completă

Aceasta extinde meniul pe toată lățimea ferestrei browserului.

Ascundeți imaginea logo-ului

Dacă doriți, aici puteți ascunde complet imaginea logo-ului din meniul dvs.

Înălțimea meniului

Aici puteți schimba înălțimea meniului la orice doriți. Cu toate acestea, aveți grijă să nu faceți înălțimea meniului prea mare, deoarece ați putea pierde bunuri imobile valoroase într-un meniu în loc de conținutul paginii dvs. de pornire.

Logo Max Height

Aici puteți mări sau micșora procentul de lățime maximă a logo-ului dvs. pentru a-l face mai mare sau mai mic.

Dimensiunea textului, spațierea literelor, fontul, stilul fontului, culoarea textului, culoarea linkului activ

Aceste opțiuni vă permit să personalizați legăturile de meniu în orice mod doriți.

Culoare de fundal

Acest lucru vă permite să modificați culoarea de fundal a meniului principal.

Sfat de proiectare: Dacă utilizați culorile semi-transparente (sau complet transparente) pentru antetul dvs., Divi va suprapune automat antetul peste secțiunea de dedesubt, în mod aparent. Acest lucru creează un efect destul de cool. De exemplu, acesta este un stil de antet centrat cu un fundal transparent și un antet cu lățime completă direct sub el. Observați cum Divi reglează automat imaginea de fundal pentru a se potrivi frumos în spatele antetului:

Setări meniu derulant

Meniul derulant nu trebuie să moștenească stilul meniului principal. Aici puteți crea un design unic pentru meniul drop-down. Puteți adăuga chiar animație personalizată atunci când afișați meniul derulant.

Bara de meniu secundară

Aici puteți personaliza bara de meniu secundară utilizând opțiunile furnizate.

Când este activată, bara de meniu secundară se află deasupra barei de meniu principale din partea de sus a browserului. Poate conține elemente suplimentare, inclusiv o adresă de e-mail, link-uri de socializare și un meniu secundar.

În mod implicit, meniul secundar va rămâne ascuns, cu excepția cazului în care introduceți un meniu secundar sau adăugați elemente în secțiunea Elemente antet. Poate fi necesar să salvați și să reîmprospătați personalizatorul de temă pentru a vedea meniul.

Setări de navigare corecte

Navigarea fixă ​​se referă la starea meniului „fixă” sau lipită în partea de sus a ferestrei browserului atunci când utilizatorul derulează pagina în jos. În mod implicit, navigarea fixă ​​se micșorează în înălțime pentru a oferi o fereastră mai mare pentru afișarea conținutului site-ului.

Sfat de proiectare: Puteți, de asemenea, să setați culoarea de fundal a meniului principal fix la o culoare semitransparentă pentru a dezvălui o parte din conținutul din spatele acesteia. Acest lucru îl face și mai puțin intruziv, dar totuși accesibil.

Elemente antet

Elementele antetului sunt elemente suplimentare pe care le puteți adăuga la antet. Aceste elemente includ pictograme sociale, o pictogramă de căutare, un număr de telefon și un e-mail. În afară de pictograma de căutare, toate aceste elemente vor fi afișate în meniul secundar.

Icoane sociale

În mod implicit, Divi afișează pictograme pentru Facebook, Twitter, Google+ și RSS. Puteți edita aceste profiluri în Opțiunile temei Divi.

Subsol

În mod implicit, secțiunea de subsol este ascunsă, cu excepția cazului în care este populată de conținut. De asemenea, subsolul nu trebuie confundat cu Bara de jos, care este afișată în mod implicit în partea de jos a site-ului și include creditele de subsol și pictogramele sociale.

Aspect

Aici puteți alege între 5 machete pentru secțiunea de subsol.

De asemenea, puteți seta o culoare de fundal de subsol care este setată la # 222222 în mod implicit.

Sfat de proiectare: Această secțiune va fi afișată pe toate paginile site-ului dvs. (cu excepția cazului în care alegeți un șablon de pagină goală). Prin urmare, este logic să faceți culoarea mai neutră, astfel încât să se potrivească cu toate paginile site-ului dvs.

Widgeturi

Dacă ați adăugat widget-uri la secțiunile de subsol, puteți stiliza aspectul acestor widget-uri aici.

Widgeturile nu sunt unice pentru Divi. Acestea sunt încorporate în wordpress și pot fi găsite în tabloul de bord wordpress din Aspect> Widgeturi . Acolo puteți vedea patru zone de subsol în care puteți adăuga widgeturi. Toate widgeturile pe care le adăugați la aceste secțiuni vor fi afișate în zona de subsol.

Cu toate acestea, puteți accesa și zonele widget-ului fără a fi nevoie să părăsiți personalizatorul temei (unul dintre lucrurile mele preferate despre asta).

Elemente de subsol

Aici puteți alege să afișați pictogramele sociale pe bara de jos la fel ca în meniul secundar.

Meniu subsol

Dacă aveți un meniu de subsol, îl puteți stiliza aici.

Bara de jos

Bara de jos se află chiar în partea de jos a site-ului dvs. web și afișează creditele de subsol și pictogramele sociale în mod implicit. Aici puteți personaliza stilul acestor elemente, inclusiv schimbarea dimensiunii și culorii fontului pictogramei sociale.

Editați creditele subsolului

De asemenea, puteți înlocui creditele de subsol implicite cu orice html doriți în această casetă.

Butoane

Această secțiune controlează ce doriți să fie stilurile de butoane implicite.

Butoane Stil

Aici puteți personaliza stilul butoanelor pentru tema dvs. Nu am de gând să intru în detalii detaliate cu privire la fiecare opțiune aici. Puteți accesa documentația noastră de pe modulul buton pentru mai multe informații despre cum să stilizați butoanele.

Culoarea textului

Dacă observați, în mod implicit, culoarea butonului este moștenită de setarea Theme Accent Color din Setări generale. Aceasta este numai pentru modulele care au textul setat la „întuneric”. Iar butoanele sunt albe când textul modulului este setat la „lumină”. Dar, de îndată ce setați o culoare de text personalizată pentru butoanele dvs., această culoare este setată atât pentru versiunile de text întunecat, cât și pentru cele deschise dintr-un anumit modul.

Sfat de proiectare: lăsați culoarea accentului tematic să seteze culoarea textului butoanelor, astfel încât să puteți păstra capacitatea de a adăuga versiuni întunecate și deschise ale butonului în module.

Butoane Hover Style

Aici puteți personaliza stilul stării de deplasare a butoanelor.

Este important ca utilizatorii să înțeleagă că ceea ce urmează să facă clic este de fapt un buton. Adăugarea unui efect de plutire solidifică acest lucru în mințile acolo și îi încurajează să interacționeze. Fiți implicit Divi adaugă un fundal deschis și animă o pictogramă săgeată în dreapta. Dar, îl puteți schimba în orice doriți.

Sfat de proiectare: Faptul că schimbați fundalul într-o culoare mai închisă sau mai deschisă nu este la fel de important decât să vă asigurați că butonul se schimbă într-un fel. De asemenea, puteți mări distanța dintre litere sau puteți regla raza chenarului pentru a da butonului un efect unic asupra cursorului.

Blog

Post

Această secțiune modifică stilul conținutului antetului postării într-o singură postare. Acest lucru nu schimbă aspectul fragmentelor de pe pagina de blog sau modulul de blog. Uneori, anteturile postărilor de blog vor trebui să arate diferit de antetele din restul site-ului dvs. Aici ați face aceste ajustări.

Dacă alegeți să utilizați modulul Post Header, aceste opțiuni nu ar fi eficiente.

Stiluri mobile

Îmi place această secțiune. Aici puteți regla aspectul site-ului dvs. pe dispozitivele mobile și puteți vedea rezultatele în timp real.

Stiluri de tabletă și telefon

Puteți selecta Tabletă sau Telefon, iar fereastra din dreapta Customizerului se va regla automat pentru a vă arăta cum arată pagina pe dispozitiv. Apoi, la fel cum am făcut în Setări generale sub Aspect, puteți regla Înălțimea secțiunii, Înălțimea rândurilor, Dimensiunea textului corpului și Dimensiunea textului antetului.

Sfatul de proiectare nr. 1: O personalizare pe care îmi place să o fac pentru aspectele telefonului este să setez Înălțimea rândului la „0”. Acest lucru creează un flux mai bun de conținut atunci când derulați pe un telefon, deoarece elimină spațiul dintre rânduri.

Sfat de proiectare nr. 2: Găsiți o scară de font care funcționează pentru site-ul dvs. Iată una bună pe care îmi place să o urmez pentru anteturile mele:

Desktop: 48 px

Tabletă: 40 px

Telefon: 32 px

Meniu mobil

Nu treceți cu vederea acest lucru sau puteți pierde crearea unui antet complet unic pentru meniul dvs. mobil. Puteți ascunde sigla doar pe dispozitive mobile și puteți schimba fundalul și culorile textului.

Scheme de culori

Acestea pot fi convenabile pentru o soluție rapidă. Dar nu aș sfătui să folosiți schemele de culori dacă intenționați să schimbați unele dintre aceste culori mai târziu în tema de personalizare. Odată setate, aceste culori nu pot fi suprascrise în Customizer, deoarece CSS generat conține regula! Importantă.

În opinia mea, cel mai bine este să lăsați acest set la valorile implicite.

Meniuri și widgeturi

Nu mai trebuie să vă editați orbește meniurile sau widgeturile în tabloul de bord wordpress. Acum puteți adăuga și personaliza aceste articole și le puteți vedea prind viață pe pagina dvs. în timp real. Îmi place comoditatea!

Prima pagină statică

În mod implicit, WordPress afișează ultima dvs. postare pe prima pagină (pagina principală). Puteți schimba aceasta pentru a fi orice pagină statică doriți în această secțiune. Și, de asemenea, puteți desemna pagina dvs. de postări (sau pagina blogului).

Nu am știut acest lucru până când am scris această postare, dar puteți implementa de fapt o nouă pagină din Customizerul tematic pentru a servi drept prima pagină sau pagina blogului fără a fi nevoie să părăsiți personalizatorul.

CSS suplimentar

Secțiunea CSS suplimentară oferă o oportunitate excelentă de a pune ultimele atingeri în configurarea temei dvs. Indiferent de stilul modificărilor pe care nu le poate controla Divi Theme Customizer, puteți face aici cu unele CSS personalizate. Deoarece Customizer vă permite să vedeți modificările CSS în timp real, puteți face aceste ajustări necesare temei dvs. mult mai ușor decât să mergeți înainte și înapoi pe o foaie de stil externă.

Exemple CSS suplimentare

Exemplul nr. 1: Ajustați dimensiunea tuturor antetelor

Un exemplu bun de CSS suplimentar ar fi stilul pentru etichetele de antet rămase. Divi vă permite să personalizați setarea pentru fontul de titlu, dar aceasta este doar pentru antetele dvs. h1. Puteți utiliza caseta CSS suplimentară pentru a introduce restul etichetelor de antet (h2, h3, h4, etc ...) personalizări. Îmi place să folosesc următoarea scală: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Exemplul # 2: Potriviți umplutura paragrafului inferior cu înălțimea liniei corpului

Dacă setați înălțimea liniei textului corpului la 1,7em, vă recomandăm, de asemenea, să setați aceeași valoare la umplutura inferioară dintre paragrafe pentru a păstra o grilă de bază constantă și un ritm vertical. Cu alte cuvinte, distanța dintre paragrafe este egală cu înălțimea liniei. Pentru a face acest lucru, trebuie pur și simplu să adăugați următoarele:

p { padding-bottom: 1.7em}

Deoarece valoarea lungimii em se bazează pe dimensiunea fontului părinte, dacă ați schimbat dimensiunea fontului de bază cu altceva în personalizatorul temei, valoarea 1.7em se va regla corespunzător.

Exemplul nr. 3: Adăugați atribut de subliniere la linkurile dvs.

Adăugați atributul de subliniere la linkurile corpului.

a {
    text-decoration: underline;
}

Exportarea și importarea setărilor Divi Customizer pentru următorul dvs. proiect

Personalizatorii de teme Divi au o opțiune de portabilitate care permite utilizatorilor să exporte sau să importe setări de personalizare. Aceasta prezintă o oportunitate excelentă pentru dezvoltatori de a crea un fel de șablon de setare a personalizatorului pe care să îl folosească în proiectele lor viitoare.

În primul rând, vă sugerez să vă alocați timp pentru a afla ce personalizări aveți tendința de a face atunci când creați un site web. După ce identificați acele setări, puteți introduce acele personalizări în Divi Theme Customizer și apoi să exportați aceste setări, astfel încât să aveți startul pentru următoarele proiecte. De ce continuați să faceți aceleași lucruri iar și iar când puteți face deja asta? În plus, acest lucru vă va ajuta să vă asigurați că nu omiteți nicio personalizare importantă.

Pentru a exporta setările, faceți clic pe pictograma de portabilitate din partea de sus a Divi Theme Customizer.

Vă oferă un nume de fișier exportat și faceți clic pe butonul „Export Divi Customizer Settings”

Acum puteți utiliza acest fișier .json în viitor, făcând clic pe aceeași pictogramă de portabilitate în Divi Theme Customizer și selectând Import în loc de export. Apoi, tot ce trebuie să faceți este să încărcați fișierul .json și să faceți clic pe „Importați setările Customizer Divi”.

Si asta e.

Ce includ setările Divi Customizer?

Setările personalizatorului includ practic toate primele 7 secțiuni.

1. setari generale
2. Antet și navigare
3. Subsol
4. Butoane
5. Blog
6. Stiluri mobile
7. Scheme de culori

Ultimele 4 secțiuni sunt specifice WordPress și nu vor fi transferate la alte instalări Divi. Aceste secțiuni includ:

1. Meniuri
2. Widgeturi
3. Prima pagină statică
4. CSS suplimentar

Este important să rețineți că CSS suplimentar nu este reportat. S-ar putea să vă bazați pe aceste setări pentru a vă oferi un impuls de economisire a timpului la următoarea dvs. versiune. Dacă acesta este cazul, vă sugerăm să creați o temă copil cu acel CSS, astfel încât să o puteți adăuga împreună cu setările de personalizare la următorul dvs. proiect.

Cum sunt stocate stilurile Divi Customizer

Pentru Divi Customizer (împreună cu Opțiunile Divi și Divi Builder), Divi servește resurse CSS statice care pot fi stocate în cache de browsere pentru a reduce timpul de încărcare a paginii. Aceasta înseamnă că stilurile nu sunt tipărite pe pagină, ci stocate într-un fișier CSS static separat. De fiecare dată când salvați setările de personalizare, fișierul CSS static este actualizat. Aceasta include și orice CSS suplimentar pe care l-ați adăugat.

Gânduri de închidere

Personalizatorul de teme Divi vine cu câteva opțiuni destul de puternice, iar procesul de personalizare este convenabil și plăcut de lucrat. Și dobândirea unei înțelegeri mai profunde a ceea ce pot face aceste opțiuni va îmbunătăți cu siguranță modul în care creați site-uri web cu Divi. Dacă nu ați făcut-o deja, luați ceva timp pentru a explora care ar fi setările dvs. de bază optime pentru un proiect, conectați-le la Customizer și creați un fișier de export. Vei fi surprins de impulsul (și încrederea) pe care ți-l va oferi atunci când începi un nou proiect.

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

Noroc!