10 pași pentru utilizarea unui nou pachet de layout Divi pentru următorul dvs. proiect

Ca parte a Inițiativei de design Divi Elegant Themes, Kenny și echipa de design ne-au răsfățat cu pachete GRATUITE de layout-uri Divi în fiecare săptămână. Pachetele de aspect pot fi descărcate de pe postarea de pe blog cu pachetul de layout în fiecare luni. Mulți dintre voi ați folosit pachetele de aspect pentru a construi site-uri web noi într-o fracțiune foarte mică din timpul în care vă va lua în mod normal.

În postarea de astăzi, vă voi arăta cum să profitați la maximum de aceste aspecte, oferind 10 pași cheie de urmat atunci când utilizați un nou pachet Divi Layout pentru următorul dvs. proiect. Am inclus, de asemenea, câteva sfaturi care nu sunt atât de cunoscute pentru a gestiona aceste aspecte ca un profesionist.

Bucurați-vă!

Notă: la fel ca toți pașii, aceștia sunt meniți să se facă în ordinea în care sunt listați. De exemplu, dacă nu setați mai întâi paleta de culori implicită, aceasta nu va fi disponibilă atunci când veți schimba culoarea implicită de accent.

10 pași pentru utilizarea unui nou pachet de layout Divi pentru următorul dvs. proiect

Abonați-vă la canalul nostru Youtube

# 1 Importați mai întâi aspectele în biblioteca Divi

Cel mai bun mod de a adăuga aspecte noi în tema Divi este să le importați mai întâi în biblioteca Divi. Apoi, atunci când creați o pagină nouă, puteți adăuga noul aspect din biblioteca dvs.

Înainte de a adăuga aspectele pe site-ul dvs. web, trebuie să vă asigurați și să descărcați pachetul de aspect din postarea de pe blog și să dezarhivați fișierul.

Din tabloul de bord WordPress, accesați Divi> Divi Library și faceți clic pe butonul Import & Export din partea stângă sus a paginii. În modalitatea de portabilitate care apare, selectați fila de import și faceți clic pe alegeți fișierul. Găsiți folderul pachetului de layout dezarhivat și selectați fișierul json cu „Toate” în numele fișierului. Aceasta va încărca toate aspectele în biblioteca dvs. simultan, în loc să trebuiască să le faceți fiecare individual. De exemplu, dacă doriți să încărcați pachetul de aspect de modă, alegeți fișierul numit Fashion_All.json din folderul de aspect. Apoi faceți clic pe Importați machete Divi Builder.

# 2 Adăugați aspecte la pagini noi

Acest proces este destul de simplu. Din tabloul de bord WordPress, accesați Pagini> Adăugați un nou. Introduceți titlul paginii pe care trebuie să o creați. Faceți clic pentru a utiliza Divi Builder și a implementa Visual Builder. Deschideți meniul de setări din partea de jos a paginii și faceți clic pe pictograma „Încărcare din bibliotecă” plus din stânga. În modul Încărcare din bibliotecă care apare, faceți clic pe fila „Adăugați din bibliotecă” și selectați noul aspect din listă pentru a încărca noul aspect.

Repetați acest proces pentru fiecare pagină nouă, adăugând un aspect nou la fiecare.

# 3 Creați meniul principal

Dacă aceasta este o instalare nouă, veți începe să vedeți aceste noi pagini în bara de meniu principală din antetul de sus. Acest lucru se datorează faptului că nu aveți încă un meniu principal creat, astfel încât în ​​mod implicit meniul dvs. va fi populat de toate paginile și postările pe care le adăugați pe site-ul dvs.

Pentru a vă crea meniul principal, accesați tabloul de bord WordPress efectuați următoarele:

1. Navigați la Aspect> Meniuri.
2. Selectați linkul „Creați un meniu nou” din partea de sus a paginii.
3. Introduceți un nume de meniu.
4. Selectați elementele de meniu din comuta din stânga sub Pagini.
5. Faceți clic pe Adăugare la meniu
6. Organizați-vă elementele de meniu trăgându-le în poziție.
7. În meniul Setări din partea de jos a paginii, selectați „meniul principal” ca locație de afișare.
8. Salvați meniul

# 4 Setați paleta de culori implicită

De multe ori uit să fac acest pas și regret de fiecare dată. Dacă vă setați paleta de culori implicită, este foarte convenabil să editați culorile folosind constructorul Divi. Nu vă pot spune de câte ori trebuie să mă întorc la un alt modul pentru a găsi un cod de culoare sau să inspectez un articol folosind instrumentele pentru dezvoltatori sau să folosiți extensia de browser pentru picăturile de ochi, doar găsiți aceeași culoare pe care am folosit-o peste și Din nou. Nu face asta pentru tine!

Puteți seta paleta de culori implicită accesând tabloul de bord WordPress și navigând la Divi> Opțiuni temă. Și chiar acolo, în fila generală, veți găsi opțiunea listată. Adăugați culorile de care aveți nevoie acolo. Este întotdeauna o idee bună să păstrați culoarea albă (#ffffff) și câteva culori închise (cum ar fi # 333333 sau orice ați setat pentru culoarea fontului întunecat) pentru a fi utilizate cu stil pentru fundaluri și text cu ușurință.

# 5 Setează-ți culoarea Global Accent

Probabil că veți găsi drumul către Customizerul tematic destul de devreme în procesul de personalizare a noului site. Când faceți acest lucru, ar trebui să schimbați mai întâi culoarea accentului global.

Pentru a vă modifica Global Accent Color, accesați Theme Customizer și navigați la Setări generale> Setări aspect și găsiți opțiunea Theme Accent Color în partea de jos.

Observați noile culori disponibile în paleta de culori, deoarece ați actualizat paleta de culori implicită în Opțiunile temei.

Apoi, după ce îl modificați, salvați și publicați setările și actualizați pagina.

Culoarea actualizată Theme Accent Color va fi aplicată automat la aproximativ 20 de alte elemente, motiv pentru care este important să actualizați mai întâi acest lucru.

Unele dintre elementele care sunt actualizate automat includ:

Culoarea legăturii corpului
Culoare antet widget
Widget Bullet Color
Footer Social Icons Social Plasați culoarea cursorului
Culoare implicită pentru pictograme
Meniu subsol Culoare link activ
Culoarea de fundal a meniului secundar
Culoare de fundal Slide In și Fullscreen Header Style
Pictogramă meniu hamburger pentru culoarea meniului mobil
Meniul principal Culoare link activ
Meniu drop-down Culoare linie
Culoarea fundalului meniului secundar
Culoarea fundalului meniului derulant secundar
Culoarea fundalului meniului secundar
Culoare legătură meniu principal activ
Meniu subsol Culoare link activ

Dacă nu vedeți că modificările au efect imediat asupra acestor elemente, poate fi necesar să salvați și să părăsiți personalizatorul, să reîmprospătați pagina și să reveniți la acesta.

# 6 Stilează antetul

Puteți stiliza antetul dvs. din Customizerul tematic. Pur și simplu accesați tabloul de bord WordPress și navigați la Divi> Personalizator temă> Antet și navigare.

Cu siguranță va trebui să vă stilizați antetul pentru a se potrivi cu noile dvs. planuri. Mai întâi aș decide stilul de antet pe care îl doriți mai întâi (implicit, lățime completă, centrat, etc ...), dar orice alegeți, asigurați-vă că potriviți stilul antetului cu noile dvs. planuri. Și asigurați-vă că elementele din meniul dvs. sunt ușor de citit și de navigat.

Aveți opțiuni pentru meniurile de navigare primare, secundare și fixe. Alocați-vă timp pentru a stiliza toate cele care se aplică site-ului dvs.

Dacă setați culoarea globală a accentului, unele dintre setările culorii antetului vor fi modificate pentru dvs. De aceea, este important să setați mai întâi acea culoare.

# 7 Stilizați bara de jos

Puteți stiliza bara de jos și din Customizerul tematic. Pur și simplu accesați tabloul de bord WordPress și navigați la Divi> Personalizator temă> subsol> Bara de jos.

Bara de jos nu trebuie neglijată. Combinat cu bara de navigare în partea de sus a paginii dvs., devine un suport de carte necesar, care încadrează întreaga pagină. Sigur, fundalul negru implicit poate „funcționa” pe orice site, dar aș experimenta ceva mai mult. Uneori îmi place să dau barei de jos o culoare de fundal, care este o nuanță puțin mai închisă a culorii de fundal a secțiunii de subsol, așezată direct deasupra ei.

# 8 Utilizați comenzile rapide pentru a face modificări de proiectare în aspectul paginii

Deoarece aspectele dvs. vin cu setări de proiectare integrate în modulele dvs., modificarea setărilor de proiectare la scară globală (la nivel de site) poate fi puțin plictisitoare. Dar există câteva trucuri pentru a accelera procesul. Pentru început, aș face mai întâi modificări la aspectul unei pagini. În acest fel puteți salva elemente din pagina editată pentru a le adăuga la celelalte pagini care necesită modificări de proiectare. Iată câteva trucuri pentru a accelera procesul de a face modificări de proiectare la un anumit aspect.

Utilizarea opțiunilor de clic dreapta

Nu uitați că puteți utiliza opțiunile de clic dreapta pentru a copia și lipi stilurile modulelor de la un modul la altul, atâta timp cât este același tip de modul.

Restaurează valorile implicite, astfel încât să le poți controla folosind Theme Customizer

În prezent, există anumite setări disponibile pentru module care nu pot fi personalizate de personalizatorul temei (cum ar fi caseta umbră, de exemplu). Ca regulă generală, Customizerul tematic va schimba orice este lăsat la setarea implicită într-un modul, dacă setarea este disponibilă în customizer. Dar pentru unele module, poate avea sens să continuați anumite setări de proiectare la valorile implicite, astfel încât să puteți controla stilul din personalizatorul temei.

Un bun caz de utilizare pentru aceasta ar fi textul corpului și setările pentru textul antetului. Deci, de exemplu, dacă aveți un modul de text în aspectul dvs. care are un font personalizat, culoarea textului și dimensiunea textului, nu veți putea schimba acele elemente din personalizatorul temei până nu le restabiliți la starea lor implicită.

Utilizați caseta de căutare pentru a localiza setările pe care doriți să le modificați

Identificați cu ușurință ceea ce este setat implicit

Pe măsură ce căutați opțiunile pe care doriți să le modificați, veți observa că unele opțiuni au lângă ea o pictogramă „restaurare implicită”. Aceasta înseamnă că a fost modificat de la valoarea implicită.

Restabiliți toate setările de proiectare la valorile implicite dintr-un singur clic

Pentru cei dintre voi care iubesc constructorul vizual la fel de mult ca mine, probabil că încă nu ați descoperit acest truc util. Dacă vă aflați în backend builder, faceți clic pentru a edita setările unui modul, apoi selectați fila de proiectare. Observi ceva? Este o mică pictogramă / buton „Restaurare la valorile implicite” aflat în filă.

Dacă faceți clic pe acesta, vă va solicita să confirmați că doriți să pierdeți aceste setări. Dacă selectați da, toate setările filei de proiectare vor reveni la starea lor implicită. Acest lucru va fi, desigur, adăugat la constructorul vizual în viitor.

# 9 Salvați elementele cheie pentru a crea pagini sau postări noi

Uneori va trebui să creați pagini sau postări suplimentare care necesită un aspect diferit. Poate doriți un aspect de pagină mai general cu un antet, secțiunea de conținut și secțiunea de subsol. Sau poate doriți să creați o pagină de destinație mai elaborată. Puteți chiar să creați un aspect personalizat pentru postările dvs. de pe blog. Cel mai simplu mod de a realiza acest lucru este să folosiți elemente ale aspectelor pe care trebuie să le construiți deja. Și este cel mai eficient mod de a vă păstra designul consecvent pe întregul site. Să trecem în revistă câteva dintre elementele de bază pe care ar trebui să le luați în considerare pentru a construi aspecte de pagină suplimentare.

Antet pagină

Aceasta este o nebunie. Fiecare pagină are nevoie de un antet. Cu siguranță aș salva o secțiune de antet pentru biblioteca dvs. Aș sugera să găsiți o versiune mai generică a antetelor dvs., astfel încât să se potrivească cu orice tip de pagină. De obicei, aspectul paginii de contact este un candidat bun pentru acest lucru, deoarece are de obicei un titlu centrat de bază, subtitrare și o culoare de fundal.

Anteturi de secțiune

De asemenea, este o idee bună să salvați o versiune a antetelor de secțiune. În acest fel, atunci când adăugați mai mult conținut la noile dvs. pagini, veți avea un nou antet în stil și gata de utilizare.

Secțiunea de conținut

În multe cazuri, este nevoie doar de un modul de text simplu cu fundal alb, dar uneori noile dvs. machete au secțiuni de conținut unice. Acesta poate fi un modul de text cu umbră de casetă sau mai multe module de blurb stilizate într-un mod unic. Pentru a păstra coerența, salvați ceea ce aveți nevoie în bibliotecă pentru o utilizare viitoare.

Butoane (atât deschise, cât și întunecate)

Probabil că va trebui să adăugați mai multe butoane pe măsură ce creați pagini noi. Este extrem de convenabil să aveți o versiune întunecată și deschisă a butonului în bibliotecă. Vă sugerez să salvați un modul de buton atât pentru versiunile întunecate, cât și pentru cele deschise.

Secțiunea subsol

Fiecare aspect vine de obicei cu o secțiune de subsol frumoasă, care se află chiar deasupra barei de jos a paginii. Unele aspecte au versiuni diferite ale acestei secțiuni de subsol. Aceste secțiuni includ de obicei informații de contact, opțiuni de e-mail și alte informații importante. Găsiți unul pe care doriți să îl utilizați și salvați-l în biblioteca dvs. pentru utilizare ulterioară.

Acum, ori de câte ori doriți să creați o pagină nouă, veți avea aceste secțiuni, rânduri și module din care să alegeți.

# 10 Setați articole globale

Global poate economisi timp excelent atunci când faceți modificări viitoare pe site-ul dvs., dar este nevoie de puțină previziune. Trebuie să identificați ce elemente ale aspectelor dvs. vor fi utilizate frecvent pe tot site-ul dvs. și vor necesita actualizări mai uniforme. Candidații buni pentru articolele globale ar fi secțiunile de subsol, modulele de apel la acțiune, modulele de butoane și opțiunile de e-mail, deoarece acestea trebuie să fie dispersate pe site-ul dvs., dar necesită același stil și conținut uniform. În acest fel, actualizarea unuia va actualiza toate.

Gânduri finale

Sper că ai găsit acești pași ca fiind de ajutor. Scopul meu pentru această postare a fost de a oferi câteva îndrumări generale sau cele mai bune practici la importul acestor machete pe o nouă instalare în scopul creării unui nou site web. Urmarea acestor pași în ordine vă va împiedica să pierdeți timpul și vă va pune la dispoziție o bază bună pe care să construiți.