Przejdź do głównej treści

Przekształć moduł Divi Shop w dynamiczne mapy produktów na urządzeniach mobilnych

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Podczas tworzenia strony docelowej dla określonych produktów, niezależnie od tego, czy jest to nowa premiera, czy wyprzedaż, na którą się przygotowujesz, istnieje duże prawdopodobieństwo, że w pewnym momencie użyjesz modułu Sklep. Moduł Divi Shop pozwala dynamicznie wyodrębniać produkty z wtyczki WooCommerce i nadawać im styl za pomocą zintegrowanych opcji Divi.

Teraz domyślnie moduł sklepu jest dostarczany z kilkoma strukturami kolumn, które wszystkie przekładają się na dwie kolumny na mniejszych ekranach. Oznacza to, że im więcej produktów wybierzesz do wyświetlenia, tym więcej przewijania w pionie zajmie przejście do następnej części strony docelowej.

We współczesnym projektowaniu stron internetowych często stosuje się karty magnetyczne, aby ograniczyć przewijanie w pionie i wyświetlanie elementów zgodnie z preferencjami użytkowników. W tym samouczku pokażemy, jak przekształcić moduł sklepu Divi w dynamiczne mapy produktów na mniejszych ekranach bez użycia wtyczki.

Zaczniemy od przygotowania różnych elementów naszej sekcji produktów i użyjemy niewielkiej ilości kodu CSS, aby aktywować efekt skanowania. To świetny sposób na pokazanie szerokiej gamy produktów na stronie docelowej bez przytłaczania użytkowników.

Możliwy wynik

Przed zanurzeniem się w samouczku spójrzmy na wynik. Aktywujemy karty magnetyczne produktu tylko na tablecie i telefonie komórkowym. Na pulpicie zachowujemy strukturę kolumn, które określamy w module Sklep.

1. Skonfiguruj strony WooCommerce i produktów

Przed wejściem do części Divi tego samouczka ważne jest, aby wtyczka WooCommerce została zainstalowana i aktywowana na twojej stronie internetowej. Jeśli jeszcze tego nie zrobiłeś, dodaj kilka produktów, w zależności od liczby produktów, które chcesz wyświetlić w module Sklep.

2. Utwórz nową stronę i pobierz układ strony papeterii

Utwórz nową stronę

Gdy produkty będą gotowe, dodaj nową stronę do backendu WordPress. Nadaj swojej stronie tytuł, opublikuj stronę i aktywuj Divi Visual Builder.

Pobierz układ strony docelowej

Po wejściu na nową stronę przejdź do wstępnie zdefiniowanych układów i pobierz układ strony docelowej materiałów biurowych. Chociaż korzystamy z tego konkretnego układu, możesz dowolnie używać dowolnego innego układu, o ile dodajesz lub lokalizujesz moduł sklepu w tym układzie.

3. Zmodyfikuj sekcję sklepu

Znajdź sekcję z modułem Sklep

Jeśli przewiniemy w dół do naszej nowej strony, którą utworzyliśmy za pomocą układu strony głównej papeterii, natkniemy się na sekcję z modułem sklepu. Wykorzystamy tę sekcję w kolejnych krokach tego samouczka.

Ustawienia linii

Elastyczne dopasowanie

Zacznij od otwarcia parametrów wiersza zawierającego moduł Sklep. Jak wspomniano wcześniej, zachowujemy ten sam projekt na pulpicie, aktywujemy karty magnetyczne produktu tylko na mniejszych ekranach.

Aby stworzyć łatwą obsługę, pozwolimy wierszowi dotykać lewej i prawej strony naszego ekranu, zmieniając szerokość w ustawieniach rozmiaru.

  • Użyj niestandardowej szerokości rynny: 1
  • Szerokość: 80% (komputer stacjonarny), 100% (tablet i telefon)

widoczność

Dopilnujemy również, aby nic nie wykraczało poza kontener wiersza, ustawiając ustawienia widoczności na ukryte.

  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty

Ustawienia modułu sklepu

Wybierz liczbę produktów i wybraną strukturę kolumny biurowej

Następnie otworzymy parametry modułu Shop. Zmiany, które wprowadzamy w naszym kodzie CSS (które dodamy później) zależą od liczby wyświetlanych produktów.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Zaczniemy od pokazania, jak przekształcić moduł sklepu z 8 produktami w karty produktów. Możesz wybrać dowolny układ kolumn dla biura.

  • Liczba produktów: 8
  • Układ kolumn: 4 kolumny

Elastyczne dopasowanie

Aby zwiększyć rozmiar naszego modułu sklepu, zmodyfikujemy parametry rozmiaru w zakładce projektu. Pamiętaj, że robimy to tylko dla tabletu i telefonu.

  • Szerokość: 100% (komputer stacjonarny), 250% (tablet i telefon)
  • Maksymalna szerokość: 100% (biurko), 250% (tablet i telefon)

Klasa CSS

Dodamy również klasę CSS do naszego modułu sklepu. Później, gdy dodamy kod CSS, możemy przekształcić moduł Shop, który przenosi tylko tę klasę CSS. Innymi słowy, jeśli chcesz, aby inny moduł sklepu pojawił się w normalnym stanie, pozostawienie tej klasy CSS na boku pozwoli ci to zrobić.

  • Klasa CSS: karty machnięcia produktem

Reaktywne przelewy

Uzupełnimy parametry linii, modyfikując parametry widoczności na różnych rozmiarach ekranu. Jak widać w ustawieniach, chcemy, aby efekt przewijania występował tylko na mniejszych ekranach.

  • Przelew poziomy: ukryty (biurko), przewijanie (tablet i telefon)
  • Przelew pionowy: ukryty

Dodaj moduł kodu w module Shop

Po zmodyfikowaniu modułu Shop możesz dodać moduł kodu tuż poniżej.

Dodaj kod CSS do modułu

Poniższy kod CSS automatycznie przekształci nasz moduł sklepu z 8 produktami w reaktywne karty magnetyczne:

<Style> @media all i (maksymalna szerokość: 980px) { .product-swipe-cards ul. products {display: grid! ważne; grid-szablon-kolumny: powtórz (8, 8.8%)! ważne; grid-odstęp między kolumnami: 0.7%;} .product-swipe-cards .woocommerce ul.products :: before {content: none; display: block;} .product-swipe-cards.et_pb_shop ul. produkty li.product {szerokość: 100% ! Ważne;} .product-swipe-cards .woocommerce {szerokość: 255% ! ważne; margines lewy: 5%;} .product-swipe-cards :: - webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </ Style>

Dopasuj różne konta produktów

Teraz, jeśli chcesz dodać mniej (lub więcej) produktów do modułu sklepu, kod zmienia się nieznacznie w dwóch miejscach. Te dwie lokalizacje należy zmienić ręcznie w celu dopasowania do pożądanego wyniku. Zmieńmy na przykład liczbę produktów w naszym module sklepu na „4”.

  • Liczba produktów: 4

Kiedy wrócimy do naszego kodu, musimy wprowadzić dwie zmiany. Najpierw musimy zmodyfikować kolumny modelu siatki. Zamiast 8 używamy 4 (tyle samo co nasza liczba produktów). Zwiększamy również procentowy rozmiar zajmowany przez te produkty w naszych kartach produktów (im więcej produktów, tym mniej miejsca).

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

grid-szablon-kolumny: powtórz (4, 14%)! ważne;

Następnie zmienimy również szerokość pojemnika, w którym umieszczane są produkty. W przypadku 4 produktów odpowiada to 150%. Wartości te nie są ustalone, są uzyskiwane poprzez odtwarzanie i znajdowanie harmonii między kolumnami modelu siatki i szerokością pojemnika.

Aby znaleźć właściwą równowagę, przełącz się do widoku mobilnego w programie Visual Builder i ostrożnie dostosuj wartości podczas przeglądania wyników tych zmian.

szerokość: 150%!ważny;

Dodaj przystawkę do zwoju

Jeśli chcesz przenieść doświadczenie użytkownika o krok dalej w projektowaniu karty magnetycznej, możesz także dodać przewijanie do zwoju. Funkcja przechwytywania przewijania umożliwia odwiedzającym przewijanie, ustawiając się na początku nowego produktu.

Oznacza to, że ich skanowanie nie musi być dokładne, kliknięcie przewijające przejdzie w pewnym momencie i wyświetlacz dostosuje swoją pozycję wewnątrz poziomego mechanizmu przewijania.

Aby aktywować przechwytywanie, przewijając karty magnetyczne produktu, dodaj wiersz kodu CSS do każdego produktu osobno w kodzie CSS (patrz ekran drukowania poniżej).

scroll-snap-align: start

Aktywujemy również przechwytywanie przewijania w naszym module sklepu, dodając następujący wiersz kodu CSS:

scroll-snap-type: x obowiązkowe

Użyj ponownie modułu warsztatowego, aby wyświetlić inne kategorie

Sklonuj całą linię raz

Po ukończeniu pierwszego zestawu kart magnetycznych możesz raz sklonować całą linię.

Usuń moduł kodu w zduplikowanej linii

Tak długo, jak moduł sklepu zawiera tę samą klasę CSS, co poprzednia, moduł kodu wykona tę operację. Śmiało i usuń moduł kodu ze zduplikowanej linii.

Klonuj zduplikowaną linię tyle, ile chcesz

I klonuj teraz zduplikowaną linię tyle razy, ile to konieczne, w zależności od liczby zestawów kart machnięcia, które chcesz wyświetlić na stronie docelowej!

4. Zapisz zmiany strony i wyświetl wyniki na urządzeniu mobilnym

Upewnij się, że po zakończeniu dodawania kart magnetycznych do produktu zapiszesz stronę, zanim opuścisz Visual Builder i gotowe!

badanie

Teraz, gdy przeszliśmy przez wszystkie etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

końcowe przemyślenia

W tym artykule pokazaliśmy, jak przekształcić zintegrowany moduł Divi Shop w magnetyczne karty produktów na mniejszych ekranach. Na pulpicie zachowaliśmy oryginalną strukturę kolumn przypisaną do modułu Shop.

Korzystanie z kart skanujących produkty pozwala dodawać niekończące się produkty do poziomego mechanizmu skanującego bez przytłaczania użytkowników pionowym przewijaniem.

Jest to trend często wykorzystywany w nowoczesnym projektowaniu stron internetowych, ponieważ koncentruje się na zachowaniach użytkowników i ułatwia dostęp do szerokiej gamy produktów na mniejszych ekranach.

Możesz używać tych list produktów na dowolnej stronie, ale jest to szczególnie przydatne w przypadku tworzonych stron docelowych produktów. Możesz także pobrać plik JSON układu bezpłatnie!

Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer