Cum să aplicați palete de culori pe site-ul dvs. Divi

Publicat: 2021-09-05

Există puține lucruri mai rele pe internet decât un site web fad. Sigur, unele site-uri web optează intenționat pentru aspectul brutalist sau minimalist (vă uită la Craigslist), dar nici acestea nu sunt fade . Având o paletă de culori solidă este o modalitate sigura de a face site - ul dvs. să iasă afară din masele bej, acele monocromatice neinspirați care eshops de presă mai mult decât presa IM. Din fericire, Divi te-a acoperit cu o combinație a sistemului nostru Magic Color și a funcției Global Colors. Puteți aplica palete de culori pe site-ul dvs. Divi cu ușurință. Rezultatele vor impresiona vizitatorii dvs.

Sfaturi generale despre paletele de culori

Indiferent de cât de ușor este să adăugați o paletă de culori pe site-ul dvs. Divi, este imperativ să utilizați tipul corect de paletă pentru industria și marca dvs. Dacă aveți deja culori de marcă, acestea sunt alegerea evidentă de a intra. În afară de a intra adânc în teoria culorilor (ceea ce este foarte interesant, apropo), avem câteva sfaturi care vă pot ajuta să aflați de unde să începeți cu paletă de culori nouă.

1. Decideți pe site-ul Dark-Colored sau Light-Colored

În paleta de culori pe care o veți folosi, veți avea, fără îndoială, culori deschise și întunecate. Contrastul este obligatoriu într-o paletă de culori, astfel încât conținutul scris să nu se piardă.

Acum, asta ne conduce imediat la prima întrebare pe care trebuie să o puneți atunci când doriți să aplicați o paletă de culori site-ului dvs. web; vrei să creezi un site web de culoare închisă sau deschisă la culoare? Doar pentru că alegeți una nu înseamnă că nu le puteți combina, dar alegerea vă ajută să vă alegeți paleta de culori mai ușor.

2. Alegerea culorii

În teorie, puteți stabili singur câte culori doriți să aibă paleta de culori. Nu există o modalitate standard de a aplica sau de a determina paletele de culori. Cu toate acestea, pentru a crea un echilibru frumos de culori cu Divi, vă recomandăm să utilizați cinci culori.

Pentru a vă ajuta să aplicați paletele de culori cu cinci culori pe site-ul dvs. web, am ales un tip de metodă pe care o vom aplica în mod constant la același aspect atunci când prezentăm diferitele palete de culori. Dar, înainte de a ne arunca cu capul în asta, să aruncăm o privire asupra diferitelor tipuri de culori pe care trebuie să le aveți în paleta de culori, dacă doriți să urmați metoda noastră.

Culori de fundal

palete de culori

Asigurați-vă că culorile de fundal pe care le alegeți se potrivesc. Veți folosi aceste culori de fundal unul lângă celălalt și pentru a obține rezultate frumoase; trebuie să aibă o anumită armonie.

Culoarea fontului

paleta de culori se schimbă

Următorul lucru pe care va trebui să îl alegeți este culoarea fontului. În mod logic, culoarea fontului depinde de culorile de fundal pe care le alegeți. Dacă ați ales culori de fundal de culoare deschisă, asigurați-vă că culoarea fontului este de culoare închisă și invers.

Hyperlink și CTA Color

paleta de culori se schimbă

Culoarea hyperlinkului pe care o alegeți este una dintre culorile care dau viață site-ului dvs. web. Asigurați-vă că această culoare se distinge de celelalte culori din paleta dvs., deoarece o veți folosi pentru îndemnurile pe care le includeți pe site-ul dvs. web.

Culoare pentru ultimele atingeri

paleta de culori se schimbă

Nu în ultimul rând, puteți alege o altă culoare care să aducă culoare site-ului dvs. Deși această culoare nu este la fel de importantă ca culoarea hyperlinkului, aceasta vă va ajuta să completați echilibrul culorilor pe site-ul dvs. web.

3. Asigurați-vă că există suficient contrast

Așa cum am menționat anterior, este esențial să oferiți contrast între unele dintre culorile din paleta de culori. Dacă utilizați o paletă de culori pentru un site web, acest contrast vă va ajuta în primul rând să faceți ca conținutul scris pe care îl partajați să fie lizibil. Pentru că, dacă conținutul dvs. nu este ușor de citit, care este scopul acestuia până la urmă?

4. Găsiți echilibrul corect de utilizare a culorii

Există diferite moduri de a determina cât de des doriți să utilizați o anumită culoare în paleta de culori. Crearea unui echilibru bun al culorilor este necesară dacă nu doriți ca aceștia să se simtă copleșiți de culorile pe care le utilizați pe site-ul dvs. web.

Asigurați-vă că utilizați culorile mai neutre din paleta de culori de cele mai multe ori și utilizați celelalte culori pentru a accentua conținutul pe care îl furnizați.

Cum să adăugați o paletă de culori pe site-ul dvs. Divi

Având toate acestea în minte, este timpul să vă adânciți în Divi și să aplicați noua paletă de culori a site-ului dvs.!

Paleta Divi implicită

În primul rând, accesați tabloul de bord WordPress și accesați Divi - Opțiuni tematice . Sub fila General , veți vedea o intrare intitulată Palete implicite Color Pickers . Ceea ce face acest lucru este să vă permite să selectați orice 8 culori pe care doriți să le accesați rapid oricând deschideți opțiunile de culoare în constructorul Divi. În mod implicit, acestea sunt culori vibrante pe care le folosesc mulți oameni, dar nu sunt o paletă completă care ar trebui folosită pe un singur site web.

paleta de culori în mod implicit

Vă rugăm să rețineți că acest lucru nu aplică culorile site-ului dvs. în sine. Le prezintă doar ca opțiuni rapide în constructor.

Intrați în Divi Builder

Indiferent dacă setați sau nu paleta în setările Divi, veți avea în continuare opțiunea de a aplica diverse culori elementelor de pe site-ul dvs. Pentru aceasta, accesați Divi Builder și introduceți setările oricărui modul pe care doriți să îl reglați în noua dvs. paletă.

selector de culoare

Sub culoarea aleasă în prezent pentru orice element, veți vedea pictograma elipsă (trei puncte) . Când faceți clic pe acesta, afișați instrumentul Divi's Magic Color. Constructorul ia în considerare culorile utilizate recent și culorile de pe pagina în sine pentru a vă oferi o serie de palete multiple formate din culori gratuite care ar trebui să funcționeze împreună destul de bine.

Setați culorile ca Global

După ce ați decis ce culori doriți să utilizați, este timpul să le setați ca globale. Culorile globale pot fi setate să se schimbe pe o pagină întreagă, indiferent de modul sau element . Adică, dacă doriți să schimbați 5 culori diferite, nu va trebui să faceți acest lucru de peste 100 de ori, individual, în cazurile de culoare respectivă. O vei face de 5 ori.

Pentru a începe, accesați orice modul cu un selector de culori. Sub el, veți vedea un link numit Global . Faceți clic pe ea și paleta generală dispare. De aici, veți seta ce culori doriți să fie disponibile la nivel global, făcând clic pe pictograma plus + .

global

Când apare noul selector, faceți clic pe bifa verde pentru a adăuga culoarea curentă ca opțiune globală.

culori globale

Nu contează unde este cercul alb. Valoarea hexagonală este ceea ce se adaugă culorilor globale. Acum veți vedea culoarea implicită adăugată lângă pictograma plus. Și puteți vedea că culoarea a fost aplicată site-ului datorită pictogramei de formă a picăturii de pe culoare în locul cercului obișnuit.

picătură înseamnă culoare globală

În plus, puteți face clic dreapta pe o culoare aleasă și puteți selecta „Convert to Global” pentru a o adăuga la listă.

divi global convert

Repetați acest proces pentru fiecare culoare din paleta aleasă, astfel încât în ​​cele din urmă întreaga paletă să fie salvată sub linkul Global. Acest lucru este foarte important pe măsură ce treceți prin aplicarea noii palete tuturor elementelor de pe o pagină.

Aplicați culori globale

Apoi, doriți să înlocuiți toate instanțele de aceeași culoare de pe pagina dvs. pot fi ajustate la nivel global. Ceea ce doriți să faceți este să intrați în elementul cu culoarea pe care doriți să o modificați și să faceți clic dreapta pe el. Apoi veți alege Găsiți și înlocuiți din meniul contextual. Nu convertiți această culoare în globală aici . Aceasta face parte din pasul următor.

găsiți și înlocuiți

Următorul ecran va fi locul în care alegeți să înlocuiți acea culoare cu cea globală. Asigurați-vă că sub Înlocuire cu faceți clic pe Global și apoi alegeți culoarea globală pe care doriți să o extindeți pe pagină. Asigurați-vă că bifați caseta care spune „Înlocuiți toate valorile găsite în fiecare tip de opțiune, fără a se limita la [inserați tipul de element curent]”. Acest lucru vă va asigura că, indiferent de ce, acea culoare va fi înlocuită.

găsiți și înlocuiți cu global

Acum, puteți edita acea culoare globală specială și, atunci când o faceți, fiecare instanță a acesteia se va schimba. Rețineți, nu ați ales o culoare nouă din paletă. Aceasta va schimba doar culoarea curentă. Editați culoarea pentru ao schimba în toate locurile, deoarece ați marcat fiecare instanță a acelei culori ca globală.

culegerea culorilor

Puteți să-l editați ca colectiv folosind selectorul de culori. Doar faceți clic pe picătură pentru a alege una nouă.

editarea culorilor

După aceea, se repetă acest proces pentru fiecare culoare din noua ta paletă. Doar o singură schimbare pentru fiecare culoare din paleta dvs. Nu o schimbare a fiecărui element particular al unei anumite culori.

Încheierea

Alegerea și aplicarea unei palete de culori globale pe site-ul dvs. Divi nu a fost niciodată mai ușoară. Puteți utiliza caracteristica noastră Magic Color pentru a vă ajuta să alegeți o paletă și apoi le puteți seta ca culori globale pentru site-ul dvs. Odată ce ați terminat, trebuie doar să alegeți culoarea pe care o schimbați și să utilizați funcția de căutare și înlocuire încorporată a Divi pentru a înlocui acele culori de pe pagină. Cu acest flux de lucru, sunteți sigur că veți economisi tone de timp pe măsură ce reproiectați diferite site-uri web și modificați unele dintre pachetele noastre de layout gratuit.

Bucurați-vă!

Imagine prezentată de articol de la ART.ICON / shutterstock.com