Utwórz stronę kategorii produktów WooCommerce za pomocą kreatora motywów Divi

Strony kategorii są ważną częścią każdej witryny eCommerce. Klienci przeglądają kategorie produktów, aby znaleźć to, czego potrzebują. Dlatego strony kategorii muszą wyglądać tak samo dobrze, jak strony produktów. Dzięki kreatorowi motywów Divi tworzenie szablonów stron kategorii jest łatwiejsze niż kiedykolwiek. W tym samouczku pokażemy, jak krok po kroku utworzyć szablon strony kategorii i nadać mu styl za pomocą wbudowanych opcji Divi. Ponadto pokażemy Ci, jak sprawić, by można go było filtrować za pomocą wtyczki Themify WooCommerce Product Filters.

Otwórz dwie karty przeglądarki obok siebie. Użyj pierwszej karty do tworzenia motywów, a drugiej do podglądu na żywo strony kategorii. Pracuj w ten sposób, aby zobaczyć postępy w miarę postępów. Dla Twojej wygody dodaliśmy również szablon do bezpłatnego pobrania.

Weźmy się za to!

Zapowiedź

Zanim zaczniemy odtwarzać szablon, przyjrzyjmy się, jak szablon strony kategorii wygląda na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon strony kategorii Woo ZA DARMO

Aby położyć ręce na darmowym szablonie strony kategorii Woo, 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. Zaktualizuj swoje produkty i kategorie

Zanim zbudujesz szablon, upewnij się, że Twoje produkty są uporządkowane we właściwych kategoriach. Sprawdź, czy są one również prawidłowo otagowane. Będą one ważne podczas konfigurowania wtyczki filtra produktu.

2. Konfiguracja wtyczki

Ściągnij i zainstaluj

Pobierz filtry produktów WooCommerce. Przejdź do pulpitu nawigacyjnego wtyczki i prześlij plik .zip wtyczki, aby ją zainstalować. Alternatywnie wyszukaj wtyczkę w katalogu. Wtyczka doda nową kartę w menu pulpitu nawigacyjnego. Upewnij się, że aktywowałeś również wtyczkę.

Dodaj nowy formularz filtra

Kliknij kartę wtyczki w swoim panelu. W ustawieniach wtyczki kliknij przycisk, aby dodać nowy formularz filtra.

Skonfiguruj formularz filtra

Aby Twój pasek boczny z możliwością filtrowania wyglądał dokładnie tak, jak ten z podglądu tego posta, użyj ustawień wymienionych poniżej. Zawsze możesz zmienić te ustawienia później.

• Układ: pionowy
• Puste pola: Nie pokazuj pola, jeśli jest puste
• Sortowanie produktów: Ukryj sortowanie produktów
• Opcja paginacji: nieskończony przewijanie
• Przycisk resetowania: brak przycisku resetowania
• Logiczny związek między taksonomiami: AND
• Szablon strony wyników: Pokaż wyniki na tej samej stronie

Utwórz pole kategorii

Na pasku menu pod obszarem głównym zobaczysz wybór kart. Przeciągnij i upuść kartę „Kategoria” do kreatora poniżej. Następnie dostosuj ustawienia w następujący sposób:

• Tytuł pola: Kategorie
• Uwzględnij dzieci: tak
• Wyświetl jako: Pole wyboru
• Logika: LUB
• Kolejność: imię, malejąco
• Układ: poziomy, 2 kolumny

Utwórz pole tagu

Teraz przeciągnij i upuść zakładkę „Tag” do kreatora. Upewnij się, że znajduje się pod zakładką „Kategoria”. Dostosuj ustawienia w następujący sposób:

• Tytuł pola: Typ
• Wyświetl jako: Pole wyboru
• Kolejność: imię, malejąco
• Układ: poziomy, 2 kolumny
• Kolorowe ikony
  • Tło: przezroczyste
  • Kolor tekstu: głęboki brąz #44000d

Kliknij Zapisz, aby wygenerować krótki kod

Zapisz swoją pracę i zamknij kreatora. Skrót zobaczysz w głównym menu wtyczki. Skopiuj, będziesz potrzebować później.

3. Odtwórz szablon strony kategorii produktów w Theme Builder

Otwórz Kreatora motywów / Dodaj nowy szablon

Czas zacząć odtwarzać szablon! Otwórz kreatora motywów i dodaj nowy szablon.

Ustaw ustawienia szablonu

W ustawieniach szablonu wybierz „Strony określonej kategorii produktów”. Kliknij kategorie, do których chcesz przypisać ten szablon. Wybierzemy ręcznie robione wyroby skórzane.

Dodaj niestandardową treść

Następnie kliknij „Dodaj niestandardową treść”.

Wybierz opcję Zbuduj niestandardową bryłę

Odtworzymy ten szablon od zera, więc śmiało wybierz „Zbuduj niestandardową bryłę”.

Buduj od podstaw

Po wejściu do wizualnego konstruktora ponownie wybierz opcję budowania od zera.

Sekcja 1 Ustawienia

Tło

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i dodaj kolor tła.

• Kolor tła: Przezroczysty niebiesko-szary – rgba (68,66,109,0,02)

Dodaj wiersz

Struktura kolumny

Teraz dodaj nowy wiersz o następującej strukturze kolumn:

Rozmiary

Dostosuj ustawienia rozmiaru następnego wiersza.

• Szerokość rynny: 1
• Szerokość
  • Komputer stacjonarny: 90%
  • Tablet i telefon: 85%
• Maksymalna szerokość: 1920px

Rozstaw

Następnie zastosuj różne wartości odstępów na różnych rozmiarach ekranu.

• Lewy i prawy margines
  • Pulpit: automatyczny
  • Tablet: 55px
  • Telefon: 30px
• Górna wyściółka: 100px

Dodaj moduł tytułu posta do pierwszej kolumny

Elementy

Czas dodać moduły, zaczynając od modułu tytułu posta w kolumnie 1. Włącz tylko tytuł.

• Pokaż tytuł: Tak

Tło

Następnie dodaj kolor tła.

• Kolor: #e8e8e8

Tekst tytułu

Przejdź do karty projektu i nadaj styl tekstowi tytułu.

• Poziom tytułu: H1
• Czcionka: Josefin Sans
• Waga: pogrubienie
• Styl: TT
• Kolor: #44000d
• Rozmiar
  • Pulpit: 32px
  • Tablet: 28px
  • Telefon: 30px
• Wysokość linii: 1,2 em

Rozstaw

Dostosuj również odstępy.

• Górna wyściółka
  • Komputer stacjonarny i tablet: 100px
• Dolna wyściółka: 80px
• Lewa wyściółka
  • Komputer stacjonarny i tablet: 30 pikseli
• Prawa wyściółka
  • Komputer stacjonarny i tablet: 30 pikseli
  • Telefon: 10px

Granica

Daj modułowi zaokrąglone rogi.

• Zaokrąglone rogi: 15px wszystkie cztery

Cień Pudełka

I dodaj subtelny cień w pudełku.

• Cień pudełka: druga opcja
• Pozycja pozioma: 12px
• Pozycja pionowa: 12px
• Siła rozmycia: 20px
• Siła rozprzestrzeniania: -5px
• Kolor cienia: #dddddd

Dodaj moduł tekstowy do pierwszej kolumny

Zadowolony

Dodaj moduł tekstowy tuż pod poprzednim modułem. W polu treści dodaj skrót skopiowany z wtyczki.

• Treść: Krótki kod wtyczki

Tło

Następnie dodaj kolor tła.

• Kolor: #e8e8e8

Tekst

Stylizuj tekst.

• Czcionka: Josefin Sans
• Kolor: #44000d
• Rozmiar
  • Pulpit: 20px
  • Tablet: 18px
  • Telefon: 16px
• Rozstaw: 1px

Rozstaw

Dostosuj również ustawienia odstępów.

• Górny margines: 50px
• Górna i dolna wyściółka: 40px
• Dopełnienie lewego i prawego: 30px

Granica

Następnie dodaj zaokrąglone rogi.

• Zaokrąglone rogi: 15px wszystkie cztery

Cień Pudełka

I uzupełnij ustawienia modułu, dodając subtelny cień pudełka.

• Cień pudełka: druga opcja
• Pozycja pozioma: 12px
• Pozycja pionowa: 12px
• Siła rozmycia: 20px
• Siła rozprzestrzeniania: -5px
• Kolor cienia: #dddddd

Dodaj moduł sklepu do drugiej kolumny

Zadowolony

Do następnej kolumny! Dodaj moduł sklepu i dostosuj główne ustawienia w następujący sposób:

• Typ widoku produktu: domyślny
• Użyj bieżącej strony: Tak
• Układ kolumn: 3 kolumny

Obraz

Przejdź do karty projektu i odpowiednio dostosuj obraz:

• Zaokrąglone rogi obrazu: 15px wszystkie cztery
• Cień pola obrazu: 2. opcja
  • Pozycja pozioma: 6 pikseli
  • Pozycja pionowa: 6 pikseli
  • Siła rozmycia: 18px
  • Kolor cienia: #dddddd

Tekst tytułu

Następnie nadaj styl tekstowi tytułu.

• Czcionka: Josefin Sans
• Waga: Semi Bold
• Wyrównanie: w prawo
• Kolor: #44000d
• Rozmiar
  • Pulpit: 26px
  • Tablet: 24px
  • Telefon: 17px
• Rozstaw: 2px

Tekst ceny

Nie zapomnij również o stylizacji tekstu ceny.

• Czcionka: Josefin Sans
• Wyrównanie: w prawo
• Kolor: #44000d
• Rozmiar: 15px
• Odstępy między literami: 2px
• Wysokość linii: 46px

Rozstaw

Dostosuj również ustawienia odstępów.

• Górna wyściółka
  • Tablet i telefon: 50px
• Lewa wyściółka
  • Pulpit: 50px
  • Tablet i telefon: 0px

niestandardowe CSS

I na koniec dodaj niestandardowe dwie linie kodu CSS w zakładce Zaawansowane, aby wygenerować trochę przestrzeni między różnymi elementami w module sklepu. Otóż ​​to!

• Obraz: padding-bottom: 20px
• Cena: padding-bottom: 40px

padding-bottom: 20px;

padding-bottom: 40px;

Zapowiedź

Skończyliśmy odtwarzać szablon strony kategorii produktów WooCommerce. Przyjrzyjmy się jeszcze raz ukończonemu projektowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

Ten szablon strony kategorii produktów można zastosować do wszystkich kategorii i tagów w Twoim sklepie WooCommerce. Za pomocą wtyczki filtra produktów możesz dodać ustawienia filtra, które pasują do Twojego sklepu i produktów. Możesz użyć dowolnego z modułów Divi woo, aby spersonalizować swój sklep w dowolny sposób. Mamy nadzieję, że ten szablon pomoże Ci dodać spersonalizowany wygląd do Twoich projektów. Daj nam znać w komentarzach, jeśli masz jakieś pytania lub sugestie!