Doriți să utilizați modulul Portofoliu filtrabil al Divi și nu știi ce aspect să alegi?
Modulul « Portofoliu filtrabil "Din Divi vă oferă două opțiuni de aspect din care să alegeți. Ambele opțiuni au avantaje și funcționează foarte bine în anumite scopuri.
În acest articol, vom compara aspectele cu lățime completă și grilă ale acestui modul pentru a vă ajuta să decideți ce aveți nevoie pentru dvs site-ul web.
De asemenea, vom personaliza ambele aspecte pentru a vedea cum funcționează într-un singur aspect Divi.
Să începem!
studiu
Mai întâi, să vedem ce vom crea în acest tutorial.
Versiunea desktop a aspectului grilei
Descărcați DIVI acum!!!
Versiunea de telefon a aspectului grilei
Versiunea desktop a aspectului Fullwidth
Citiți și: Divi: Cum să utilizați efectele de umbră și hover pentru a crea conținut interactiv
Versiunea pentru telefon a aspectului Fullwidth
Cum se schimbă aspectul modulului de portofoliu filtrabil
În mod implicit, modulul „Portofoliul filtrabil” afișează aspectul în lățime completă. Puteți modifica aspectul pentru a afișa elementele într-o grilă. Mai întâi, deschideți parametrii modulului.
Apoi selectați fila Proiecta. Prima opțiune este Aspect. Are o listă derulantă cu câteva opțiuni. Selectați-l pentru a alege între Lățime maximă et Grilă.
Dacă alegeți opțiunea care nu este selectată în prezent, modulul va reîncărca și va afișa articolele din portofoliu în acest aspect. Exemplul de mai jos arată aspectul grilei.
Comparație cu aspectul modulului de portofoliu filtrabil
Cele două aspecte sunt foarte diferite, dar au unele asemănări. Ambele afișează filtrul în partea de sus a modulului, titlul și meta sub imaginile articolului și paginarea în partea de jos a modulului.
Iată o privire asupra modului în care sunt diferite.
Aspect pe toată lățimea
Lățimea completă afișează o imagine mare cu un element de portofoliu care ocupă întreaga lățime a zonei de portofoliu. Imaginile se afișează în forma lor originală și se extind pentru a se potrivi cu lățimea disponibilă.
Nu adaugă mult spațiu între articolele din portofel. Vă recomandăm să limitați numărul de postări la câteva. Exemplul de mai jos arată aspectul la lățime completă cu 2 postări.
Dispunerea grilei
Aspectul Grilă afișează până la 4 elemente la rând. Adaugă mai mult spațiu între elemente. Imaginile sunt decupate pentru a crea miniaturi de aceeași dimensiune, indiferent de dimensiunea și forma imaginii.
Pentru aceasta, am limitat modulul la afișarea a patru postări pentru a afișa paginarea.
Când să utilizați fiecare aspect al modulului Portofoliu filtrabil
Ambele aranjamente au avantajele lor. Iată câteva sfaturi despre când să utilizați fiecare aspect.
Aspect pe toată lățimea
Utilizați aspectul Fullwidth atunci când aveți doar câteva elemente de afișat sau doriți să vă concentrați pe câteva elemente.
De asemenea, utilizați acest aspect atunci când doriți să evidențiați sau să atrageți atenția asupra imaginilor prezentate.
Aspectul grilei
Utilizați aspectul Grilă atunci când doriți să afișați mai multe elemente sau când doriți ca un aspect să arate mai multe elemente într-un spațiu mai mic.
Cum să personalizați aspectul modulului de portofoliu filtrabil
Acum că am văzut cum să selectăm machetele, cum funcționează și când să le folosim, să vedem cum să personalizăm aceste două machete.
Vom folosi pagina Portofoliu a Pachet gratuit de aranjament Painter disponibil în Divi. Aici este pagina originală.
Vom înlocui portofoliul cu modulul Portfolio filtrabil și vom folosi aceleași imagini și titluri.
Vom crea două versiuni: una cu un aspect cu lățime completă și una cu un aspect grilă.
Cum să personalizați aspectul grilei al modulului de portofoliu filtrabil
Vom începe cu aspectul grilei. Voi folosi culorile și fonturile din aspectul original.
Conținut
Deschide-le parametrii modulului și introduceți 4 pentru Numărul de postări. Selectează tot categorii pe care doriți să le afișați în modul.
- Număr de postări: 4
- Categorii incluse: selectați categorii
Dispoziţie
Apoi selectați fila Amenajări și alegeți Grilă în opțiunile de aspect.
- Aspect: Grilă
Imagine
Derulați până la Imagine și alegeți opțiunea BoxShadow. Schimba-l culoarea umbrei în rgba(0,0,0,0.05).
- Box Shadow: 4ème opțiune
- Culoare umbră: rgba(0,0,0,0.05)
Text
Apoi derulați în jos la Text și modificați aliniere In centru. Aceasta centrează filtrul, titlul, meta și paginarea.
- Alinierea textului: Centru
Textul titlului
Apoi derulați în jos la Textul titlului și modificați următoarele setări.
- Font de titlu: Merriweather
- Culoare text titlu: #000000
Schimbați dimensiunea poliţie la 26px pentru desktop, 20px pentru tablete și 18px pentru telefoane.
- Dimensiunea textului titlului: desktop 26px, tabletă 20px, telefon 18px
Filtrați textul criteriului
Apoi derulați în jos la Criterii de filtrare text și modificați următoarele setări:
- Criterii de filtrare:
- Font: Montserrat
- Greutatea fontului: aldine
- Stil: TT
- Culoare text: #fd6927
- Dimensiunea textului: 12px
Meta text
Apoi derulați în jos la Meta Text. Schimba-l poliţie în Montserrat și culoare în #fd6927.
- Dimensiune meta text: Montserrat
- Culoare meta text: #fd6927
Seteaza Dimensiunea pe 12 pixeli, thespațiul dintre litere pe 2 pixeli și înălțime de linie pe 1,2 em.
- Dimensiunea textului: 12px
- Distanța Meta Letter: 2 px
- Înălțimea liniei meta: 1,2 em
Textul de paginare
În cele din urmă, derulați în jos la Textul de paginare si schimba-l poliţie în Montserrat, și setați culoare font pe negru. Închideți modulul și salvați setările.
- Font de paginare: Montserrat
- Culoarea textului de paginare: #000000
Cum să personalizați modulul de portofoliu filtrabil într-un aspect cu lățime completă
Acum, să configuram modulul într-un aspect cu lățime completă.
Vom folosi aceleași indicații de design ca și aspectul grilei, dar vom face câteva modificări care funcționează bine pentru acest aspect. Vom folosi niște CSS simple pentru a face câteva modificări minore.
Conținut
Deschide-le parametrii modulului și modificați numărul de Publicații la 2. Acest lucru menține pagina mai mică și mai ușor de gestionat cu imagini mari. Selectează tot categorii pe care doriți să le afișați în modul.
- Număr de postări: 2
- Categorii incluse: Alegeți categorii
Element
Derulați până la Elemente de și dezactivați Afișați categoriile. Lăsați celelalte activate. Categoriile vor fi în continuare activate pentru filtru, dar nu se vor afișa împreună cu titlul.
- Afișează categorii: NR
Dispoziţie
Selectați fila Proiecta. sub Aspect, lăsați Aspect setat la Lățime maximă, care este setarea sa implicită.
- Aspect: lățime completă
Imagine
Apoi derulați în jos la Imagine . Alegeți opțiunea Box Shadow si schimba-l culoare nuanță în rgba (0,0,0,0.05).
- Box Shadow: 4ème opțiune
- Culoare umbră: rgba(0,0,0,0.05)
Text
Apoi derulați în jos la Text. Schimba aliniere In centru. Filtrul, titlul și paginarea vor fi centrate cu imaginile.
- Alinierea textului: Centru
Textul titlului
Apoi derulați în jos la Textul titlului . Schimba-l poliţie la Merriweather și schimbă culoare în negru.
- Font de titlu: Merriweather
- Culoare text titlu: #000000
Schimbați dimensiunea poliţie la 40px pentru desktop, 20px pentru tablete și 18px pentru telefoane.
- Dimensiunea textului titlului: desktop 40px, tabletă 20px, telefon 18px
Filtrați textul criteriului
Apoi derulați în jos la Criterii de filtrare text și modificați următoarele setări:
- Criterii de filtrare:
- Font: Montserrat
- Greutatea fontului: aldine
- Stil: TT
- Culoare text: #fd6927
Text de paginare
Apoi derulați în jos la Textul de paginare. Schimba-l poliţie în Montserrat, schimbați greutate semi-bold și setați culoarea fontului pe #fd6927. Închideți modulul și salvați setările.
- Font de paginare: Montserrat
- Culoare: #fd6927
- Greutatea fontului: semi-aldine
Textul titlului CSS
Deschide fila Avansat și derulați la Titlul portofoliului. Selectați pictograma Desktop. Copiați codul de mai jos pentru diferite dimensiuni de ecran. Închideți modulul și salvați setările.
Titlul portofoliului:
- Desktop
padding-bottom:40px- Tableta
padding-bottom:30px- Telefon
padding-bottom:20px
resultats
Versiunea desktop a aspectului grilei
Versiunea de telefon a aspectului grilei
Descărcați DIVI acum!!!
Versiunea desktop a aspectului pe lățime completă
Vezi si: Divi: Cum să schimbați gradientul unui fundal la hover
Versiunea pentru telefon a aspectului pe lățime completă
Descărcați DIVI acum!!!
Concluzie
Aceasta este părerea noastră despre utilizarea unui aspect cu lățime completă față de o grilă din modul Portofoliu filtrabil a lui Divi. Alegerea dintre cele două opțiuni de aspect este ușoară.
Fiecare opțiune are avantaje și ar trebui să fie proiectată diferit pentru a funcționa cu dvs site-ul web. Faceți doar câteva ajustări pentru a vă asigura că modulul funcționează bine cu orice aspect Divi.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
