Wyróżnienie wtyczki Divi: Divi BodyCommerce

Opublikowany: 2019-05-12

Divi BodyCommerce to wtyczka innej firmy do Divi, która zapewnia kontrolę nad projektem sklepu od strony produktu po stronę kasy i wszystko pomiędzy. Został zaprojektowany z myślą o konwersjach i zapewnia pełną kontrolę nad projektem sklepu za pomocą Divi Builder.

Gdy wtyczka oferuje tyle modułów i funkcji, co ta, ich użycie jest przytłaczające. Jednak w tym przypadku nie było to problemem, ponieważ wszystko jest łatwe do naśladowania i jest więcej filmów krok po kroku niż o jakiejkolwiek wtyczce, którą widziałem. W tym artykule przyjrzymy się Divi BodyCommerce i zobaczymy, co potrafi i jak łatwy w użyciu.

Instalacja i ustawienia Divi BodyCommerce

Prześlij i aktywuj wtyczkę jak zwykle. Aby aktywować licencję, przejdź do Divi Engine > Licencja BodyCommerce w menu pulpitu nawigacyjnego.

Kliknięcie BodyCommerce w menu pulpitu nawigacyjnego otwiera ustawienia. Są to te same ustawienia, których można się spodziewać w przypadku WooCommerce. Tutaj możesz wybrać swoje strony. Po utworzeniu układów dla tych stron przejdź do tej strony ustawień i wybierz je. Możesz także ustawić strony na pełną szerokość i wybrać inny szablon produktu dla każdej kategorii.

Moduły Divi BodyCommerce

Do Divi Buildera dodano 53 nowe moduły. Są to wszystkie elementy potrzebne do zaprojektowania każdego aspektu sklepu WooCommerce, w tym stron produktów, stron kont, stron archiwum, koszyka na zakupy itp. Są one oznaczone kolorami, więc nie możesz ich przegapić. Kolory właściwie pokazują, do czego służą moduły. Na przykład czerwone moduły są przeznaczone na strony produktów. Niektórzy używają gradientu, aby pokazać, że działają z dwoma rodzajami stron. Ten obraz przedstawia pierwsze 24 moduły.

Oto kolejne 29 modułów. Moduły dodają elementy strony, takie jak up-sells, cross sells, slidery, powiązane produkty, karuzele, galerie, udostępnianie, zakładki, bułka tarta i wiele innych. Pętle tworzą listy produktów do budowy stron Twojego sklepu. Obejmują one oczekiwane karty i opcje Treść, Projekt i Zaawansowane.

Uwaga — jeśli strona się nie ładuje, upewnij się, że nie używasz na niej modułu, który nie został zaprojektowany do pracy na tej stronie. Niektóre moduły są globalne i działają z dowolną stroną, ale inne są przeznaczone dla określonych typów stron. Na przykład nie można użyć modułu strony produktu na stronie pętli.

Tworzenie i przypisywanie strony

Zobaczmy, jak utworzyć stronę i ustawić ją jako domyślną dla tej kategorii. Najpierw utwórz układ w Bibliotece Divi.

Następnie przejdź do Divi Engine > BodyCommerce w menu pulpitu nawigacyjnego. Wybierz kartę dla typu tworzonej strony, a następnie wybierz układ dla tej strony. Możesz utworzyć dowolną liczbę układów i używać ich dla różnych typów stron i dla poszczególnych kategorii.

Przykłady Divi BodyCommerce

Oto kilka przykładów, które stworzyłem. To tylko mała próbka tego, co można zrobić za pomocą tej wtyczki.

Strona sklepu Divi BodyCommerce

Do strony sklepu dodałem właśnie moduł stron archiwum pętli produktów.

Oto strona z ustawieniami domyślnymi. Każdy z elementów można dostosować za pomocą Divi Builder.

Tutaj znajduje się w układzie Herbaciarni. Są to ustawienia domyślne z wyjątkiem limitu. Ustawiłem go, aby pokazać 6 produktów.

Niektóre elementy można dostosować na żywo.

Dodałem zielone tło do plakietki i przycisków sprzedaży, ustawiłem układ tak, aby wyświetlał 6 kolumn, dodałem cień pudełka do produktów i dodałem zieloną nakładkę. Jestem pod wrażeniem ilości opcji układu.

To jest układ w stylu bloga. Świetnie wyglądałoby, gdybyś miał dłuższe opisy produktów.

Strona produktu Divi BodyCommerce

Stworzyłem układ strony produktu w Bibliotece Divi i wybrałem go jako domyślny układ w ustawieniach BodyCommerce. To tylko podstawowy układ, aby zorientować się, co potrafią moduły.

To proste, ale to dobry początek. Pokazuje tytuł produktu, galerię i suwak.

Wrzuciłem losowo jeszcze kilka stron produktowych i globalnych modułów.

Zaczyna pokazywać rzeczy, które można zrobić za pomocą BodyCommerce. Zróbmy trochę Divi na tej stronie.

Oto kilka prostych zmian w Divi Builder. Wszystko, co zrobiłem, to dodanie tła do sekcji i wiersza oraz dostosowanie obramowań przycisków i pola wyszukiwania.

W tym przypadku dodałem nowy wiersz dla powiązanych produktów i przeniosłem moduł wyszukiwania do tego wiersza. Zmieniłem również wygląd produktu i zmieniłem zdjęcie produktu na galerię. Ustawiłem przewijanie w pionie. Gdyby demo WooCommerce zawierało więcej zdjęć tego produktu, wyświetliłoby się w pionowej kolumnie po lewej stronie. To tylko zarysowanie powierzchni poziomu korekt, które można wykonać za pomocą kart produktów.

Koszyk Divi BodyCommerce

Buduję stronę koszyka zakupów korzystając ze strony kontaktowej w układzie Piekarnia. Używam modułów Cart Products i Cart Totals. Nie wyświetlają swojej zawartości podczas przeglądania w programie Visual Builder, ale nadal można budować w programie Visual Builder. Moduły zapewniają wiele innych funkcji, takich jak cross-selling.

Oto koszyk z ustawieniami domyślnymi. Mam dwa moduły w jednym układzie 2-kolumnowym.

Oto strona koszyka na zakupy po kilku zmianach. Zmieniłem układ na jednokolumnowy, dodałem odstępy z prawej i lewej strony, dodałem kolor tła z układu, zmieniłem kolory przycisków i tekstu, aby pasowały do ​​układu i dodałem cień.

Dokumentacja Divi BodyCommerce

Dokumentacja jest dostarczana w formie pisemnej na stronie internetowej dewelopera oraz wraz z serią filmów na YouTube. Podoba mi się, że zawiera oba. Łącza znajdują się w menu pulpitu nawigacyjnego Divi Engine. Możesz także oglądać filmy, klikając dowolną funkcję w witrynie programisty. Tworzy to ciekawą strukturę, aby znaleźć potrzebne filmy. W ten sposób znalazłem filmy, które chciałem zobaczyć.

Divi BodyCommerce Cena

BodyCommerce ma do wyboru trzy licencje:

  • 1 strona – £24
  • 5 stron – £50
  • Nielimitowane strony – 96 . £

Możesz kupić BodyCommerce ze strony dewelopera.

Końcowe myśli

Divi BodyCommerce zapewnia imponujący poziom kontroli nad projektami produktów i stron WooCommerce. Ledwo dotknąłem tego, co może zrobić. Możesz także dostosować ekran logowania, plakietki, strony kont, strony z podziękowaniami, formularze, strony wyszukiwania i wiele więcej. Zawiera nawet szablony wiadomości e-mail, niestandardowe ikony, próbki i AJAX dla koszyka. Lubię mieć możliwość stworzenia innego układu dla każdej kategorii.

Moduły i układ były łatwe w użyciu. Śledziłem wraz z filmami na stronie programisty, aby stworzyć moje przykłady. Filmy były szczegółowe i łatwe do naśladowania. Nie miałem problemów z utworzeniem dowolnej strony, którą chciałem.

BodyCommerce zapewnia więcej narzędzi i dostosowań niż jakakolwiek wtyczka WooCommerce/Divi, którą widziałem do tej pory. Jeśli używasz WooCommerce z Divi i chcesz dostosować swoje strony WooCommerce, BodyCommerce jest łatwym wyborem.

Chcemy usłyszeć od Ciebie. Czy próbowałeś BodyCommerce dla Divi i WooCommerce? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem Letters-Shmetters / shutterstock.com