Preskoči na glavni sadržaj

Pretvorite Divi Shop modul u dinamične mape proizvoda na mobitelu

Divi: najlakša tema za WordPress

Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka. [Preporučeno]

Kada izradite odredišnu stranicu za određene proizvode, bilo da se radi o novom predstavljanju ili prodaji za koju se pripremate, velike su šanse da ćete u nekom trenutku koristiti modul Trgovina. Modul Divi's Shop omogućuje vam dinamičko izdvajanje proizvoda iz dodatka WooCommerce i njihovo oblikovanje pomoću ugrađenih opcija Divija. 

Sada se prema zadanim postavkama shop modul isporučuje s nekoliko struktura stupaca koji se svi prevode u dva stupca na manjim veličinama zaslona. To znači da što više proizvoda odlučite prikazati, potrebno je više vertikalnog pomicanja da biste došli do sljedećeg dijela vaše odredišne ​​stranice.

U modernom web dizajnu, tehnika koja se često koristi za ograničavanje vertikalnog pomicanja i prikaza elemenata u skladu s preferencijama posjetitelja jest korištenje magnetskih kartica. U ovom vodiču pokazat ćemo vam kako transformirati modul Divi trgovine u dinamičke mape proizvoda na manjim veličinama zaslona bez upotrebe dodatka. 

Za početak ćemo pripremiti različite elemente našeg odjeljka o proizvodu i upotrijebiti malu količinu CSS koda kako bismo aktivirali efekt čišćenja. To je sjajan način da se na vašoj odredišnoj stranici prikaže širok raspon proizvoda, a da pritom ne zamarate posjetitelje. 

Mogući ishod

Prije nego što uđemo u tutorial, pogledajmo rezultat. Magnetske kartice proizvoda aktiviramo samo na tabletima i mobitelima. Na radnoj površini zadržavamo strukturu stupaca koju odredimo u modulu Trgovina.

Animacija trgovine modula proizvoda Divi

1. Konfigurirajte WooCommerce i stranice proizvoda

Prije ulaska u Divi dio ovog vodiča, važno je da dodatak WooCommerce bude instaliran i aktiviran na vašoj web stranici. Ako već niste, dodajte više proizvoda, ovisno o broju proizvoda koji želite prikazati u modulu Shop.

Stvorite woocommerce proizvode

2. Stvorite novu stranicu i preuzmite izgled stranice pribora

Izradite novu stranicu

Nakon što proizvodi postanu na mjesto, dodajte novu stranicu u svoj WordPress backend. Dajte svojoj stranici naslov, objavite je i aktivirajte Divi Visual Builder.

Stvorite divi stranicu
Stvorite novu divi stranicu

Preuzmite izgled odredišne ​​stranice

Kad uđete na novu stranicu, prijeđite na unaprijed postavljene izglede i preuzmite raspored odredišne ​​stranice pribora. Iako koristimo ovaj specifični izgled, možete koristiti bilo koji drugi izgled koji želite, sve dok dodate ili locirate modul trgovine unutar ovog izgleda.

Odaberite raspored divi

3. Izmijenite odjeljak trgovine

Pronađite odjeljak s modulom Trgovina

Ako se pomaknemo prema dolje do naše nove stranice koju smo kreirali pomoću izgleda početne stranice pribora, naići ćemo na odjeljak s modulom trgovine. Ovaj ćemo odjeljak koristiti tijekom sljedećih koraka ovog vodiča.

Pronađite modul trgovine

Postavke linije

Odgovarajuće veličine

Započnite otvaranjem postavki retka u retku koji sadrži modul Trgovina. Kao što je već spomenuto, zadržavamo isti dizajn na radnoj površini, a magnetske kartice proizvoda aktivirat ćemo samo na manjim veličinama zaslona. 

Da bismo stvorili iskustvo bez napora, omogućit ćemo da red dodirne lijevu i desnu stranu našeg zaslona, ​​mijenjajući širinu u postavkama veličine.

  • Koristite prilagođenu širinu oluka: 1
  • Širina: 80% (desktop), 100% (tablet i telefon)
Responzivna izmjena dizajna

vidljivost

Također ćemo osigurati da ništa ne nadiđe spremnik retka postavljanjem skrivenih postavki vidljivosti.

  • Vodoravni preljev: skriven
  • Okomiti preljev: skriven
Konfiguracija vidljivosti Divi

Postavke modula trgovine

Odaberite broj proizvoda i uredsku strukturu stupaca po vašem izboru

Dalje, otvorit ćemo postavke modula Shop. Promjene u našem CSS kodu (koje ćemo dodati kasnije) ovise o broju proizvoda koje prikazujemo. 

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje jednostavno stvaranje bilo kojeg dizajna web stranice s profesionalnim izgledom. Prestanite plaćati skupo za ono što možete učiniti sami. [Slobodni]

Za početak ćemo vam pokazati kako pretvoriti modul trgovine s 8 proizvoda u kartice proizvoda. Za radnu površinu možete odabrati bilo koji raspored stupaca koji želite.

  • Broj proizvoda: 8
  • Izgled stupca: 4 stupca
Izmijeniti dizajn stupaca divi

Odgovarajuće veličine

Da bismo povećali veličinu našeg modula trgovine, mijenjati ćemo parametre veličine na kartici dizajn. Imajte na umu da to radimo samo za tablet i telefon.

  • Širina: 100% (desktop), 250% (tablet i telefon)
  • Maksimalna širina: 100% (radni stol), 250% (tablet i telefon)
Konfiguracija prilagodljivog dizajna

CSS klasa

Također ćemo dodati CSS klasu u naš modul trgovine. Kasnije, kada dodamo CSS kôd, možemo transformirati modul Shop koji nosi samo ovu CSS klasu. Drugim riječima, ako želite da se drugi modul Shop pojavljuje u normalnom stanju, izostavljanje ove CSS klase omogućit će vam to.

  • CSS klasa: pomicanje karata proizvoda
Promijenite atribut css divi shop modul

Reaktivni preljevi

Postavke linije dopunit ćemo promjenom postavki vidljivosti na različitim veličinama zaslona. Kao što vidite u postavkama, želimo da se efekt pomicanja javlja samo na manjim veličinama zaslona.

  • Vodoravni preljev: skriveno (stol), pomicanje (tablet i telefon)
  • Okomiti preljev: skriven
Konfiguracija preljeva

Dodajte modul koda ispod modula Trgovina

Nakon što izmijenite Shop modul, možete dodati modul koda odmah ispod.

Dodajte modul koda pod modul divi shop

Dodajte CSS kôd u modul

Sljedeći CSS kôd automatski će transformirati naš prodajni modul od 8 proizvoda u reaktivne magnetske kartice:

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

Dodajte kod css divi

Poklapanje različitih računa proizvoda

Ako želite dodati manje (ili više) proizvoda u svoj modul trgovine, kod se na dva mjesta malo mijenja. Ova se dva mjesta moraju ručno promijeniti kako bi odgovarala željenom rezultatu. Promijenimo na primjer broj proizvoda u našem modulu trgovine na '4'.

  • Broj proizvoda: 4
Uskladite različite račune proizvoda

Kad se vratimo našem kodu, moramo napraviti dvije promjene. Prvo ćemo trebati izmijeniti stupce predloška mreže. Umjesto 8, koristimo 4 (isti broj kao i naš broj proizvoda). Povećavamo i postotni udio koji ti proizvodi zauzimaju u našim tablicama proizvoda (što više proizvoda, to manje prostora).

grid-template-stupci: ponovite (4, 14%)!

Tada ćemo promijeniti i širinu posude u koju se stavljaju proizvodi. Za 4 proizvoda to iznosi 150%. Te vrijednosti nisu fiksne, dobivaju se igranjem i pronalaženjem harmonije između stupaca mrežnog modela i širine spremnika. 

Tražite li najbolje WordPress teme i dodatke?

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

Da biste pronašli pravu ravnotežu, prebacite se na mobilni prikaz u Visual Builderu i pažljivo prilagodite vrijednosti dok gledate rezultat tih promjena.

width: 150%!important;

Dodajte dodatni divi css kôd

Dodajte kvačicu za pomicanje

Ako želite napraviti korisničko iskustvo korak dalje u dizajnu kartice za prevlačenje, možete dodati i pomicanje pomicanja. Hvatanje pomicanja omogućuje posjetiteljima pomicanje zureći u početak novog proizvoda.

 To znači da njihovo skeniranje ne mora biti točno, pomicanje pomicanja će u jednom trenutku preuzeti i zaslon prilagođavajući svoj položaj unutar mehanizma bočnog pomicanja. 

Da biste omogućili hvatanje pomicanja na karticama za prevlačenje proizvoda, dodajte redak CSS koda svakom proizvodu pojedinačno u CSS kodu (pogledajte donji zaslon za ispis).

pomaknite se-poravnajte: pokrenite

Također ćemo aktivirati snimanje pomicanja na našem modulu trgovine dodavanjem sljedećeg retka CSS koda:

tipka za pomicanje: x obavezno

Prilagodite css kôd

Ponovno upotrijebite modul radionice za prikaz ostalih kategorija

Klonirajte cijelu crtu jednom

Nakon što popunite prvi set magnetskih kartica, možete klonirati cijelu liniju jednom.

Ponovno upotrijebite modul divi radionice

Uklonite kodni modul u dvostrukom retku

Sve dok vaš modul trgovine sadrži istu CSS klasu kao i prethodna, modul koda će raditi. Naprijed i uklonite modul koda u dupliciranom retku.

Duplicirajte modul divi koda

Klonirajte duplikatnu liniju koliko god želite

I klonirajte dvostruku liniju sada onoliko puta koliko je potrebno, ovisno o broju skupa prelaznih kartica koje želite prikazati na vašoj odredišnoj stranici!

Klonirajte modul koliko god je potrebno
Duplicirani divi modul

4. Spremite promjene stranice i pregledajte rezultate na mobilnom uređaju

Svakako završite s dodavanjem kartica za prevlačenje proizvoda, spremite stranicu prije izlaska iz Visual Builder-a i gotovi ste!

Pregled demonstracije na mobilnom uređaju

pregled

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Jednostavno izradite svoju mrežnu trgovinu

Preuzmite besplatnu WooCommerce, najbolji e-trgovinski dodatak za prodaju fizičkih i digitalnih proizvoda na WordPressu. [Preporučeno]

Animacija trgovine modula proizvoda Divi

Završne misli

U ovom smo vam članku pokazali kako integrirani Divi Shop modul pretvoriti u magnetne kartice proizvoda na manjim veličinama zaslona. Na radnoj površini zadržali smo izvornu strukturu stupaca dodijeljenu modulu Shop. 

Korištenje mapa za prevlačenje proizvoda omogućuje vam dodavanje beskrajnih proizvoda u mehanizam vodoravnog prevlačenja bez da prevladate okomitim pomicanjem posjetitelja.

To je trend koji se često koristi u modernom dizajnu web stranica jer je usredotočen na ponašanje korisnika i olakšava pristup širokom spektru elemenata na manjim zaslonima.

 Ove listove proizvoda možete koristiti na bilo kojoj stranici, ali je posebno korisno za sve odredišne ​​stranice proizvoda koje izradite. Također možete besplatno preuzeti JSON datoteku za izgled! 

Ako imate pitanja ili prijedloge, slobodno ostavite komentar u odjeljku za komentare u nastavku.

Ovaj članak sadrži komentare 0

Ostavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.

Povratak na vrh
0 dionice
udio
cvrkut
Prijaviti