Cum să utilizați Divi pentru a crea diferite machete de culori ale paginilor dvs.

Crearea de machete de culori pentru clienții dvs. este un pas important în procesul de proiectare web. Uneori, clientul poate avea deja o paletă de culori a mărcii companiei pe care o puteți utiliza pentru site. Dar, de multe ori, va trebui să oferiți câteva scheme de culori sugerate, care credeți că se vor potrivi atât brandului companiei, cât și vor arăta excelent pe site-ul lor web.

Cu Divi, puteți schimba cu ușurință schema de culori a oricărui aspect al paginii folosind funcții de design precum Găsire și înlocuire și sugestii de culoare în cadrul constructorului vizual. Și puteți crea, de asemenea, mai multe versiuni ale unei pagini (cu scheme de culori diferite) pentru clientul dvs.

În acest tutorial, vă voi prezenta prin procesul de utilizare a Divi pentru a crea noi machete de schemă de culori pentru o pagină de pornire. Sperăm că veți învăța câteva trucuri pe parcurs.

Să începem!

Configurați noua dvs. pagină

Voi folosi Aspectul principal al Business Coach pentru acest tutorial. Deci, dacă nu ați făcut-o deja, creați o pagină nouă și implementați constructorul vizual. Apoi selectați „Choose Premade Layout”. Din fereastra pop-up Adăugare din bibliotecă, selectați aspectul paginii de pornire Business Coach.

După ce aspectul este încărcat pe pagină, nu uitați să îl publicați.

Vom folosi acest aspect al paginii de start pentru a crea diferite machete de culori. Dar, deocamdată, trebuie să alegem o nouă schemă de culori.

Alegerea schemei de culori

Este posibil să aveți deja în vedere o schemă de culori, dar dacă nu, puteți folosi sugestiile de culori ale Divi sau un generator de schemă de culori de la terți. Pentru mai multă inspirație, puteți naviga pe web pentru scheme de culori care funcționează bine pentru industria dvs.

Utilizarea generatoarelor de schemă de culori terță parte pentru a vă crea schema de culori

Există câteva minunate generatoare de scheme de culori terțe (și gratuite) pe web pentru a vă ajuta să alegeți schema de culori perfectă pentru site-ul dvs. Unele dintre generatoarele mele preferate de palete de culori sunt de la Coolers.co, Canva și Adobe.

Majoritatea acestor generatoare de scheme de culori vor genera cel puțin cinci culori. Asigurați-vă că salvați toate culorile de care aveți nevoie pentru a alcătui noua dvs. schemă de culori.

Crearea unei scheme de culori folosind sugestiile de culoare încorporate ale Divi

De la lansarea noului manager de culoare Divi și a sugestiilor de culoare magică, Divi ține automat evidența culorilor salvate și utilizate recent, care pot fi accesate la schimbarea unei opțiuni de culoare din Divi Builder. Puteți vizualiza fiecare paletă făcând clic pe fila „Salvat” sau „Recent”.

Divi are, de asemenea, un instrument de sugestie a culorilor simplu și inteligent încorporat chiar în constructorul vizual. Nu voi intra în toate detaliile algoritmului folosit (nu sunt sigur că aș putea oricum), dar, în termeni generali, Divi va genera o paletă de culori complementare (și analoage) pe baza culorii de bază curente (culoarea selectat în opțiune). Acest lucru vă va ajuta să alegeți combinații de culori armonioase pentru designul dvs.

Pentru a vizualiza sugestiile de culoare (sau color-scape), trebuie doar să faceți clic pe pictograma color-scape (cea cu trei puncte) direct sub opțiunea de culoare selectată. Acolo veți găsi palete care sunt generate din culori complementare și analogice ale culorilor salvate și utilizate recent. Fiecare rând are o nouă schemă de culori extinsă pentru fiecare culoare din paleta de culori recentă sau salvată.

Deși acest instrument de sugestie a culorilor este conceput pentru a ajuta la selectarea culorilor la nivel de secțiune, rând și modul, puteți utiliza cu ușurință paleta de culori sugerată ca o nouă schemă de culori pentru fiecare pagină.

Crearea unei scheme de culori pentru aspectul paginii de start a antrenorului de afaceri

Acum, să începem să creăm noi machete de schemă de culori pentru aspectul Home Page Business Coach pe care l-am adăugat mai devreme la noua noastră pagină. Acest aspect premade are în prezent o schemă de culori de bază. Culoarea principală este, în mod evident, albastrul închis care este folosit pe tot parcursul. De asemenea, are câteva nuanțe diferite de gri, precum și culori de accent. Lor este, de asemenea, o culoare albă standard pentru fundalurile de conținut și o culoare neagră pentru text. Vă puteți imagina că, dacă ați înlocuit fiecare instanță a acelei culori primare albastru închis cu o altă culoare, veți avea o schemă de culori complet nouă.

Din constructorul vizual, deschideți setarea antetului de lățime completă în secțiunea superioară a aspectului și găsiți butonul One Color Text. Aceasta este culoarea albastră principală pe care o folosește acest aspect. Acum faceți clic pe pictograma color-scape pentru a vedea sugestiile de culoare pentru acea culoare albastră actuală. Acestea vor fi găsite în paleta de culori din rândul superior.

În acest moment puteți selecta orice culoare din paletă pentru a vedea noi scheme de culori, dar pentru acest exemplu, voi rămâne cu prima generată.

Salvarea schemei de culori în paleta de culori implicită

Pentru a face lucrurile mult mai convenabile pe drum, va trebui să vă actualizați noile culori ale paletei de culori pentru a înlocui paleta implicită a selectorilor de culori din opțiunile temei. În acest fel, culorile dvs. vor fi disponibile în paleta de culori salvată în Visual Builder pe tot restul modificărilor de culoare.

Într-o filă nouă, navigați la Divi> Opțiuni temă. Veți vedea opțiunea implicită a paletei de culori în fila General. Nu există o modalitate reală de copiere peste paleta de culori generată din sugestiile de culoare pentru culoarea noastră albastră. Vă sugerez să vă deschideți pagina cu constructorul vizual activ într-o fereastră și opțiunile Divi Theme într-o altă fereastră. Apoi copiați fiecare cod de culoare în paleta de culori implicită.

Salvează setările.

Sfat: este posibil să nu doriți să înlocuiți primele două culori implicite (alb-negru) pentru comoditatea de a edita textul și fundalurile ulterior, dar dacă aveți nevoie de toate sloturile de culoare, nu ezitați să le utilizați.

Paleta de culori implicită nu va fi actualizată pe pagina dvs. curentă, deoarece a moștenit deja paleta de culori implicită anterioară. Va trebui să creați din nou o pagină nouă cu aspectul pentru a vedea noua paletă de culori salvate în setările dvs.

Dacă acesta este un inconvenient prea mare, puteți alege să actualizați paleta de culori implicită numai pentru pagina dvs. curentă. Pentru aceasta, deschideți meniul de setări și faceți clic pe pictograma Setări pagină. Apoi actualizați paleta sub fila de proiectare.

Aceasta va actualiza paleta de culori pentru întreaga pagină fără a fi nevoie să creați o altă pagină.

Motivul pentru care am ales să actualizez paleta de culori implicită pentru temă (în loc doar de pagină) a fost să evit să trebuiască să adaug noi palete de culori la fiecare nouă machetă de pagină pe care o voi crea.

Utilizarea Găsiți și înlocuiți pentru a vă actualiza culorile paginii

Acum reveniți la aspectul paginii de pornire cu constructorul dvs. vizual activ și mergeți la opțiunea Buton One Text Color sub setările Header pentru lățime completă (același loc în care erați înainte). Acum aspectul salvat nu apare încă, dar este în regulă. Asigurați-vă că este selectată culoarea albastră închisă originală, apoi faceți clic pe pictograma color-peisaj pentru a evidenția sugestiile de culoare. Aceasta va arăta aceeași schemă de culori în rândul de sus.

Selectați culoarea maro închis (# 54381c).

Apoi deschideți selectorul de culori pentru a vizualiza codul de culoare și copiați codul de culoare în clipboard evidențiindu-l și apăsând ctrl + C (sau Cmd + C).

Întrucât nu vrem de fapt să facem modificarea destul de mare, faceți clic pe butonul de anulare violet din partea de jos a modului de setări pentru a readuce culoarea albastră originală pe care trebuie să o înlocuim.

Acum faceți clic dreapta pe culoarea albastră originală și faceți clic pe opțiunea Găsiți și înlocuiți.

În fereastra pop-up Găsiți și înlocuiți, lipiți culoarea maro sub „Înlocuiți cu”. Deoarece dorim să înlocuim culoarea pe întreaga pagină, puteți păstra opțiunea „Înăuntru” ca „Această pagină”. Asigurați-vă și selectați opțiunea „Înlocuiți totul”, astfel încât sfera de schimbare a culorii să nu fie limitată doar la butoanele One Colors Text. Apoi faceți clic pe Înlocuire.

Nu uitați să salvați setările.

Acum verificați noua schemă de culori.

Acum continuați și salvați aspectul în biblioteca Divi deschizând meniul de setări și făcând clic pe pictograma Salvare în bibliotecă. Dați aspectului un nume precum „Brown” și apoi faceți clic pe Salvare în bibliotecă.

Acest lucru vă va permite să implementați acea versiune a aspectului pe o pagină nouă.

Adăugați noua dvs. schemă de culori la o nouă pagină

Pentru a adăuga aspectul salvat cu noua dvs. schemă de culori maro pe o pagină nouă, mai întâi va trebui să creați o pagină nouă. Apoi dați titlului paginii dvs. (ceva de genul „Maro”) și implementați constructorul vizual. Apoi selectați Alegeți un aspect premade. În fereastra pop-up Încărcare din bibliotecă, faceți clic pe fila „Aspectele dvs. salvate” și selectați noul aspect pe care tocmai l-ați salvat în bibliotecă.

Nu uitați să publicați pagina dvs.

Acum repetați același proces de creare a unei noi pagini și adăugarea aspectului salvat la pagină. De data aceasta denumiți pagina dvs. „Violet”.

Odată ce aspectul este adăugat la pagină, asigurați-vă că îl publicați. Apoi deschideți constructorul vizual și deschideți setările Fullwidth Header și găsiți Butonul One Text Color (la fel ca înainte). Acum ar trebui să vedeți că paleta de culori a temei salvate a fost actualizată cu noile dvs. culori. Acest lucru va fi util. Faceți clic dreapta pe opțiunea de culoare (în prezent maro închis), apoi faceți clic pe găsiți și înlocuiți. Deschideți selectorul de culori sub „Înlocuiți cu” pentru a selecta o culoare nouă din paleta de culori salvată. De data aceasta selectați culoarea mov (# 5a5ae2). Apoi selectați opțiunea Înlocuiți toate. Și nu uitați să vă salvați setările.

Și la fel ca magia, aveți o schemă de culori violet pentru pagina dvs.!

Crearea unei machete avansate a schemei de culori

Cu noua dvs. schemă de culori disponibilă, vă recomandăm să experimentați mai multe culori pe pagina dvs. De exemplu, puteți alege să aveți o culoare diferită pentru fiecare secțiune a paginii. Acest lucru se poate face cu ușurință și cu funcția „Găsiți și înlocuiți”.

Pentru următoarea machetă, creați o pagină nouă și denumiți-vă pagina ca „Multicolor”. Apoi implementați constructorul vizual, selectați „Alegeți un aspect premade” și importați același aspect salvat (maro) pe pagină (la fel cum ați făcut înainte). În constructorul vizual, deschideți setările Headwidth Fullwidth și găsiți butonul One Text Color (la fel ca înainte). Faceți clic dreapta pe butonul One Color Text și selectați „Găsiți și înlocuiți”. Apoi actualizați următoarele:

În cadrul: Această secțiune
Înlocuiți cu: # 0f1f2e
Selectați Înlocuiește toate

Apoi faceți clic pe butonul Înlocuire.

Nu uitați să salvați setările.

Acest lucru se actualizează în secțiunea de antet de sus cu schema de culori albastru închis.

Acum săriți a doua secțiune (poate păstra schema de culori maro) și mergeți la a treia secțiune. Găsiți butonul din partea de jos a secțiunii cu titlul „Încă nu sunteți sigur? Intrați în legătură". Deschideți setările butonului, faceți clic dreapta pe culoarea de fundal a butonului și selectați „Găsiți și înlocuiți”.

Apoi actualizați Găsiți și înlocuiți după cum urmează:

În cadrul: Această secțiune
Înlocuiți cu: # 366ba2
Selectați Înlocuiește toate

Apoi faceți clic pe butonul de înlocuire. Și nu uitați să salvați setările.

Săriți de a cincea secțiune. Apoi repetați același proces pentru a înlocui culoarea maro din secțiunea 6 (cea cu „Companii și persoane cu care am lucrat”) cu aceeași culoare albastru închis în prima secțiune. Puteți face acest lucru deschizând modulul de text cu textul mare citat sub opțiunea Culoare text text.

În ultima secțiune, găsiți modulul text în coloana din dreapta și deschideți setările modulului text. Faceți clic dreapta pe culoarea de fundal și selectați opțiunea Căutare și înlocuire. Actualizați următoarele:

În cadrul: Această secțiune
Înlocuiți cu: # 5a5ae2 (culoarea mov)
Selectați Înlocuiește toate

Apoi faceți clic pe butonul Înlocuire și salvați setările.

Acum aveți o machetă de pagină de pornire cu mai multe culori în fiecare secțiune.

Crearea unui meniu pentru previzualizarea fiecărei machete de culori

Ultimul pas este crearea unui nou meniu principal pentru a facilita clienților previzualizarea fiecărei machete de culori. Din tabloul de bord WordPress, navigați la Aspect> Meniuri. Apoi acordați-vă un meniu un titlu, faceți clic pe creați meniu și adăugați paginile pe care le-ați creat în noul dvs. meniu. Apoi, asigurați-vă că selectați Meniul principal ca locație de afișare. Și faceți clic pe Salvare meniu.

Acum aveți un site gata să vă prezinte machetele de schemă de culori.

Gânduri finale

Cu opțiunile de proiectare ale Divi, puteți implementa cu ușurință scheme de culori complet noi pentru aspectele paginii dvs., utilizând sugestii de culoare încorporate și opțiunea „Găsiți și înlocuiți” cu Visual Builder. Acest lucru îl va face convenabil pentru prezentarea diferitelor machete de culori pentru clienții dvs. Sper că acest tutorial vă va ajuta să găsiți schema de culori perfectă pentru următorul dvs. proiect. Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!