Treci la conținutul principal

Transformă modulul Divi Shop în hărți dinamice ale produselor pe mobil

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Când creaț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 Divi's Shop vă permite să extrageți dinamic produse din pluginul WooCommerce și să le stilizați 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ă utilizată adesea pentru a limita derularea verticală și afișarea elementelor în funcție de preferințele vizitatorilor dvs. este utilizarea cardurilor magnetice. În acest tutorial, vă vom arăta cum să transformați modulul magazin Divi în hărți dinamice ale produselor pe dimensiuni de ecran mai mici, fără a utiliza un plugin. 

Vom începe prin a pregăti diferitele elemente ale secțiunii noastre de produse și vom folosi o cantitate mică de cod CSS pentru a activa efectul de măturare. Este o modalitate excelentă de a arăta o gamă largă de produse pe pagina dvs. de destinație fără a vă copleși vizitatorii. 

Rezultat posibil

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului. Activăm cardurile magnetice ale produsului doar pe tablete și telefoane mobile. Pe desktop, păstrăm structura coloanei pe care o determinăm în modulul Magazin.

Animatie magazin modul Divi produs

1. Configurați WooCommerce și paginile de produse

Înainte de a intra în partea Divi a acestui tutorial, este important ca pluginul WooCommerce să fie instalat și activat pe site-ul dvs. web. Dacă nu ați făcut-o deja, adăugați mai multe produse, în funcție de numărul de produse pe care doriți să le afișați în modulul Magazin.

Creați produse woocommerce

2. Creați o pagină nouă și descărcați aspectul paginii de papetărie

Creați o nouă pagină

Odată ce produsele sunt la locul lor, adăugați o nouă pagină în backend-ul WordPress. Dați titlului paginii dvs., publicați pagina și activați Divi Visual Builder.

Creați o pagină divi
Creați o nouă pagină divi

Descărcați aspectul paginii de destinație

Odată ajuns în noua dvs. pagină, navigați la aspectele presetate și descărcați aspectul paginii de destinație pentru papetărie. Deși folosim acest aspect specific, sunteți liber să utilizați orice alt aspect doriți, atâta timp cât adăugați sau localizați un modul de magazin în interiorul acestui aspect.

Alegeți un aspect divi

3. Modificați secțiunea magazinului

Localizați secțiunea cu modulul Magazin

Dacă derulăm în jos la noua noastră pagină pe care am creat-o folosind aspectul paginii de pornire pentru 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.

Localizați modulul magazinului

Setări de linie

Dimensiune sensibilă

Î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 swipe ale produsului doar pe dimensiuni de ecran mai mici. 

Pentru a crea o experiență fără efort, vom permite rândului să atingă laturile din stânga și din dreapta ecranului nostru schimbând lățimea în setările de dimensionare.

  • Utilizați o lățime personalizată a jgheabului: 1
  • Lățime: 80% (desktop), 100% (tabletă și telefon)
Modificare de proiectare receptivă

vizibilitate

De asemenea, ne vom asigura că nimic nu depășește containerul rând, setând setările de vizibilitate pe ascunse.

  • Debord de orizontală: ascuns
  • Debord vertical: ascuns
Configurare vizibilitate Divi

Setările modulului magazin

Alegeți numărul de produse și structura de coloană de birou la alegere

Apoi, vom deschide setările modulului Magazin. Modificările pe care le facem codului nostru CSS (pe care le vom adăuga mai târziu) depind de numărul de produse pe care le afișăm. 

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Vom începe prin a vă arăta cum să transformați un modul de magazin cu 8 produse în carduri de produse. Puteți alege orice aspect de coloană doriți pentru desktop.

  • Număr de produse: 8
  • Dispunerea coloanelor: 4 coloane
Modificați designul coloanei Divi

Dimensiune sensibilă

Pentru a mări dimensiunea modulului magazinului nostru, vom schimba parametrii de dimensionare din fila Design. Rețineți că facem acest lucru doar pentru tabletă și telefon.

  • Lățime: 100% (desktop), 250% (tabletă și telefon)
  • Lățimea maximă: 100% (birou), 250% (tabletă și telefon)
Configurare de proiectare receptivă

CSS

De asemenea, vom adăuga o clasă CSS la modulul nostru de magazin. Mai târziu, când adăugăm codul CSS, putem transforma modulul Magazin care poartă doar această clasă CSS. Cu alte cuvinte, dacă doriți ca un alt modul Shop să apară într-o stare normală, lăsând în afara această clasă CSS vă va permite să faceți acest lucru.

  • Clasa CSS: produse-swipe-carduri
Schimbați atributul css module store divi

Revarsări reactive

Vom completa setările liniei modificând setările de vizibilitate pe diferite dimensiuni de ecran. După cum puteți vedea în setări, dorim ca efectul de derulare să apară numai pe dimensiuni mai mici ale ecranului.

  • Debordament orizontal: ascuns (birou), defilare (tabletă și telefon)
  • Debord vertical: ascuns
Configurare overflow

Adăugați un modul de cod sub modulul Magazin

După ce ați modificat modulul Shop, puteți adăuga un modul de cod chiar mai jos.

Adăugați modulul de cod sub modulul magazinului divi

Adăugați cod CSS în modul

Următorul cod CSS va transforma automat modulul nostru de 8 produse în carduri magnetice reactive:

<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>

Adaugă cod css divi

Potriviți diferite conturi de produse

Acum, dacă doriți să adăugați mai puține (sau mai multe) produse la modulul magazin, codul se modifică ușor în două locuri. Ambele locații trebuie schimbate manual pentru a se potrivi cu rezultatul dorit. Să schimbăm, de exemplu, numărul de produse din modulul magazinului nostru la „4”.

  • Număr de produse: 4
Potriviți un cont de produs diferit

Când revenim la codul nostru, trebuie să facem două modificări. În primul rând, va trebui să modificăm coloanele șablonului de grilă. În loc de 8, folosim 4 (același număr ca și numărul nostru de produse). De asemenea, mărim procentajul pe care îl ocupă aceste produse în fișele noastre de produse (cu cât sunt mai multe produse, cu atât mai puțin spațiu).

grid-template-column: repetați (4, 14%)! important;

Apoi vom schimba și lățimea containerului în care sunt plasate produsele. Pentru 4 produse, acest lucru este egal cu 150%. Aceste valori nu sunt fixe, sunt obținute prin redarea și găsirea unei armonii între coloanele modelului de grilă și lățimea containerului. 

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

Pentru a găsi echilibrul corect, comutați la vizualizarea mobilă din Visual Builder și reglați cu atenție valorile în timp ce vizualizați rezultatul acestor modificări.

width: 150%!important;

Adăugați un cod divi css suplimentar

Adăugați un instantaneu la defilare

Dacă doriți să faceți experiența utilizatorului un pas mai departe în proiectarea cardului dvs. de glisare, puteți adăuga, de asemenea, un snap de derulare. Captura de derulare permite vizitatorilor dvs. să deruleze, privind fix la începutul unui nou produs.

 Acest lucru înseamnă că scanarea lor nu trebuie să fie exactă, defilarea va prelua la un moment dat și va afișa ajustarea poziției sale în interiorul mecanismului de derulare laterală. 

Pentru a activa capturarea defilării pe cardurile swipe ale produsului dvs., adăugați 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 captura de defilare pe modulul magazinului nostru adăugând următoarea linie de cod CSS:

scroll-snap-type: x obligatoriu

Personalizați codul CSS

Reutilizați modulul de atelier pentru a afișa alte categorii

Clonezi o linie întreagă o dată

După ce ai finalizat primul set de carduri magnetice, poți clona întreaga linie o singură dată.

Reutilizați modulul de atelier divi

Eliminați modulul de cod în linia duplicată

Atâta timp cât modulul dvs. de magazin conține aceeași clasă CSS ca și precedentul, un modul de cod va face. Continuați și eliminați modulul de cod din linia dvs. duplicat.

Duplicați modulul codului divi

Clonați linia duplicată atât cât doriți

Și clonați linia duplicată acum de câte ori este necesar, în funcție de numărul de seturi de carduri swipe pe care doriți să le afișați pe pagina dvs. de destinație!

Clonați modulul atât cât este necesar
Modulul duplicat divi

4. Salvați modificările paginii și vizualizați rezultatele pe un dispozitiv mobil

Asigurați-vă că, după 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 demo pe dispozitivul mobil

studiu

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Animatie magazin modul Divi produs

Ultimele gânduri

În acest articol, v-am arătat cum să transformați modulul Divi Shop integrat în carduri magnetice de produs pe dimensiuni mai mici de ecran. Pe desktop, am păstrat structura de coloană originală atribuită modulului Magazin. 

Utilizarea hărților de glisare a produselor 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ă.

Aceasta este o tendință utilizată adesea în proiectarea modernă a site-urilor web, deoarece se concentrează pe comportamentul utilizatorilor și facilitează accesul la o gamă largă de elemente pe ecrane mai mici.

 Puteți utiliza aceste fișe de produse pe orice pagină, dar este deosebit de utilă pentru orice pagini de destinație a produselor pe care le creați. De asemenea, ați putut descărca gratuit fișierul JSON cu aspect! 

Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top