Cum se creează un sistem de culori cu Divi 5

Opțiunile de culori aleatorii duc rar la un design coeziv. Dacă construiți site -uri web profesional, aveți nevoie de un sistem intenționat. Puteți construi un sistem de culori real în Divi 5 folosind variabile de gestionare a culorilor și de design. Acestea sunt culori pe care le -ați setat direct în editorul vizual, pot accesa în orice câmp de culoare și veniți cu o mulțime de alte facilități (pe care le vom arăta mai jos).

Această postare vă va arăta cum să configurați un sistem de culori flexibil, scalabil, în Divi 5.

Ce este un sistem color?

Un sistem de culori este practic o paletă pre-planificată de culori utilizate în mod constant pe site-ul dvs. Ajută totul să pară în stil intenționat, mai degrabă decât aruncat la întâmplare împreună. Pentru un sistem bun, de obicei aveți nevoie:

• Culoare primară : culoarea principală de marcă.
• Culoare secundară : suportă și contrastează cu primarul.
• Culoarea textului : clar și lizibil pentru titluri și paragrafe.
• Accent : alte culori pentru alerte, notificări și alte lucruri importante (opțional).
• Culori de fundal : de obicei neutre sau nuanțe subtile.

Regula 60-30-10 se aplică culorii în designul web. În general, culorile neutre (cum ar fi fundalurile de secțiune și spațiul negativ) ar fi utilizate pentru 60%din design, o culoare primară pentru 30%și culori secundare/accent pentru restul de 10%.

Cum să alegeți culorile site -ului

Culorile mărcii și culorile utilizate pe site -ul dvs. web nu sunt decizii care trebuie luate ușor. Crearea unei palete de culori intenționate depinde de abilitatea designerului, psihologia culorilor, industria și diferențierea mărcii. Dar, după ce aveți culorile de bază și activele de marcă (cum ar fi variațiile logo -ului), puteți începe să creați un sistem de proiectare.

Puteți face câteva sarcini rapide pentru a vă pregăti pentru construirea site -ului dvs. web dacă aveți resurse de proiectare limitate. În primul rând, faceți o citire blestemată despre psihologia culorilor. Căutați ce valori ale mărcii doriți să le transmiteți (încredere, tinerețe, inovație etc.) și încercați să potriviți culorile pe baza acestor valori. Apoi, uitați-vă la unele mărci recunoscute de gospodărie, care credeți că se potrivesc valorilor dvs. de marcă. Ce culori folosesc? Cum le folosesc pe site -ul lor web, reclame și postări sociale?

Valorile companiei dvs. ar putea fi chiar determinate de tipul de muncă pe care îl faceți. Lăcătușii și instalatorii trebuie să fie de încredere, așa că albastrul este o modalitate excelentă de a transmite asta. Planificatorii financiari și peisajii se ocupă de creștere și sustenabilitate (în domeniile lor), deci Green este o ancoră bună acolo. Fermierii de flori, centrele de îngrijire a copiilor și restaurantele se pot apleca pe roșii și galbeni pentru a conecta energie și vitalitate la mărcile lor. După ce aveți o idee generală, folosiți ceva precum coolers pentru a crea o paletă simplă.

Construirea sistemului de culori în Divi 5

Divi 5 vine cu managerul variabilului de design, care este cel mai simplu mod de a gestiona culorile globale. În ea, aveți patru culori globale pre -atribuite pentru a lucra cu cutia. Sunt:

1. Culoarea primară
2. Culoare secundară
3. Culoarea textului de îndreptare
4. Culoarea textului corpului

Pasul 1: Definiți -vă culorile de bază ca variabile

În bara laterală din stânga Divi, deschideți managerul de variabilă de proiectare. Găsiți secțiunea Colors și ar trebui să vedeți aceste patru implicite diferite.

Aceste patru etichete nu pot fi șterse, dar puteți alege ce culoare să setați fiecare. În plus față de aceste patru, puteți adăuga cât mai multe culori doriți făcând clic pe butonul Adăugare Global Color . Continuați și introduceți valorile hex -uri ale culorilor din generatorul de culori.

Aceste variabile devin instantaneu disponibile peste tot în constructorul vizual al Divi, care este super la îndemână. Dar asigurați -vă că le salvați!

Pasul 2: Creați nuanțe și nuanțe cu culori HSL

Folosind filtrele HSL ale Divi, putem crea nuanțe (versiuni mai ușoare ale culorilor noastre) și nuanțe (versiuni mai întunecate ale culorilor noastre). Pentru acest proiect, vom face doar variații pentru culorile primare și secundare. Puteți utiliza un generator de palete de culori pentru a crea aceste variații de culori.

Primul pas aici este să creăm o altă culoare globală. Cu toate acestea, în loc să lipiți o valoare Hex, selectați o culoare existentă pentru a crea variații (nuanțe și nuanțe).

Acum, trebuie să aplicăm un filtru la acea culoare de bază pentru a crea o variație. Faceți clic pe cipul de culoare și apoi selectați „Filtru Color” sau faceți clic pe Swatch -ul de culoare pentru noua dvs. variabilă de culoare relativă.

Faceți acest lucru pentru fiecare dintre variațiile dvs. de culoare. Asigurați -vă că oferiți variații de culoare nume de recunoscut și salvați.

De exemplu, deoarece culoarea primară este destul de întunecată, putem adăuga câteva nuanțe mai deschise și câteva nuanțe mai închise. Asta ar trebui să -mi ofere o mulțime de opțiuni atunci când aplicăm sistemul meu de culori pe un design de pagini.

Repetați pașii de mai sus pentru culorile dvs. secundare și/sau accent. Când creați aceste variații, selectați întotdeauna o culoare de bază și apoi aplicați filtre deasupra acesteia. În acest fel, dacă îți schimbi vreodată culoarea principală, aceste variații vor urma.

Aplicarea culorilor dvs. în modele cu divi

Variabilele tale există acum. E timpul să le folosești. Vom începe cu o pagină Divi necompletată și vom lucra secvențial spre un aspect frumos proiectat.

Pasul 1. Creați un cadru de fir al paginii dvs.

Puteți porni de la un fir de fir în loc de o pagină goală, care vă poate ajuta să înțelegeți mai bine sistemul dvs. de culori. După ce înțelegeți structura și fluxul general al unei pagini, puteți începe să faceți alegerile de proiectare. Puteți utiliza, de asemenea, unul dintre numeroasele pachete de layout premade ale Divi sau site -uri de pornire. Nu contează dacă au deja culori definite; Putem schimba cu ușurință acestea.

Pentru acest exemplu, am ales să modificăm pachetul de aspect de consultanță și să folosim aspectul paginii de pornire. Dacă faceți ceva similar, puteți importa presetările. Cu toate acestea, veți dori să editați culorile din acele presetări. De dragul simplității, vom modifica stilurile direct la nivelul modulului/elementului.

Pasul 2. Tipografie și culoare

În mod implicit, DIVI folosește titlul global și culorile textului corpului, ceea ce face textul dvs. curat și lizibil. Puteți depăși întotdeauna aceste opțiuni de culori predeterminate schimbând culoarea textului pe module sau presetări, dar nu ar trebui să faceți asta prea des.

Observați cum se dezvăluie culoarea rubricii în modul. Divi atribuie automat culoarea globală la titluri și textul corpului pentru tine. Desigur, îl puteți înlocui selectând o culoare diferită.

Puteți personaliza culoarea pe care legăturile le fac pentru a le face mai vizibile și atrage clicuri.

Pot exista și alte module (pe lângă modul de titlu și text) cu text pe care doriți să îl stilați. Module precum Formularul de contact, Timerul Countdown și modulul de blog pot necesita aplicarea culorilor în mod unic.

Pasul 3. Butoane de styling

Butoanele Divi sunt simple în mod implicit și își asumă culoarea primară. Dar nu ești forțat să faci această decizie dacă vrei ceva diferit. Deschideți panoul de setări al modulului, navigați la fila Design și selectați butonul . În cadrul setărilor butonului, activați „Utilizați stiluri personalizate pentru buton”. Setați fundalul dvs. la culoarea globală la alegere și textul butonului la o culoare lizibilă, cum ar fi albul.

Dacă aveți două butoane cot la cot sau mai multe butoane pe pagină, puteți crea o presetare a butonului separat pentru un stil de buton secundar folosind culoarea secundară sau un alt accent.

Creați stări hover cu nuanțe și/sau nuanțe

Statele Hover adaugă interacțiune și un simț al scopului. Folosiți -vă nuanțele și nuanțele anterioare cu stilurile de hover. Este evident să se implementeze pe butoane, dar poate fi utilizat subtil și în altă parte.

Faceți clic pe pictograma Cursor de lângă opțiunea de culori de fundal pentru a activa stările de hover. Setați -vă culoarea de fundal. Când utilizatorii trec peste buton, acesta răspunde vizual, ghidând interacțiunea în mod natural.

Pasul 4. Crearea secțiunilor cu presetări de culori și gradienți

Secțiunile din DIVI au fonduri transparente în mod implicit. Aceasta înseamnă că, dacă este lăsată nesemnificativă, acestea vor arăta de obicei ca alb. Puteți adăuga unele intrigi creând variații de culori neutre bazate pe nuanța uneia dintre culorile dvs. principale.

Această culoare de fundal este aproape de negru, dar împărtășește aceeași nuanță de bază ca culoarea primară pentru a -i oferi coeziunea subtilă „pe temă”.

De asemenea, puteți experimenta cu gradienți folosind variantele dvs. de culoare. Trucul aici este să nu folosiți prea multe combinații de culori. Vrei un design disciplinat, coeziv, bazat pe pereche de culori și ierarhie.

Un memento este în ordine în acest moment. Doriți să salvați majoritatea acestor împerecheri și decizii de culori în presetări (fie presetări de grupuri de opțiuni sau elemente). După ce ați creat și implementat variabilele de proiectare în proiectarea dvs. prin presetări, puteți utiliza sistemul dvs. de proiectare pentru a crea pagini ulterioare mult mai rapid. Acest lucru vă asigură, de asemenea, să lucrați cu modele de proiectare consistente pe întregul site.

Și dacă ulterior determinați că o culoare este ușor oprită, puteți regla valorile HSL ale culorii de bază și toate instanțele de culoare (și toate culorile relativ create pe baza acelei culori) se vor schimba pentru dvs.

Înfășurați sistemul dvs. de culori Divi 5

Un sistem de culori atent este unul dintre cele mai ușoare victorii în designul web, iar Divi 5 vă oferă instrumentele pentru a -l face să funcționeze pentru dvs. Cu doar câțiva pași, puteți:

• Definiți -vă culorile de marcă de bază ca variabile de design reutilizabile
• Extindeți -le în nuanțe și nuanțe utile cu filtre HSL
• Aplicați -le în mod constant pe text, butoane, formulare și secțiuni
• Salvați -vă alegerile ca presetări, astfel încât fiecare pagină nouă să respecte aceleași reguli

Repararea este mai mare decât estetica. Un sistem de culori solide creează claritate, direcționează vizitatorii către acțiune și face ca brandul tău să se simtă coerent în fiecare colț al site -ului tău. Și pentru că totul în Divi este condus de variabilă, o ajustare la o culoare de bază poate să se orienteze instantaneu printr-un întreg site. Asta înseamnă mai puțin tinkering și mai multă încredere pe care designul dvs. o va ține împreună pe măsură ce scalezi.