Divi został zaprojektowany tak, aby był kompatybilny z WooCommerce . Integrować WooCommerce , musisz zainstalować najnowszą wersję WooCommerce .
WooCommerce to wtyczka e-commerce które zalecamy, ponieważ ma najładniejszy zestaw funkcji, interfejs i przestrzega najlepszych praktyk kodowania. Po aktywacji wtyczki zobaczysz dwie nowe sekcje „WooCommerce” i „Produkty” dodane do pulpitu WordPress. Możesz użyć tych obszarów, aby dostosować ustawienia e-commerce i publikować nowe produkty. Możesz znaleźć dokumentacja kompletny na WooCommerce tutaj .
Pamiętaj, że chociaż kreator zawiera różne moduły WooCommerce, możesz również używać samego WooCommerce bez kreatora. Możesz tworzyć standardowe strony do kasy, koszyka itp., Jak pokazano w ich dokumentacji. Możesz również połączyć się bezpośrednio ze swoimi kategoriami woocommerce lub użyć Shortcodes WooCommerce w module tekstowym Divi. Daje ci swobodę robienia wszystkiego.
Jak dodać moduł sklepu do swojej strony
Zanim będziesz mógł dodać moduł sklepu do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.
Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony. Mamy świetne samouczki na temat korzystania z elementów linii i sekcji Divi.
Znajdź moduł sklepu na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że możesz również wpisać słowo „sklep”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł sklepu! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .
Przykład zastosowania: prezentacja najnowszych produktów na stronie głównej za pomocą modułu Sklep
W tym przykładzie użyję modułu sklepu, aby wyświetlić najnowsze produkty na stronie głównej.
Oto strona z czterema przedstawionymi produktami.
Zacznijmy.
Użyj kreatora wizualnego, aby dodać zwykłą sekcję z wierszem o pełnej szerokości (1 kolumna). Zmień parametr wiersza, aby uzyskać pełną szerokość z niestandardową szerokością rynny 2.
Następnie dodaj moduł sklepu do linii.
Zaktualizuj ustawienia modułu w następujący sposób:
Opcje zawartości
Typ: Najnowsze produkty
Liczba produktów: 4
Opcje projektowania
Ikona Hover Kolor: # ea1d63
Tytuł Police: Open Without
Rozmiar czcionki tytułu: 24px
Nagroda policji: otwarta bez
Cena Rozmiar czcionki: 20px
Opcje zaawansowane (niestandardowy CSS)
Miano:
text-align: center;
tło: #fff;
margin-top: -10px! znacząca;
Prix:
text-align: center;
tło: #fff;
tapicerowanie-dół: 15px;
To wszystko! Oto wynik końcowy.
Kupuj opcje treści
W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.
Rodzaj Nieruchomości
Wybierz rodzaj produktów, które chcesz wyświetlać w swoim kanale produktów. Możesz wybrać ostatnie produkty, które będą wyświetlać wszystkie Twoje produkty w porządku chronologicznym, produkty polecane, produkty wyprzedaży, produkty najlepiej sprzedające się lub produkty najwyżej oceniane.
Liczba produktów
Określ liczbę produktów, które chcesz wyświetlić. Będziesz potrzebować produktów stworzonych, aby cokolwiek pojawiło się w tym module.
Uwzględnij kategorie
Wybierz kategorie, które chcesz uwzględnić.
Liczba kolumn
Wybierz liczbę kolumn do wyświetlenia w module sklepu. W rzędzie składającym się z jednej kolumny należy użyć 4 kolumn. W przypadku kolumny zajmującej 1/3 przestrzeni wierszowej należy użyć 3 kolumn. Kolumna 4 powinna być używana w przypadku kolumny, która zajmuje 2/1 miejsca na światło. Jedna kolumna powinna być używana na kolumnę 2/1 przestrzeni wierszowej.
Zmień układ według
Wybierz sposób, w jaki chcesz zamawiać produkty. Wybierz domyślne sortowanie Sortuj, Popularność, Ocena, Data, Cena od najniższej do najwyższej, Cena od najwyższej do najniższej, od najstarszej do najnowszej, od najnowszej do najstarszej.
Etykieta administratora
Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.
Opcje projektowania warsztatu
Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany czegokolwiek.
Ikona nakładki
Gdy najedziesz kursorem na przedmiot w module Sklep, pojawi się ikona nakładki. Możesz dostosować kolor używany dla tej ikony za pomocą próbnika kolorów w tym ustawieniu.
Kolor nakładki
Gdy najedziesz kursorem myszy na przedmiot w module Sklep, kolor nakładki pojawi się u góry obrazu oraz pod tekstem i ikoną tytułu sklepu. Domyślnie używany jest półprzezroczysty biały kolor. Jeśli chcesz użyć innego koloru, możesz dostosować kolor za pomocą próbnika kolorów w tym ustawieniu
Ikona wyboru
Tutaj możesz wybrać niestandardową ikonę, która będzie wyświetlana, gdy gość najedzie kursorem na pozycje sklepu w module.
Kolor odznaki sprzedaży
Gdy przedmiot jest w promocji, na zdjęciu produktu pojawia się znaczek wyprzedaży. Dzięki temu ustawieniu możesz dostosować kolor tła plakietki.
Czcionka tytułu
Możesz zmienić czcionkę tekstu tytułu, wybierając żądaną czcionkę z menu rozwijanego. Divi oferuje dziesiątki wspaniałych czcionek oferowanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.
Rozmiar czcionki tytułu
Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Kolor tekstu tytułu
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu w tytule, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy liter tytułu
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułu, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Wysokość linii tytułowej
Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu tytułu.Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Polityka cenowa
Możesz zmienić czcionkę tekstu ceny, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.
Cena Rozmiar czcionki
Tutaj możesz dostosować rozmiar tekstu ceny. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Kolor tekstu ceny
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu ceny, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Rozstawianie listów cenowych
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście ceny, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Wysokość linii cenowej
Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu ceny Jeśli chcesz zwiększyć odstęp między każdym wierszem, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Zaawansowane opcje sklepu
Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.
Identyfikator CSS
Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.
Klasa CSS
Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie Divi Builder.
Niestandardowy CSS
Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.
widoczność
Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.
[vc_row center_row = "tak"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] POBIERZ TEMAT DIVI [/ vcex_button] [/ vc_column] »vc_column] =» vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expand" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] POBIERZ SZABLONY DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Inne samouczki Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Drogi Bairu,
Dziękujemy za Twój wkład.
Mam pytanie dotyczące modułu sklepu i byłbym bardzo szczęśliwy, gdybyś mógł mi na nie odpowiedzieć.
Chciałbym, aby w module mojego sklepu widoczne były indywidualnie wybrane produkty. Pomyślałem, że można to osiągnąć, przyjmując „produkty gwiezdne”. Ale po wybraniu tej opcji nie mogę znaleźć żadnego sposobu, aby wybrać żądane produkty do modułu. Czy coś mi brakuje? Czy masz wyjaśnienie?
Z poważaniem, Frederik