Transformarea modulului Magazin Divi în carduri dinamice de glisare a produselor pe mobil
Publicat: 2020-04-29Atunci când construiți o pagină de destinație pentru anumite produse, indiferent dacă este o nouă lansare sau o vânzare pentru care vă pregătiți, sunt mari șanse să utilizați modulul magazin la un moment dat. Modulul magazin Divi vă permite să extrageți dinamic produse din pluginul WooCommerce și să stilizați produsele folosind opțiunile încorporate ale Divi. Acum, în mod implicit, modulul magazin vine cu câteva structuri de coloane care toate se traduc în două coloane pe dimensiuni de ecran mai mici. Aceasta înseamnă că cu cât alegeți să afișați mai multe produse, cu atât este necesară o defilare mai verticală pentru a ajunge la următoarea parte a paginii dvs. de destinație.
În designul web modern, o tehnică frecvent utilizată pentru a limita derularea verticală și pentru a afișa articole în funcție de preferințele vizitatorilor dvs. este utilizarea cardurilor glisante. În acest tutorial, vă vom arăta cum să transformați modulul Divi Shop în carduri dinamice de glisare a produselor pe dimensiuni de ecran mai mici, fără a utiliza un plugin. Vom începe prin a pregăti diferitele elemente din secțiunea noastră de produse și vom folosi o cantitate mică de cod CSS pentru a activa efectul de glisare. Acesta este un mod excelent de a afișa o gamă largă de produse în pagina dvs. de destinație, fără a vă copleși vizitatorii. Veți putea descărca gratuit fișierul JSON!
Să ajungem la asta.
previzualizare
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului. Activăm cardurile pentru produs numai pe tabletă și mobil. Pe desktop, păstrăm structura coloanei pe care o determinăm în interiorul modulului magazin.
Mobil
Desktop
Descărcați aspectul cardurilor de produs GRATUIT
Pentru a pune mâna pe schema gratuită a cardurilor de glisare a produselor, va trebui mai întâi să o descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.
Descarcă gratis
Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.
V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!
1. Configurați WooCommerce și paginile produsului
Înainte de a intra în partea Divi a acestui tutorial, este important să aveți instalat și activat pluginul WooCommerce pe site-ul dvs. web. Dacă nu ați făcut-o deja, adăugați mai multe produse, în funcție de câte produse doriți să afișați în modulul magazin.
2. Creați o pagină nouă și încărcați un aspect de pagină de destinație pentru papetărie
Creați o pagină nouă
Odată ce aveți produsele la locul lor, adăugați o nouă pagină în backend-ul WordPress. Dați titlului paginii dvs., publicați pagina și activați Visual Builder al Divi.
Încărcați aspectul paginii de destinație pentru papetărie
Odată ajuns în noua pagină, navigați la aspectele premade și încărcați aspectul paginii de destinație a magazinului de papetărie. Deși folosim acest aspect specific, sunteți liber să utilizați orice alt aspect la alegere, atâta timp cât adăugați sau localizați un modul de magazin în interiorul respectivului aspect.
3. Modificați secțiunea magazin
Găsiți secțiunea cu modulul magazin
Dacă derulăm noua noastră pagină pe care am construit-o folosind aspectul paginii de destinație a magazinului de papetărie, vom întâlni o secțiune cu un modul de magazin. Vom folosi această secțiune pe parcursul următorilor pași ai acestui tutorial.
Setări rând
Dimensionare receptivă
Începeți prin a deschide setările de rând ale rândului care conține modulul magazin. Așa cum am menționat mai sus, păstrăm același design pe desktop, vom activa cardurile de glisare a produsului doar pe dimensiuni de ecran mai mici. Pentru a crea o experiență fără efort, vom permite rândului să atingă partea stângă și dreapta a ecranului, schimbând lățimea în setările de dimensionare.
- Utilizați lățimea canalului personalizat: 1
- Lățime: 80% (desktop), 100% (tabletă și telefon)
Vizibilitate
De asemenea, ne vom asigura că nimic nu depășește containerul rândului setând setările de vizibilitate la ascuns.
- Overflow orizontal: Ascuns
- Vertical Overflow: Ascuns
Cumpărați setările modulului
Alegeți Numărul de produse și Structura coloanei la alegere
Apoi, vom deschide setările modulului magazin. Modificările pe care le facem în codul nostru CSS (pe care le vom adăuga mai târziu) depind de numărul de produse pe care le afișăm. Vom începe prin a vă arăta cum să transformați un modul de magazin cu 8 produse în carduri de produs. Puteți alege orice aspect de coloană la alegere pentru desktop.
- Număr de produse: 8
- Aspect coloane: 4 coloane
Dimensionare receptivă
Pentru a mări dimensiunea modulului magazinului nostru, vom modifica setările de dimensionare din fila Design. Observați cum facem acest lucru doar pentru tabletă și telefon.
- Lățime: 100% (desktop), 250% (tabletă și telefon)
- Lățime maximă: 100% (desktop), 250% (tabletă și telefon)
Clasa CSS
De asemenea, vom adăuga o clasă CSS la modulul nostru de magazin. Mai târziu, când adăugăm codul CSS, vom putea transforma modulul magazin care conține doar această clasă CSS. Cu alte cuvinte, dacă doriți ca un alt modul magazin să apară într-o stare normală, lăsând în afara acestei clase CSS vă va permite să faceți acest lucru.
- Clasa CSS: carduri de produs
Revărsări responsive
Vom completa setările rândurilor modificând setările de vizibilitate pe diferite dimensiuni de ecran. După cum puteți observa în setări, dorim ca efectul de derulare să apară numai pe dimensiuni mai mici ale ecranului.
- Overflow orizontal: ascuns (desktop), derulare (tabletă și telefon)
- Vertical Overflow: Ascuns
Adăugați un modul de cod sub modulul magazin
După ce ați modificat modulul magazin, puteți adăuga un modul cod chiar sub acesta.
Adăugați cod CSS la modul
Următorul cod CSS va transforma automat modulul nostru de magazin cu 8 produse în carduri de glisare a produselor receptive:
<style>
@media all and (max-width: 980px) {
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}
.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}
.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
.product-swipe-cards {
-ms-overflow-style: none;
}
}
</style>
Potrivirea diferitelor număruri de produse
Acum, dacă doriți să adăugați mai puține (sau mai multe) produse în modulul magazin, codul se modifică ușor în două locuri. Aceste două locuri trebuie modificate manual pentru a se potrivi cu rezultatul dorit. Să schimbăm numărul de produse din modulul nostru de magazin la „4”, de exemplu.
- Număr de produse: 4
Când ne întoarcem la codul nostru, trebuie să facem două modificări. Mai întâi, va trebui să schimbăm coloanele șablonului de grilă. În loc de 8, folosim 4 (același număr ca și numărul de produse). De asemenea, mărim procentul pe care aceste produse îl utilizează în cardurile noastre de produs (cu cât sunt mai multe produse, cu atât mai puțin spațiu).
grid-template-columns: repeat(4, 14%) !important;
Apoi, vom modifica și lățimea containerului în care sunt plasate produsele. Pentru 4 produse, acest lucru este egal cu 150%. Aceste valori nu sunt setate în piatră, sunt realizate jucând și găsind o armonie între coloanele șablonului de grilă și lățimea containerului. Pentru a găsi echilibrul corect, treceți la vizualizarea mobilă din interiorul Visual Builder și modificați cu atenție valorile în timp ce vizualizați rezultatul acestor modificări.
width: 150% !important;
Adăugați Scroll Snapping
Dacă doriți să faceți experiența utilizatorului cu un pas mai departe în proiectarea cardului de glisare a produsului, puteți adăuga și defilare. Conectarea la derulare ajută vizitatorii să deruleze accesând la începutul unui nou produs. Aceasta înseamnă că glisarea lor nu trebuie să fie exactă, decuparea defilării va prelua la un moment dat și va arăta ajustarea poziției lor în interiorul mecanismului de defilare orizontală. Pentru a activa fixarea defilării pe cardurile de produs, adăugați câte o linie de cod CSS la fiecare produs în mod individual în codul CSS (consultați ecranul de imprimare de mai jos).
scroll-snap-align: start
De asemenea, vom activa derularea de pe modulul magazinului nostru adăugând următoarea linie de cod CSS:
scroll-snap-type: x mandatory
Reutilizați modulul magazin pentru a afișa alte categorii
Clonați întregul rând o dată
După ce ați finalizat primul set de carduri de glisare a produsului, puteți clona întregul rând o singură dată.
Ștergeți modulul de cod în rândul duplicat
Atâta timp cât modulul dvs. de magazin conține aceeași clasă CSS ca și cea precedentă, va face un modul de cod. Continuați și ștergeți modulul de cod din rândul dvs. duplicat.
Clonați rândul duplicat cât doriți
Și clonați rândul duplicat acum de câte ori este necesar, în funcție de câte seturi de carduri de produse doriți să afișați pe pagina dvs. de destinație!
4. Salvați modificările paginii și vizualizați rezultatul pe dispozitivul mobil
Asigurați-vă că, odată ce ați terminat de adăugat cardurile de produs, vă salvați pagina înainte de a ieși din Visual Builder și ați terminat!
previzualizare
Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.
Mobil
Desktop
Gânduri finale
În această postare, v-am arătat cum să transformați modulul Divi Shop încorporat în carduri de glisare a produselor pe dimensiuni de ecran mai mici. Pe desktop, am menținut structura originală a coloanelor atribuite modulului Shop. Utilizarea cardurilor de glisare a produsului vă permite să adăugați produse nesfârșite la un mecanism de glisare orizontală, fără a vă copleși vizitatorii cu derulare verticală.
Este o tendință des utilizată în designul web modern, deoarece se concentrează pe comportamentul utilizatorilor și facilitează accesul la o gamă largă de articole pe dimensiuni mai mici de ecran. Puteți utiliza aceste carduri de glisare a produselor pe orice pagină doriți, dar este deosebit de convenabilă pentru paginile de destinație ale produselor pe care le creați. Ați putut descărca și fișierul JSON al machetei gratuit! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.