Przekształcanie modułu Divi's Shop w dynamiczne karty do przesuwania produktów na urządzeniach mobilnych

Tworząc stronę docelową dla określonych produktów, niezależnie od tego, czy przygotowujesz się do nowej premiery, czy do wyprzedaży, istnieje duże prawdopodobieństwo, że w pewnym momencie użyjesz modułu sklepu. Moduł Divi's Shop pozwala dynamicznie pobierać produkty z wtyczki WooCommerce i stylizować produkty za pomocą wbudowanych opcji Divi. Teraz domyślnie moduł sklepu zawiera kilka struktur kolumnowych, które przekładają się na dwie kolumny na mniejszych ekranach. Oznacza to, że im więcej produktów wybierzesz do pokazania, tym więcej musisz przewijać w pionie, aby przejść do następnej części strony docelowej.

We współczesnym projektowaniu stron internetowych często stosowaną techniką ograniczania przewijania w pionie i wyświetlania elementów na podstawie preferencji użytkowników jest używanie kart przesuwanych. W tym samouczku pokażemy, jak zmienić moduł Divi Shop w dynamiczne karty przesuwania produktów na mniejszych ekranach bez użycia wtyczki. Zaczniemy od przygotowania różnych elementów w naszej sekcji produktów i użyjemy niewielkiej ilości kodu CSS, aby umożliwić efekt przesuwania. To świetny sposób na pokazanie szerokiej gamy produktów na stronie docelowej bez przytłaczania odwiedzających. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wynik. Włączamy karty przesuwania produktów tylko na tablecie i telefonie komórkowym. Na pulpicie zachowujemy strukturę kolumn, którą określamy w module Sklep.

mobilny

Pulpit

Pobierz układ kart przesuwania produktu ZA DARMO

Aby położyć swoje ręce na układzie kart z darmowymi przeciąganiami produktów, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Skonfiguruj WooCommerce i strony produktów

Zanim przejdziesz do części Divi tego samouczka, ważne jest, aby wtyczka WooCommerce była zainstalowana i aktywowana w Twojej witrynie. Jeśli jeszcze tego nie zrobiłeś, dodaj kilka produktów, w zależności od tego, ile produktów chcesz wyświetlić w module Sklepu.

2. Utwórz nową stronę i prześlij układ strony docelowej papeterii

Utwórz nową stronę

Gdy już masz produkty, dodaj nową stronę w swoim zapleczu WordPress. Nadaj swojej stronie tytuł, opublikuj stronę i włącz Visual Builder Divi.

Prześlij układ strony docelowej papeterii

Po wejściu na nową stronę przejdź do gotowych układów i prześlij układ strony docelowej sklepu papierniczego. Chociaż używamy tego konkretnego układu, możesz użyć dowolnego innego układu, o ile dodasz lub zlokalizujesz moduł sklepu w tym układzie.

3. Zmodyfikuj sekcję sklepu

Zlokalizuj sekcję z modułem Sklep

Jeśli przewiniemy w dół naszą nową stronę, którą zbudowaliśmy za pomocą układu strony docelowej sklepu papierniczego, natkniemy się na sekcję z modułem sklepu. Ta sekcja będzie używana w kolejnych krokach tego samouczka.

Ustawienia wiersza

Responsywne Rozmiary

Zacznij od otwarcia ustawień wiersza zawierającego moduł Sklep. Jak wspomnieliśmy wcześniej, zachowujemy ten sam wygląd na komputerach stacjonarnych, karty przesuwania produktów zostaną włączone tylko na mniejszych ekranach. Aby zapewnić bezproblemowe wrażenia, 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ść

Upewnimy się również, że nic nie przewyższy kontenera wierszy, ustawiając ustawienia widoczności na ukryte.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Sklep Ustawienia modułu

Wybierz liczbę produktów i strukturę kolumn pulpitu do wyboru

Następnie otworzymy ustawienia modułu sklepu. Zmiany, które wprowadzamy w naszym kodzie CSS (który dodamy później) zależą od liczby wyświetlanych produktów. Zaczniemy od pokazania, jak zamienić moduł sklepu z 8 produktami w karty przesuwania produktów. Możesz wybrać dowolny układ kolumn na pulpicie.

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

Responsywne Rozmiary

Aby zwiększyć rozmiar naszego modułu sklepu, zmodyfikujemy ustawienia rozmiaru w zakładce projekt. Zwróć uwagę, że robimy to tylko na tablecie i telefonie.

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

Klasa CSS

Dodamy również klasę CSS do naszego modułu sklepu. Później, gdy dodamy kod CSS, będziemy mogli przekształcić moduł Sklep, który zawiera tylko tę klasę CSS. Innymi słowy, jeśli chcesz, aby kolejny moduł sklepu pojawił się w normalnym stanie, pominięcie tej klasy CSS pozwoli ci to zrobić.

• Klasa CSS: product-swipe-cards

Responsywne przelewy

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

• Przepełnienie poziome: ukryte (komputer), przewijanie (tablet i telefon)
• Przepełnienie pionowe: ukryte

Dodaj moduł kodu poniżej modułu sklepu

Po zmodyfikowaniu modułu sklepu możesz dodać moduł kodu tuż pod nim.

Dodaj kod CSS do modułu

Poniższy kod CSS automatycznie zmieni nasz moduł sklepu z 8 produktami w responsywne karty przeciągania produktów:

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

Dopasowanie różnych ilości produktów

Teraz, jeśli chcesz dodać mniej (lub więcej) produktów do modułu sklepu, kod zmieni się nieznacznie w dwóch miejscach. Te dwa miejsca należy ręcznie zmodyfikować, aby dopasować je do pożądanego rezultatu. 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 zmienić kolumny szablonu siatki. Zamiast 8 używamy 4 (ta sama liczba, co liczba naszych produktów). Zwiększamy też procentowo rozmiar, jaki te produkty zajmują na naszych kartach przesuwania produktów (im więcej produktów, tym mniej miejsca).

grid-template-columns: repeat(4, 14%) !important;

Następnie zmodyfikujemy również szerokość kontenera, w którym są umieszczane produkty. Dla 4 produktów jest to równe 150%. Te wartości nie są ustalone na stałe, można je osiągnąć poprzez zabawę i znalezienie harmonii między kolumnami szablonu siatki a szerokością kontenera. Aby znaleźć odpowiednią równowagę, przełącz się na widok mobilny w programie Visual Builder i ostrożnie dostosuj wartości podczas przeglądania wyników tych zmian.

width: 150% !important;

Dodaj przyciąganie przewijania

Jeśli chcesz przenieść wrażenia użytkownika o krok dalej w projekcie karty przesuwania produktu, możesz również dodać przyciąganie przewijania. Przyciąganie przewijania pomaga odwiedzającym przewijać, przyciągając do początku nowego produktu. Oznacza to, że ich przesunięcie nie musi być dokładne, przyciąganie przewijania w pewnym momencie przejmie i pokaże dostosuje ich pozycję w mechanizmie przewijania poziomego. Aby włączyć przyciąganie przewijania na kartach przesuwania produktów, dodaj jeden wiersz kodu CSS do każdego produktu osobno w kodzie CSS (patrz zrzut ekranu poniżej).

scroll-snap-align: start

Włączymy również przyciąganie przewijania w naszym module sklepu, dodając następujący wiersz kodu CSS:

scroll-snap-type: x mandatory

Ponownie użyj modułu sklepu, aby wyświetlić inne kategorie

Klonuj cały rząd raz

Po ukończeniu pierwszego zestawu kart do przenoszenia produktów możesz sklonować cały wiersz raz.

Usuń moduł kodu w zduplikowanym wierszu

Dopóki moduł sklepu zawiera tę samą klasę CSS, co poprzednia, wystarczy jeden moduł kodu. Śmiało i usuń moduł kodu w zduplikowanym wierszu.

Klonuj zduplikowany wiersz, ile chcesz

I sklonuj zduplikowany wiersz tyle razy, ile potrzeba, w zależności od tego, ile zestawów kart do przesuwania produktów chcesz wyświetlić na swojej stronie docelowej!

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

Upewnij się, że po zakończeniu dodawania kart przesuwania produktu zapiszesz swoją stronę przed wyjściem z programu Visual Builder i gotowe!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

mobilny

Pulpit

Końcowe przemyślenia

W tym poście pokazaliśmy, jak zamienić wbudowany moduł Divi Shop w karty do przesuwania produktów na mniejszych ekranach. Na desktopie zachowaliśmy oryginalną strukturę kolumn przypisaną do modułu Shop. Korzystanie z kart przesuwania produktów umożliwia dodawanie niekończących się produktów do mechanizmu przesuwania w poziomie bez przytłaczania odwiedzających przewijaniem w pionie.

Jest to często używany trend we współczesnym projektowaniu stron internetowych, ponieważ skupia się na zachowaniu użytkowników i ułatwia dostęp do szerokiej gamy elementów na mniejszych ekranach. Możesz używać tych kart przesuwania produktów na dowolnej stronie, ale jest to szczególnie wygodne w przypadku tworzonych przez Ciebie stron docelowych produktów. Udało Ci się również bezpłatnie pobrać plik JSON układu! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.