Cum Funcționează Împreună Stilul Temei Elementor și Opțiunile de Design
Cum Funcționează Împreună Stilul Temei Elementor și Opțiunile Sistemului de Design? Un sistem de design le permite creatorilor de web să mențină consistența pe un site prin stabilirea unui set de standarde și elemente de design comune. Acest lucru este util mai ales atunci când un site este mare sau atunci când o echipă de creatori poate lucra simultan pe site. Acest sistem de design poate fi sub forma unei documentații scrise care ar putea include un ghid de stil de culoare și tipografie, o listă de pictograme comune sau imagini care vor fi utilizate pe tot site-ul și alte elemente de marcă care vor forma un site web consistent și coerent. Designerii și creatorii de conținut se pot referi la ghidul sistemului de design atunci când proiectează o pagină, scriu conținut etc.
Dar chiar și acest tip de sistem de proiectare are limitările sale. Creatorii web trebuie să meargă în mod constant înainte și înapoi între ghid și munca pe care o fac, ajustând fiecare element, pe rând.
Un gând obișnuit care ar putea trece prin capul unui creator în timp ce adaugă un titlu simplu la o pagină: „Care a fost valoarea hexagonală a titlului H3 din nou? Și ce greutate a fontului a fost? 500? Nu, cred că asta era pentru titlurile H2, 400 era pentru titlurile H3, nu-i așa?” Apoi, creatorul scotocește pentru a găsi ghidul de stil fie într-un folder fizic, fie într-un folder online, găsește informațiile despre stil și începe procesul de schimbare a culorii și a greutății fontului. Înmulțiți acest proces doar cu numărul de titluri de pe un site și apoi adăugați toate celelalte elemente la acel proces și devine rapid un proces de proiectare consistent, dar care necesită timp.
Există o Modalitate mai Bună de a Utiliza un Sistem de Proiectare
Un sistem de design care este încorporat în produsul de creare web în sine este un salt uriaș înainte de la simpla referire la un ghid scris. Imaginați-vă că, creatorul nostru web a construit întregul sistem de design chiar în Elementor de la începutul proiectului. Dacă un element avea nevoie de o combinație specifică de culoare și tipografie care a fost desemnată ca o combinație standard de marcă și acea combinație era o opțiune simplă cu un singur clic care trebuia aleasă la editarea elementului, aceasta ar economisi mult timp față de cea anterioară, procesul de referință manual al ghidului.
La fel de Importante – Schimbări Viitoare la Nivel de Site
Acum imaginați-vă, în vechiul mod de a face referire la un ghid al sistemului de design, că compania întreprinde o schimbare completă a mărcii și este datoria creatorului web să schimbe fiecare culoare, familie de fonturi, greutate de font etc. de pe întregul site. Aceasta ar putea fi o acțiune enormă și, probabil, multe elemente ar fi ratate în acest proces, provocând un design ciudat și incoerent în locuri ciudate ici și colo.
Cu sistemul de design încorporat în produsul de design al site-ului în sine, totuși, acest tip de schimbare poate dura literalmente câteva minute. Elementor facilitează efectuarea unei schimbări într-un singur loc și reflectarea acestei schimbări pe întregul site. Combinația dintre opțiunile de stil de temă ale Elementor și Global Colors & Typography întruchipează această metodologie de sistem de design.
Întrebări și Răspunsuri
Î: Sunt confuz. Care este diferența dintre stilul temei și culorile globale/fonturile globale ale sistemului de design? Nu controlează atât culorile, cât și tipografia între site-uri?
R: Deși stilul temei și culorile globale și tipografia sunt legate, ele îndeplinesc funcții diferite. Stilul temei setează definiții de stil de rezervă pentru etichetele HTML precum <H1>, <body>, <label> și așa mai departe. Ele nu sunt specifice Elementorului, dar sunt cât mai generale posibil. Aceasta este setarea de bază pentru site, care intră în joc doar ca alternativă, dacă nu au fost stabilite definiții specifice pentru elemente.
Culorile globale și Fonturile globale sunt straturi de stil suplimentare care folosesc variabile CSS. Acest strat se află deasupra stratului Stil temă și are prioritate. Acesta oferă elementele de bază ale întregului sistem de proiectare al site-ului dvs. Atribuiți culorile și tipografia celor patru setări globale predefinite și adăugați orice setări globale suplimentare de culoare și tipografie după cum doriți, dându-le fiecăruia un nume. Pentru orice element pe care îl utilizați în Elementor, puteți selecta rapid una dintre setările predefinite din sistemul dvs. global de design.
În viitor, o singură modificare a setărilor globale va afecta toate cazurile de pe site-ul dvs. Dacă vreun element, fie în interiorul Elementor, fie în afara lui Elementor, nu are o setare globală atribuită, atunci va fi implicit la setările definite în stilul temei. Deci, după cum puteți vedea, atât Stilul temei, cât și Culorile globale și Fonturile globale ale sistemului de design sunt caracteristici foarte necesare, așa că asigurați-vă că le acordați atenție ambelor.
Î: Asta ajută la clarificarea lucrurilor, dar ai putea să-mi dai un exemplu concret?
R: Sigur! Editați orice pagină Elementor și setați culoarea unui titlu H2 și tipografia acesteia la stilul secundar global pe care l-ați atribuit anterior prin Setări site > Sistem de proiectare > Culori globale și fonturi globale. Acum, procedați la fel pentru orice alt element de pe această pagină și pentru toate paginile pentru care doriți să aibă aceeași culoare sau stil de text. Doriți ca butoanele dvs. să aibă aceeași culoare ca și titlurile dvs. H2? Grozav, doar selectați culoarea secundară pentru fiecare dintre butoanele dvs.
Acum, setați titlurile dvs. H3 la o culoare și un stil de text diferit, folosind una dintre celelalte setări globale predefinite. Să presupunem că ați creat o nouă setare globală numită Complementar. Vrei ca unele dintre fundalurile coloanelor tale să aibă aceeași culoare? Ok, atribuiți setarea de culoare globală complementară pe care ați creat-o și pentru acele fundaluri de coloană.
Faceți acest lucru pentru orice alte elemente, după cum este necesar.
În viitor, dacă decideți vreodată să schimbați una dintre culorile sau setările de tipografie ale site-ului dvs., veți putea să o faceți o dată și să știți exact ce elemente vor fi afectate pe site. Cu o simplă modificare a setărilor globale, fiecare element care utilizează acea setare anume se va schimba instantaneu pe site-ul dvs.
Î: Ok, am înțeles asta și este foarte grozav. Dar am câteva pagini care nu sunt editate cu Elementor? Cum rămâne cu titlurile, butoanele și fundalul coloanelor? Ce stiluri vor moșteni?
R: Acolo intră în joc setările pentru stilul temei. Chiar dacă acele pagini nu sunt pagini editate de Elementor, stilul temei pe care l-ați setat în setările globale ale Elementor va fi în continuare controlat. Elementele de pe acele pagini vor moșteni în continuare stilurile pe care le-ați setat în Stil temă, deoarece nu li s-au atribuit nicio culoare globală sau stil de fonturi globale. În acest fel, Elementor este capabil să controleze stilul întregului site, chiar și pe paginile care nu sunt editate cu Elementor!
Dacă, dintr-o întâmplare, aveți elemente pentru care nu le-ați setat stilul fie în Sistemul de design > Culori globale sau Fonturi globale sau în Stil temă, atunci stilul acelui element va fi moștenit fie din temă, fie din browser. , sau dintr-o altă sursă necunoscută, cum ar fi un plugin care ar putea stabili stilul unui element. Deci, pentru control deplin, nu lăsați nimic necompletat în stilul temei. Setați acolo toate opțiunile posibile, astfel încât să știți că setările dvs. vor fi soluția implicită pentru orice setări care nu sunt controlate de opțiunile Global Colors sau Global Fonts ale Sistemului de design.
Î: Înainte de lansarea Global Colors, selectorul de culori avea capacitatea de a salva culori. Aceasta a fost o modalitate mică de a menține coerența designului, având întotdeauna culorile mărcii mele disponibile în fiecare selector de culori. Acestea nu mai există în noul selector de culori. Mi-am pierdut toată munca de a adăuga culorile mărcii mele la selectorul de culori?
R: Munca ta nu a fost irosită. Când faceți upgrade la Elementor 3.0, când au fost introduse noile culori globale și selectorul de culori actualizat, procesul de actualizare a adăugat automat culorile salvate în paleta de culori globale. Le puteți alege cu ușurință din lista drop-down pentru opțiunea de culoare a oricărui element, fără să deschideți selectorul de culori acum!
