Cum să transformați aspectele Divi în cadre reutilizabile

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să transformați machetele în sârme reutilizabile folosind pachetul de machete pentru alimentație Divi. Wireframele sunt excelente pentru procesul inițial de construire a unui site web. Acestea vă ajută să decideți structura generală și stilul de design al unui site web. De asemenea, pot ajuta la obținerea opiniei unui client cu privire la un stil de design, fără a fi nevoie să adapteze totul în avans.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în el, să aruncăm o privire asupra rezultatului final pe care îl vom crea.

Transformați Layout în Wireframe

Deschideți pagina de destinație pentru alimentația alimentară cu Visual Builder

Mergeți mai departe și deschideți pagina de destinație pe care ați creat-o utilizând pachetul Divi pentru alimentația alimentară.

Eliminați imagini de fundal ale antetului secțiunii și lățimii complete, culorilor de fundal și fundalelor de gradient

Primul pas pentru crearea unui wireframe este eliminarea tuturor imaginilor de fundal, a fundalului degradat și a culorilor de fundal ale secțiunilor de pe pagina dvs. și a modulului de antet Fullwidth din secțiunea erou.

Oferiți secțiunilor alternative o culoare de fundal gri

Pentru a ajuta la determinarea diferitelor secțiuni din proiectarea paginii dvs., continuați și dați fiecărei secțiuni alternative o culoare de fundal „# f9f9fb”. Mai târziu, când utilizați un wireframe pentru a crea o pagină, veți putea utiliza caracteristica Găsiți și înlocuiți pentru a adăuga paleta de culori la pagina dvs. fără probleme.

Eliminați toate culorile din elementele de design utilizând filtrul de stiluri modificate

Activați filtrul de stiluri modificate pe modulul buton

Vom scăpa de paleta de culori care este folosită și. În acest fel, nu vom fi influențați de aceasta atunci când construim o pagină. Deschideți unul dintre modulele de butoane de pe pagina dvs. și activați Filtrul de stiluri modificate pentru a vedea toate setările actuale.

Dați butonului Modul de culoare întunecată de fundal și margine

Schimbați atât culoarea fundalului butonului, cât și culoarea chenarului butonului în „# 2b2b2b”.

Copiați stilurile de butoane și aplicați la alte butoane

Continuați prin copierea stilurilor de butoane făcând clic dreapta pe setările butonului și făcând clic pe „Copiere stiluri de butoane”. Apoi, adăugați stilurile de butoane la fiecare dintre celelalte module de butoane de pe pagină.

Eliminați setările suplimentare de proiectare (cum ar fi Box Shadow)

Eliminați umbra cutiei de butoane

Eliminăm și elemente suplimentare, cum ar fi Box Shadow. Deschideți același modul buton la care lucrați și eliminați complet umbra cutiei.

Setări de umbră pentru caseta modulului de copiere a butonului

Copiați stilurile de umbră ale cutiei acestui modul de butoane și adăugați-le și la celelalte module de butoane.

Eliminați manual Shadow Box în secțiunea Hero & Contact

Singurele două butoane care necesită îndepărtarea manuală a Box Shadow sunt cele incluse în modulul de antet Fullwidth și modulul de contact. Aceste butoane fac parte dintr-un modul cu mai multe elemente de design, de aceea trebuie să le eliminăm manual.

Oferiți secțiunii evidențiate aceeași culoare de fundal ca CTA-urilor

Apoi, derulați în jos până când întâlniți secțiunea „evidențiată”. Aici, utilizați culoarea de fundal a secțiunii „# 2b2b2b”. Aceeași culoare a fost folosită pentru CTA-uri.

Determinați dimensiunile imaginii

Accesați Media Library

Pentru a elimina în totalitate subiectul de aspect al aspectului nostru, vom înlocui toate modulele de imagine cu substituenți care conțin dimensiunile de imagine necesare. Pentru a găsi aceste dimensiuni, accesați biblioteca dvs. media.

Deschideți imagini folosite individual

Deschideți fiecare dintre imaginile incluse pe pagina dvs. separat.

Notați diferitele dimensiuni ale imaginilor pe pagină

Odată ce ați făcut acest lucru, veți putea vedea în special dimensiunile acelei imagini. Țineți evidența tuturor dimensiunilor de care aveți nevoie pe pagina dvs., notându-le undeva înainte de a trece la pasul următor.

Creați substituenți cu dimensiuni

Deschideți Photoshop

E timpul să creați substituenții! Deschideți Photoshop sau orice alt software de editare a imaginilor.

Creați proiecte noi pentru dimensiuni

Creați un proiect nou pentru fiecare set de dimensiuni pe care îl aveți pe pagina dvs. În cazul nostru, vom avea nevoie de un proiect separat pentru fiecare dintre următoarele dimensiuni:

• 800 x 1029
• 400 x 400
• 48 x 48

Alegeți culoarea gri

Alegeți „# e7e8ed” ca culoare.

Deblocați stratul de fundal

Deblocați și stratul de fundal.

Selectați Paint Bucket Tool & Add Color to Layer

Apoi, utilizați Instrumentul Bucket Paint pentru a vă colora pânza în gri.

Adăugați text cu dimensiuni

Pentru a vă ajuta să urmăriți dimensiunile imaginii, puteți adăuga și dimensiunile în mijlocul substituentului. În acest fel, veți ști de ce dimensiuni de imagine veți avea nevoie pentru pagina dvs. după ce editați imaginile cu care le veți înlocui.

Salvați pentru web

După ce ați terminat, salvați substituentul de imagine pentru web.

Repetați pentru fiecare dintre dimensiunile imaginii de pe pagină

Repetați acești pași pentru fiecare set de dimensiuni de pe pagina dvs. Pentru această pagină, veți avea nevoie de trei seturi diferite în total:

• 800 x 1029 (secțiunea despre noi
• 400 x 400 (secțiunea galerie)
• 48 x 48 (pictograme)

Înlocuiți imaginile cu substituenți

După ce ați exportat toate substituenții de imagine, continuați și înlocuiți imaginile.

Realizarea rețelei Wireframe cu ușurință

Creați o hartă Wireframe pe computer

După ce ați terminat de creat un wireframe, vă recomandăm să salvați aspectul acestuia undeva. Creați un folder nou undeva pe computer.

Aspect Captură ecran & Salvare locală

Apoi, utilizați extensia / extensia de captură a ecranului la alegere pentru a vă captura pagina. În imaginile de mai jos, am folosit programul de completare FireShot pentru Mozilla Firefox. Asigurați-vă că, atunci când salvați captura de ecran, îi dați un nume corect.

Salvați aspectul în bibliotecă cu același nume

Utilizați același nume pe care l-ați folosit pentru captura de ecran pentru a salva aspectul wireframe în biblioteca Divi. Acest lucru vă permite să aruncați o privire asupra wireframe-ului de pe computer înainte de a-l încărca pe una dintre paginile dvs.

Schimbați setările de proiectare pentru cadre personalizate

Adăugați divizoare de secțiune

Nu sunteți limitat la crearea unui wireframe pe pagină. Puteți modifica cu ușurință setările de proiectare pentru a crea noi wireframe. Puteți juca cu separatoarele de secțiuni, de exemplu, pentru a crea modele unice.

Joacă-te cu tipografia

Activați Căutare și înlocuire pe fontul de titlu

Sau, de asemenea, puteți juca cu tipografia. Deschideți modulul antet Fullwidth din secțiunea erou și faceți clic dreapta pe Fontul titlu. Continuați activând funcția Găsiți și înlocuiți.

Schimbați fontul

Schimbați fontul care este utilizat pe pagina dvs. cu altul și aveți un wireframe nou!

Salvați elemente de design separate folosind categorii

Faceți clic pe pictograma „Adăugați la bibliotecă”

Un alt lucru pe care îl puteți face este să salvați separat anumite elemente de design pe pagina dvs. Spuneți, de exemplu, că doriți să creați o colecție de secțiuni erou, puteți adăuga cu ușurință secțiunea erou în biblioteca Divi.

Adăugați o categorie nouă și dați un nume elementului de design

Pentru a avea o structură mai organizată, continuați prin adăugarea unei noi categorii de secțiuni numite „Secțiuni eroi”, astfel încât să puteți găsi cu ușurință secțiunea erou la alegere și să explorați toate desenele pe care le aveți în magazin.

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului final.

Gânduri finale

În această postare pe blogul de caz de utilizare, v-am arătat cum să transformați aspectele Divi în fire wireframe reutilizabile. Transformarea aspectelor în fireframes vă ajută să mențineți vizualizarea generală a modului în care doriți să arate o structură de site-ul web. De asemenea, sunt excelente pentru informarea stilului de proiectare către un client în prima etapă a procesului de construire a site-ului web. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii!