Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu sklepu

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. [Zalecana]

Divi został zaprojektowany tak, aby był kompatybilny z WooCommerce. Aby zintegrować WooCommerce, musisz zainstalować najnowszą wersję WooCommerce.

WooCommerce to wtyczka e-commerce, którą polecamy, ponieważ ma najlepszy 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 pól, aby dostosować ustawienia e-commerce i opublikować nowe produkty. Możesz znaleźć dokumentacja Kompletny na WooCommerce tutaj .

Należy pamiętać, że nawet jeśli woocommerce budowniczy obejmuje różne moduły, można również użyć woocommerce sama bez producenta dobrze. Możesz tworzyć standardowe strony dla Checkout, koszyka na zakupy itp., Jak pokazano w ich dokumentacji. Możesz także połączyć się bezpośrednio ze swoimi kategoriami Woocommerce lub skorzystać z Shortcodes WooCommerce w module tekstowym Divi. Daje to swobodę robienia niemal wszystkiego.

Jak dodać moduł sklepu do swojej strony

Zanim dodasz moduł sklepu do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi w witrynie zauważysz przycisk Użyj Divi Builder nad wydawcą 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 również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją witrynę na pierwszym planie, jeśli jesteś podłączony do pulpitu WordPress.

divi budowniczy

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 wewnątrz linii. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać do niej linii. Mamy świetne samouczki na temat korzystania z elementów linii i przekrojów Divi.

moduł sklepu divi.png

Zlokalizuj moduł sklepu na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest przeszukiwalna, co oznacza, że ​​możesz również wpisać słowo "sklep", a następnie nacisnąć enter, aby wyszukać i automatycznie 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 użycia przypadku: Przedstaw najnowsze produkty na stronie głównej za pomocą modułu Sklep

W tym przykładzie użyję modułu sklepu do wyświetlenia najnowszych produktów na stronie głównej.

Oto strona z prezentowanymi czterema produktami.

wyświetlaj produkty na stronie accel divi.jpg

Zacznijmy.

Użyj wizualnego budowniczego, aby dodać zwykłą sekcję z linią o pełnej szerokości (kolumna 1). Zmodyfikuj parametr linii, aby uzyskać pełną szerokość z niestandardową szerokością marginesu 2.

strefa opcja divi.png

Następnie dodaj moduł sklepu do linii.

wstaw moduł butiku divi.png

Zaktualizuj ustawienia modułu w następujący sposób:

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

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: Otwarte 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 ostateczny wynik.

sekcja produktu divi.jpg

Kupuj opcje treści

Na karcie treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze znajdzie się na tej karcie.

Rodzaj

Wybierz rodzaj produktów, które chcesz wyświetlać w kanale produktów. Możesz wybierać spośród najnowszych produktów, które wyświetlają wszystkie twoje produkty w porządku chronologicznym, polecanych produktów, produktów sprzedaży, najlepiej sprzedających się produktów lub najlepiej ocenianych produktów.

Liczba produktów

Określ liczbę produktów, które chcesz wyświetlić. Będziesz potrzebował produktów wyprodukowanych tak, aby wszystko pojawiło się w tym module.

Dołącz kategorie

Wybierz kategorie, które chcesz uwzględnić.

Liczba kolumn

Wybierz liczbę kolumn do wyświetlenia w module sklepu. Kolumny 4 powinny być używane dla wiersza kolumn 1. Kolumny 3 powinny być używane dla kolumny, która zajmuje przestrzeń 3 / 4 w wierszu. Kolumny 2 należy używać w przypadku kolumny zajmującej lekką przestrzeń 1 / 2. Kolumna powinna być użyta dla kolumny przestrzeni 1 / 4 linii.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Zmień układ według

Wybierz, w jaki sposób chcesz zamówić swoje produkty. Wybierz aby posortować według rankingu, popularność, Ocena, Data, Cena rosnąco, malejąco Cena, najstarszego do najnowszego, od najnowszych do najstarszych.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu ułatwienia identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułów interfejsu Divi Builder.

Opcje projektowania warsztatu

Na karcie Projektowanie znajdują się wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest karta, której użyjesz, aby zmienić wygląd swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

ustawienie sklepu divi.png

Ikona nakładki

Po najechaniu kursorem na element w module sklepu pojawia się ikona nakładki. Możesz dostosować kolor użyty dla tej ikony, korzystając z próbnika kolorów w tym ustawieniu.

Kolor nakładki

Po najechaniu kursorem na element w module sklepu, kolor nakładki pojawia się u góry obrazu i pod tekstem oraz 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

W tym miejscu możesz wybrać niestandardową ikonę, która będzie wyświetlana, gdy użytkownik unosi się nad przedmiotami w sklepie.

Kolor odznaki sprzedaży

Gdy produkt jest w sprzedaży, na obrazie produktu pojawia się znaczek sprzedaży. Dzięki temu ustawieniu możesz dostosować kolor używany na tle znaczka.

Czcionka tytułu

Możesz zmienić czcionkę tekstu tytułu, wybierając żądaną czcionkę z rozwijanego menu. 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 za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki tytułu

Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu tytułu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu tytułu, wybierz odpowiedni kolor z próbnika kolorów za pomocą tej opcji.

Odstępy liter tytułu

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułowym, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość linii wpływa na przestrzeń między każdą linią tekstu tytułu Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Polityka cenowa

Możesz zmienić czcionkę tekstu ceny, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki ceny

Tutaj możesz dostosować rozmiar tekstu ceny. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu ceny

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. 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 liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście cenowym, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii cenowej

Wysokość linii wpływa na przestrzeń między wierszami tekstu ceny Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zakresu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Zaawansowane opcje sklepu

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą okazać się przydatni, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

opcja zaawansowana boutique divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w Twoim dziecięcym motywie Divi lub niestandardowym arkuszu stylów CSS dodawanym do strony lub witryny internetowej przy użyciu opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Pozycje CSS w tych parametrach są już zapakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

Inne samouczki Divi

Ten artykuł zawiera 1 komentarz
  1. 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 odpowiedzieć.
    Chciałbym, aby w moim module sklepu widoczne były indywidualnie wybrane produkty. Myślałem, że można to osiągnąć poprzez przyjęcie „produktów gwiezdnych”. Ale po wybraniu tej opcji nie mogę znaleźć żadnego sposobu na wybranie pożądanych produktów do modułu. Przegapiłem coś? Czy masz wyjaśnienie?

    Z poważaniem, Frederik

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
11 akcji
udział4
ćwierkanie2
Enregistrer5