Cum să treceți la un aspect întunecat în 5 pași utilizând funcțiile de eficiență ale lui Divi

Când proiectați un site web, una dintre primele decizii pe care le luați în mod conștient sau inconștient este stilul de culoare pe care îl veți da site-ului dvs. web. Cei curajoși dintre noi ar îndrăzni să meargă pentru o paletă completă de culori vibrante, dar, să fim sinceri, este incredibil de greu de realizat. De aceea, de obicei, este mai sigur să mergeți fie cu un aspect luminos, fie cu un aspect întunecat. În secțiunea Premade Layouts din Biblioteca Divi, puteți găsi o tonă de layout-uri luminoase și întunecate pe care sunteți liberi să le utilizați atunci când construiți orice tip de site web. Dar dacă vă place aspectul, dar ați prefera o paletă de culori mai închisă sau invers?

Cu caracteristicile de eficiență ale Divi, trecerea de la un pachet de aspect luminos la întunecat și invers, este mai ușor ca niciodată. În această postare, vă vom arăta cum puteți transforma un aspect luminos într-unul întunecat în doar 5 pași. Timpul necesar pentru a face această tranziție este foarte scăzut dacă utilizați tehnicile potrivite. Știți că numărul de pași pe care trebuie să-i faceți va depinde întotdeauna de aspectul la care lucrați, dar odată ce veți obține abordarea generală, îl veți putea face să funcționeze pentru orice aspect cu care aveți de-a face.

Să ajungem la asta!

previzualizare

Doar în 5 pași, vom schimba pagina de destinație ușoară a Web Freelancer Layout Pack într-una întunecată.

Încărcați pagina de destinație a freelancerului web

Adăugați o pagină nouă și activați Visual Builder

Începeți adăugând o pagină nouă, acordând paginii un titlu și trecând la Visual Builder.

Încărcați Web Freelancer Layout Pack

Din cele trei opțiuni care apar pe ecran, alegeți să încărcați un aspect premade.

Găsiți pagina de destinație a Web Freelancer Layout Pack în lista pachetelor de layout gratuite și încărcați-o făcând clic pe butonul verde care spune „Use This Layout”.

Pasul 1: Schimbați culoarea generală de fundal

Schimbați culoarea de fundal a secțiunii primei secțiuni

E timpul să începem! Primul pas pe care vă recomandăm să îl faceți este schimbarea culorii de fundal a tuturor secțiunilor de pe pagina dvs. După ce faceți acest lucru, veți putea observa rapid ce elemente de design trebuie modificate pentru a se potrivi cu culoarea întunecată a fundalului. Deschideți prima secțiune a paginii și alegeți „# 0c0c0c” ca culoare de fundal a secțiunii.

Extindeți stilul la toate secțiunile

De îndată ce adăugați culoarea de fundal, faceți clic dreapta pe ea și faceți clic pe opțiunea „Extindeți culoarea de fundal”.

După ce faceți acest lucru, alegeți să extindeți culoarea de fundal la toate secțiunile de pe pagină.

Pasul 2: Schimbați culorile textului

Deschideți modulul antet Lățime completă și schimbați culoarea textului

Următorul pas pe care trebuie să îl faceți este schimbarea culorilor textului care sunt utilizate. După cum știți sau nu, există o opțiune implicită în Divi care vă permite să alegeți o paletă de culori deschise sau întunecate pentru textul de pe pagina dvs. Cu toate acestea, după ce alegeți o culoare personalizată, această opțiune este înlocuită cu culoarea personalizată pe care ați ales-o. În loc să verificați fiecare dintre elemente pentru a vedea dacă există o culoare personalizată acolo, mergeți mai departe și alegeți „Light” ca culoare a textului în modulul de antet Fullwidth.

Extindeți stilul la toate modulele

Apoi, extindeți această culoare ușoară a textului făcând clic dreapta și selectând opțiunea „Extindeți culoarea textului”.

Extindeți această nouă culoare la toate modulele de pe întreaga pagină.

Schimbați culorile personalizate utilizând funcția de selectare multiplă

După cum sa menționat anterior, pasul anterior nu se va aplica culorilor care au fost alese în prealabil. Modulele de comutare, de exemplu, au o culoare text personalizată pentru titlu. În loc să modificați fiecare dintre comutatoare individual, selectați-le pe toate simultan folosind tasta de control / comandă de pe tastatură și făcând clic pe fiecare dintre module în mod individual. După ce le-ați selectat pe toate, faceți clic pe pictograma de setări.

Acum, puteți face modificări aplicabile fiecăruia dintre modulele selectate în același timp. În acest caz, schimbăm culoarea textului titlului în „# 848484”.

Pasul 3: Schimbați butoanele

Butonul Deschideți Setări One pentru antetul Fullwidth

Este important să vă asigurați că îndemnurile de pe pagina dvs. se potrivesc în continuare cu paleta de culori a aspectului. În acest caz, avem un modul buton care arată minunat atât pe un aspect clar cât și întunecat. De aceea o vom extinde și la celelalte butoane de pe pagină. Mergeți mai departe și deschideți modulul antet Fullwidth și accesați setările Button One.

Extindeți stilul butonului la toate butoanele de pe pagină

Apoi, faceți clic dreapta pe setările Button One și selectați opțiunea „Extindeți butonul One Styles”.

Extindeți stilul butoanelor la toate butoanele de pe întreaga pagină.

Schimbați butonul 2 Culoarea textului în secțiunea Hero

Funcția de extindere nu ajunge la al doilea buton al modulului antet Fullwidth, deoarece nu este un modul autonom. De aceea, vom deschide setările Butonului doi și vom schimba culoarea textului în „#ffffff”.

Extindeți stilurile la toate anteturile cu lățime completă de pe pagina

Pentru a ne asigura că această culoare a textului este aplicată tuturor modulelor de antet Fullwidth de pe pagină, o vom extinde și.

După ce ați făcut clic dreapta pe culoarea textului și ați selectat opțiunea „Extindeți butonul două culori de text”, continuați și faceți-o să se aplice la toate anteturile cu lățime completă de pe întreaga pagină.

Pasul 4: Eliminați marja personalizată și înlocuiți-o cu umplutura personalizată

Eliminați marja personalizată

Când treceți la un aspect întunecat, este de asemenea important să eliminați toate valorile de marjă personalizate care aduc spații albe pe pagina dvs.

Folosiți în schimb căptușeala personalizată

Cu toate acestea, puteți păstra distanța existentă anterior adăugând în schimb marja personalizată ca umplutură personalizată.

Pasul 5: Căutați și modificați setările speciale de proiectare

Determinați setările speciale de proiectare

Ultimul pas pe care va trebui să îl faceți este foarte specific fiecăruia dintre machete. Elementele de design care sunt unice pentru un aspect trebuie schimbate, de asemenea. Aceasta poate include, dar nu se limitează la, unele dintre următoarele setări:

• Box Shadows
• Fundaluri de coloană
• Culori pictograme
• Culori despărțitoare
• ...

Utilizați Găsiți și înlocuiți pe Row Box Shadow Color

Pentru acest aspect particular, unul dintre lucrurile pe care va trebui să le schimbăm este culoarea umbrelor de casetă de rând care este utilizată. Deschideți setările rândului și faceți clic dreapta pe umbra casetei fără a o modifica. Apoi, selectați opțiunea „Găsiți și înlocuiți”.

Utilizarea funcției Găsiți și înlocuiți este cea mai bună modalitate de urmat dacă doriți să modificați un anumit cod de culoare pe întreaga pagină. Îl puteți înlocui cu ușurință cu un alt cod de culoare, în acest caz „# 33302f”. Acest lucru vă va asigura că nu trebuie să explorați toate elementele de design pentru a vedea exact unde a fost utilizată o culoare.

Schimbați manual setările unice

Cu toate acestea, există și setări de proiectare recurente unice și în machete. Pentru a le schimba, va trebui să o faceți manual. Rândul de pe ecranul de imprimare de mai jos, de exemplu, are o umbră de culoare care nu a fost utilizată în altă parte a paginii. De aceea îl schimbăm manual în „# 33302f”.

previzualizare

Să aruncăm o privire finală asupra rezultatului final după parcurgerea celor cinci pași.

Gânduri finale

În această postare, te-am prezentat transformând un pachet de aspect luminos într-unul întunecat în doar 5 pași. Numărul de pași pe care trebuie să-i faceți va depinde întotdeauna de aspectul la care lucrați, dar, în general, abordarea rămâne aceeași. Dacă aveți întrebări sau sugestii, anunțați-ne în secțiunea de comentarii de mai jos!