Wyróżnienie wtyczki Divi: moduł karuzeli produktów Divi

Divi Product Carousel Module to wtyczka innej firmy dla Divi, która wyświetla produkty WooCommerce w suwaku karuzeli. Zbuduj karuzelę produktów i umieść ją w dowolnym układzie Divi. Możesz je stylizować i wybierać wiele opcji układu i wyświetlania. W tym artykule przyjrzymy się modułowi karuzeli produktów Divi, poznamy jego funkcje i przekonamy się, jak łatwy jest w użyciu.

Moduł karuzeli produktów Divi jest dostępny na stronie internetowej programisty i na rynkach Divi.

Moduł karuzeli produktów Divi

Po przesłaniu i aktywacji wtyczki przejdź do DiviGear w menu pulpitu nawigacyjnego i aktywuj licencję. Jeśli masz wiele wtyczek tego programisty, musisz wybrać kartę wtyczki.

Do Divi Buildera dodano nowy moduł o nazwie Product Carousel. Zawiera fioletową ikonę, dzięki czemu wyróżnia się z tłumu.

Ustawienia obejmują karty Treść, Projekt i Zaawansowane. Karta Treść zawiera ustawienia dla treści WooCommerce. Wybierz typ produktu z ostatnich, polecanych, wyprzedaży, najlepiej sprzedających się, najwyżej ocenianych lub kategorii produktów z listy rozwijanej. Wprowadź liczbę odpowiadającą liczbie produktów, którą chcesz wyświetlić. Wybierz kolejność sortowania według popularności, oceny, daty lub ceny. Możesz także włączyć przycisk i opis Dodaj do koszyka. Pokaż pełny opis lub fragment.

Ustawienia karuzeli pozwalają wybrać liczbę kolumn w zależności od używanego urządzenia. Obejmuje również multislajdy (włącz przesuwanie według liczby slajdów na ekranie lub wyłącz je, aby przesuwać jeden slajd na raz), odstępy między elementami, czas trwania przejścia, środek, pętlę, autoodtwarzanie, nawigację po punktach i strzałkach, wyrównanie i efekt slajdów. Inne ustawienia obejmują link i tło. Ciekawe, że możesz używać razem kropek i strzałek. Możesz umieścić kropki po prawej, pośrodku lub po lewej stronie na dole slajdu.

Karta Projekt zawiera ustawienia nakładki, tytułu, ceny, opisu, plakietki sprzedaży, przycisku dodawania do koszyka, recenzji, strzałki, kropek, obrazu, najechania kursorem, odstępów, obramowania i cienia pola. Inne ustawienia są dodawane na podstawie wybranych przez Ciebie wyborów. Każde z tych ustawień jest rozbudowane.

Karta Zaawansowane zawiera oczekiwane funkcje CSS, widoczność i przejścia. Niestandardowy CSS zawiera pola dla produktu, obrazu, tytułu, ceny, odznaki sprzedaży strzałka poprzednia, strzałka następna i kropki. Daje to dużą kontrolę dzięki CSS.

Ustawienia modułu karuzeli produktów Divi

Możesz przenieść tytuły i ceny na górę lub na dół. W tym przykładzie przeniosłem oba na górę i zmieniłem ich rozmiar i kolor. Wystylizowałem znaczek sprzedaży, zmieniając kolor tła i rozmiar czcionki. Stylizowałem również nieaktywne i aktywne kropki.

Oto jak to wygląda z przodu. Dodałem również nakładkę i po najechaniu kursorem pojawi się przycisk Dodaj do koszyka. Możesz nadać temu przyciskowi styl zarówno dla aktywowania nakładki, jak i aktywowanego przycisku.

W tym przypadku wybrałem 6 kolumn, przeniosłem cały tekst z powrotem na dół, dostosowałem kolory tekstu i dodałem trochę krycia do przycisku Dodaj do koszyka. Pozostawiłem domyślną nieprzezroczystość najechania kursorem, więc przycisk jest solidny, jeśli najedziesz na sam przycisk.

W tym przypadku ustawiłem układ na 4 kolumny. Dodałem strzałki i zmieniłem kolory strzałek i kropek. Dodałem również tło do tytułu, ceny i opisu oraz zmieniłem cały tekst na biały. Aby dobrze wyrównać tekst w ramce, dodałem trochę dopełnienia treści. Zawiera również dopełnienie treści na górze (na wypadek, gdybyś umieścił tytuł lub cenę nad obrazem).

Oto jak to wygląda z przodu. Strzałka po prawej stronie jest jaśniejsza, aby wskazać, że znajduje się na końcu produktów, które może wyświetlić. Jeśli ustawię to na pętlę, będzie to normalny kolor.

Oto jak to wygląda po wybraniu opcji Przepełnienie. Zapewnia ładny efekt karty 3D. Możesz dostosować stopień obrotu i włączyć cień slajdów.

W tym przykładzie nadałem kartom cień i dostosowałem rozmycie. Zmieniłem też strzałki na okrąg i dostosowałem kolory.

Oto jak to wygląda na froncie z włączonym środkowym slajdem. To jest układ 4-kolumnowy. Wyświetla się inaczej po wybraniu slajdu centralnego.

To jest układ 5-kolumnowy z tymi samymi ustawieniami, co w powyższym przykładzie.

Karuzela produktów dobrze wpisuje się w układy Divi. W tym przykładzie zastąpiłem moduł Divi Shop modułem Divi Product Carousel i nadałem mu styl, aby pasował do układu.

W tym przypadku przeniosłem tytuł na górę, dodałem trochę dopełnienia na górze i na dole oraz uczyniłem tytuły półpogrubionymi. Zmieniłem również kolor przycisku Dodaj do koszyka, aby pasował do układu.

W tym przypadku dostosowałem obramowanie slajdów i obrazów, aby utworzyć zaokrąglone rogi. Poszedłem dalej i ułożyłem obrazy w kręgi. Dodałem również cień do pudełka.

Świetnie prezentuje się w układzie. Ukrywa jednak większość odznaki sprzedaży. Jest prawdopodobnie sposób na obejście tego z CSS.

Ten używa Overflow z układem 3-kolumnowym.

W tym przypadku usunąłem obramowanie obrazu, ale zachowałem obramowanie slajdów. Dodałem cień pudełka i dostosowałem jego siłę i położenie.

Pokazuje również liczbę gwiazdek z recenzji po najechaniu kursorem. Umieszcza ocenę obok przycisku Dodaj do koszyka. Łączy je z fajną animacją. To są ustawienia domyślne. Możesz stylizować kolory tła i gwiazd.

W tym przypadku stylizowałem oceny tak, aby pasowały do ​​elementów układu.

W tym przypadku przeniosłem cenę na górę, a tytuł na dół. Dodałem opis i nakładkę. Przesunąłem nawigację z kropkami w prawo. Musiałem dodać trochę wyściółki, aby cień pudełka był widoczny po bokach. Bez wyściółki umieszcza produkt na krawędzi przestrzeni modułu.

Prezentacje modułu karuzeli produktów Divi

Obecnie na stronie dewelopera dostępnych jest 13 wersji demonstracyjnych do pobrania. Są to układy, które można przesłać do biblioteki Divi i używać z dowolnym układem Divi. Wszystkie zawierają stylizację modułu Divi Product Carousel, a niektóre zawierają inne stylizowane moduły i tła. Są one dobre, aby uzyskać punkt wyjścia z projektami karuzeli produktów i pokazać niektóre rzeczy, które można zrobić za pomocą modułu. Przyjrzyjmy się kilku z nich.

Ten umieszcza tytuły na górze, style na górze i na dole, aby pasowały, dodaje zakreślone strzałki poza obrazami i zawiera kropki. Ma również dolną ramkę, aby wyróżnić slajdy. Lubię odważne kolory. Góra i dół mają trochę przezroczystości, więc wzory tła są widoczne. Ten układ zawiera stylizowany moduł tekstowy dla tytułu.

Kilka układów zawiera inne moduły ze stylizacją. Ten wykorzystuje układ dwukolumnowy, aby dodać wezwanie do działania za pomocą modułów tekstowych i przycisków.

Oto jak to wygląda z przodu. Zawiera obramowanie, tytuły u góry i dwa kolory przycisku Dodaj do koszyka. Strzałki pokazują się na obrazach modułu.

Ten zawiera zielone tło i dopasowane slajdy. Przycisk Dodaj do koszyka jest jasnozielony po najechaniu na produkt, a następnie ciemnozielony po najechaniu na przycisk. Zawiera stylizowany moduł tekstowy dla tytułu.

Ten zawiera niebieską stylizację odznak sprzedaży, okrągłe strzałki poza obrazami i przycisk Dodaj do koszyka. Dodaje małą ramkę do slajdów. Wyświetla slajdy z efektem Overflow.

Ten wyświetla również produkty z efektem Overflow. Używa również niebieskich strzałek i przycisku Dodaj do koszyka. Tytuł zostaje przeniesiony na górę. Nakładka jest biała o wysokim stopniu krycia, a logo sprzedaży jest czerwone.

Ten zawiera stylizowane tło i dodaje obramowanie, stylizowany przycisk Dodaj do koszyka, odznakę sprzedaży i zakreślone strzałki. Nakładka jest biała. Umieszcza cenę na górze, a wszystkie inne dane na dole.

Cena i dokumentacja modułu karuzeli produktów Divi

Istnieją dwie opcje zakupu modułu karuzeli produktów Divi:

• Pojedyncza strona – 19 $
• Nieograniczone witryny – 39 USD

Jest dostępny na stronie dewelopera oraz na platformach handlowych.

Dokumentacja jest dostarczana przez film na YouTube, który przeprowadzi Cię przez funkcje. Link do niego znajdziesz w menu DiviGear na desce rozdzielczej. Jeśli masz więcej niż jeden produkt DiviGear, wybierz zakładkę produktu, a następnie wybierz Dokumentacja.

Końcowe myśli

Karuzela produktów Divi jest łatwa w użyciu i świetnie nadaje się do wyróżnienia Twoich produktów. Nawet jeśli nie chcesz wyświetlać ich jako slidera, ma wiele opcji stylizacji i prezentacji produktów, dzięki czemu warto się nad tym zastanowić. Nie pracowałem tak dobrze z Extra. Chciałbym, aby usługa Extra była obsługiwana, ponieważ ma już wiele funkcji WooCommerce i jest świetną platformą do budowania sklepów WooCommerce.

Podoba mi się, że ma do pobrania dema. Obejmują one tła i stylizację modułu. Są one świetne, aby dać ci punkt wyjścia lub pobudzić wyobraźnię do prezentacji produktów WooCommerce w układach Divi.

Jeśli interesuje Cię prezentacja produktów WooCommerce na karuzeli lub po prostu masz kilka dodatkowych opcji projektowych, warto zajrzeć do Divi Product Carousel Module. Jest dostępny na stronie dewelopera oraz na rynkach Divi.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś moduł karuzeli produktów Divi? Daj nam znać, co o tym myślisz w komentarzach.

Polecany obraz Letters-Shmetters / shutterstock.com