Przejdź do głównej treści

Stworzenie dynamicznej siatki korzyści dla produktów WooCommerce

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Sposób projektowania strony produktu ma natychmiastowy wpływ na zachowanie odwiedzających. Dobrze wykonany i spersonalizowany projekt strony produktu może ułatwić odwiedzającym podjęcie decyzji, czy chcą kupić Twój produkt. Jeśli szukasz sposobu na uatrakcyjnienie strony produktu, prawdopodobnie spodoba Ci się ten samouczek. 

Pokażemy Ci, jak uwzględnić dynamiczną siatkę korzyści produktu w swoim projekcie za pomocą Divi i wtyczki Advanced Custom Fields. Zaczniemy od utworzenia grupy pól dla świadczeń. Następnie wypełnimy niestandardowe pola na naszej stronie produktu i uwzględnimy dynamiczną zawartość w naszym szablonie strony produktu. 

Możliwy wynik

Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.

Możliwy divi wyniku

1. Zainstaluj wtyczkę ACF i wtyczkę Field Benefit Field Group

Zainstaluj wtyczkę Advanced Custom Fields

Aby wyświetlić różne zalety produktu w zapleczu naszych produktów, będziemy używać bezpłatnej wtyczki Advanced Custom Fields. Uzyskaj dostęp do swojego Backend WordPress> Wtyczki> Dodaj nową> Znajdź wtyczkę ACF> Zainstaluj> Aktywuj .

Zainstaluj zaawansowaną wtyczkę niestandardowego pola

Przejdź do pól niestandardowych i dodaj nową grupę pól

Po zainstalowaniu i aktywacji wtyczki ACF będziesz mógł uzyskać dostęp do swoich pól niestandardowych i dodać nową grupę pól.

Utwórz pola ACF

Ustawienia grupy pól

Nadaj swojej nowej grupie pól tytuł i pozwól jej pojawiać się tylko na stronach produktów.

  • „Typ wiadomości” oznacza „Produkt”
Dodaj zasady

Dodaj pierwsze pole

Kontynuuj, dodając nowe pole tytułu pierwszej korzyści produktu.

  • Etykieta pola: tytuł świadczenia 1
  • Typ pola: tekst
Dodaj pole ac
Personalizacja pola Divi

Powtórz ten krok dla pozostałych pól

Zrób to samo z innymi zaletami produktu i ich opisami. Wszystkie te pola wymagają przypisania typu pola „Tekst”.

  • Tytuł usługi 1
  • Opis korzyści 1
  • Tytuł usługi 2
  • Opis korzyści 2
  • Tytuł usługi 3
  • Opis korzyści 3
  • Tytuł usługi 4
  • Opis korzyści 4
Skonfiguruj pola ACF

2. Dodaj korzyści do produktów

Otwórz lub dodaj nowy produkt

Po utworzeniu grupy pól i pól możesz dodać korzyści produktowe do swoich produktów na poziomie indywidualnym. Otwórz wybrany produkt lub utwórz nowy.

Tworzenie produktów Divi

Wypełnij pola Korzyści produktu

I spełnij zalety produktu.

Wypełnij pola zalet divi

3. Utwórz szablon strony produktu w Divi Theme Builder

Idź do Divi Theme Builder i dodaj nowy szablon

Czas zacząć od Divi! Aby utworzyć nowy szablon, przejdź do Divi Theme Builder i kliknij „Dodaj nowy szablon”.

Kreator motywów Divi

Użyj szablonu dla wszystkich produktów

Używamy tego szablonu do wszystkich produktów, ale zamiast tego możesz wybrać produkty z określoną kategorią lub etykietą.

Dodaj wszystkie produkty woocommerce

Wejdź do edytora szablonów brył modelu

Następnie wprowadź treść modelu, klikając „Dodaj niestandardową treść” i wybierając „Utwórz niestandardową treść”.

Budowanie ciała divi

Edytuj sekcję # 1

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zmień kolor tła na czarny.

  • Kolor tła: # 000000
Konfiguracja tła sekcji Divi

rozstaw

Przejdź do karty projektu sekcji i dodaj niestandardowe wypełnienie u góry i u dołu.

  • Najlepsze wypełnienie: 10px
  • Wyściółka u dołu: 10 pikseli
Konfiguracja rozstawu sekcji Divi

Dodaj nową linię

Struktura kolumny

Kontynuujmy dodając nowy wiersz do sekcji o następującej strukturze:

Konfiguracja układu modułu linii

rozstaw

Bez dodawania żadnych modów, otwórzmy ustawienia wierszy i dokonaj pewnych korekt odstępów.

  • Użyj spersonalizowanej rynny: Tak
  • Szerokość rynny: 1
  • Szerokość: 90%
  • Maksymalna szerokość: 100%
Ustawienia odstępów między modułami liniowymi

rozstaw

Usuń wszystkie górne i dolne wewnętrzne odstępy.

  • Wysoki margines wewnętrzny: 0px
  • Niski margines wewnętrzny: 0px
Ustawienia odstępów między modułami Divi Line

Dodaj moduł Woo Cart Notice do kolumny

Treść dynamiczna

Jedynym modułem, którego potrzebujemy w tej linii i sekcji, jest moduł Woo Cart Notice. Upewnij się, że w sekcji dynamicznej jest wybrana opcja „Ten produkt”.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • Produkt: ten produkt
Ustawienia woo moduł powiadomień koszyka divi

Kolor tła

Następnie otwórz ustawienia modułu i użyj przezroczystego tła.

  • Kolor tła: rgba (0,0,0,0)
Ustawienia divi modułu Woo cart

Ustawienia tekstu

Przejdź do zakładki „Projekt” i zmień czcionkę tekstu.

  • Czcionka tekstu: Karla
Ustawienia czcionek modułu Divi

Ustawienie przycisku

Zakończ ustawienia wtyczki, określając ustawienia stylu:

  • Użyj niestandardowych stylów przycisku: Tak
  • Rozmiar tekstu przycisku: 20px
  • Kolor tekstu przycisku: # 000000
  • Tło przycisku: # ffd623
  • Szerokość obramowania przycisku: 0px
  • Przycisk z zaokrągloną ramką: 0px
Ustawienia kolorów modułu powiadomień koszyka Woo
  • Czcionka przycisku: Oswald
  • Styl czcionki przycisku: Shift
Dostosowanie projektu koloru modułu ogłoszeń wózka Woo
  • Wysoki margines wewnętrzny: 20px
  • Niski margines wewnętrzny: 20px
  • Lewy margines wewnętrzny: 50 pikseli
  • Wewnętrzny prawy margines: 50 pikseli
Konfiguracja modułu projektowania woo koszyka uwaga

Dodaj sekcję # 2

Tło gradientowe

Dodaj kolejną zwykłą sekcję poniżej poprzedniej. Następnie otwórz ustawienia i użyj gradientowego tła w następujący sposób:

  • Kolor 1: # 000000
  • Kolor 2: #ffffff
  • Pozycja startowa:
    • Pulpit: 30%
    • Tabletka: 57%
    • Telefon: 54%
  • Pozycja końcowa:
    • Pulpit: 30%
    • Tabletka: 57%
    • Telefon: 54%
Tylna regulacja modułu Divi Line

rozstaw

Przejdźmy do zakładki Projekt i dodajmy wysoki wewnętrzny margines.

  • Najlepsze wypełnienie: 150px
Konfiguracja odstępów między modułami Divi Line

Dodaj nową linię

Struktura kolumny

Kontynuuj, dodając nową linię o takiej samej strukturze, jak pokazano poniżej:

Konfiguracja stylu Divi Line

zaklejania

Nie dodając jeszcze żadnych modów, otworzymy ustawienia i zmienimy odstępy w następujący sposób:

  • Użyj niestandardowych rynien: Tak
  • Miejsce na rynnę: 1
  • Szerokość: 95%
  • Maksymalna szerokość: 2560 pikseli
  • Wyrównanie linii: środkowy
Moduł divi konfiguracji rynny

Rozstaw

Usuniemy również górny margines wewnętrzny.

  • Najlepsze wypełnienie: 0px
Konfiguracja odstępów między modułami Divi

Główny element

Aby wyśrodkować zawartość kolumny na pulpicie, użyjemy dwóch wierszy kodu CSS w głównym elemencie modułu row.

Desktop:

wyświetlacz: flex; wyrównaj elementy: środek;

Tablet i telefon:

display: block;
Ustawienia stylu modułu Divi Line

Dodaj moduł Woo Image do kolumny 1

Treść dynamiczna

Czas dodać moduły, zaczniemy od modułu Woo Images w kolumnie 1. Upewnij się, że wybrano „Ten produkt”.

  • Produkt: ten produkt
Ustawienia modułu obrazu produktu Woocommerce

Efekt animacji przewijania w pionie

Dodajemy subtelny ruch do obrazu za pomocą efektu przewijania ruchu w poziomie w zakładce Zaawansowane.

  • Aktywuj ruch pionowy: Tak
  • Rozpocznij przesunięcie:
    • Biuro: -4
    • Tablet i telefon: 0
  • Średnie przesunięcie: 0
  • Przesunięcie końcowe: 0
  • Efekt ruchu wyzwalania: środek elementu
Regulacja modułu obrazu Divi

Dodaj moduł tytułu Woo do kolumny 2

Dynamiczna treść

W kolumnie 2 pierwszy potrzebny nam mod to modyfikacja tytułu Woo. Upewnij się, że w obszarze zawartości dynamicznej jest wybrana opcja „Ten produkt”.

  • Produkt: ten produkt
siatka korzyści produktu

Ustawienia tekstu tytułowego

Następnie przejdź do karty projektowania i stylizuj tekst tytułu w następujący sposób:

  • Czcionka tytułu: Oswald
  • Styl czcionki tytułu: wielkie litery
  • Kolor tekstu tytułu: # ffd623
  • Rozmiar tekstu tytułu: 80 pikseli
Dostosowanie projektu modułu tytułu Divi

rozstaw

Ukończ moduł Woo title, dodając lewy i prawy margines.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • Lewy margines: 5%
  • Prawy margines: 5%
Ustawienie modułu tytułu Divi

Dodaj moduł opisu Woo do kolumny 2

Dynamiczna treść

Przejdźmy do następnego modułu, który jest modułem opisu Woo. Używamy do tego następujących dynamicznych treści:

  • Produkt: ten produkt
  • Typ opisu: Krótki opis
Ustawienia modułu opisu produktu

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:

  • Czcionka tekstu: Karla
  • Kolor tekstu: #dbdbdb
  • Rozmiar tekstu: 17 pikseli (komputer stacjonarny i tablet), 15 pikseli (telefon)
  • Wysokość linii tekstu: 1,9 em
Opis modułu regulacji kolorów divi

zaklejania

Następnie zmień szerokość na różnych rozmiarach ekranu.

  • Szerokość: 59% (komputer stacjonarny), 82% (tablet i telefon)
Regulacja szerokości modułu podsumowania Divi

rozstaw

Uzupełnij moduł opisu Woo, dodając niestandardowe wartości marginesów w ustawieniach odstępów.

  • Górny margines: 50px
  • Dolny margines: 100px
  • Lewy margines: 5%
  • Prawy margines: 5%
Moduł opisu produktu Divi

Dodaj moduł Blurb do kolumny 2

Dynamiczna treść

Aby wyświetlić zalety produktu, które dodaliśmy w pierwszej części tego samouczka, użyjemy modułów Blurb. Dodaj pierwszy moduł Blurb i użyj dynamicznej zawartości pierwszej korzyści wygenerowanej dla tytułu i ciała.

  • Tytuł: Tytuł świadczenia 1
  • Ciało: opis korzyści 1
Ustawienie tekstu modułu podsumowania Divi

Załaduj obrazek

Prześlij zdjęcie lub użyj ikony wybranego następnie. Te, których używaliśmy w tym samouczku, możesz znaleźć w folderze pobierania, który mogłeś pobrać na początku tego samouczka.

Konfiguracja divi podsumowania modułu obrazu

Ustawienia obrazu / ikony

Przejdź do karty projektu modułu i zmień ustawienia obrazu / ikony w następujący sposób:

  • Umieszczenie obrazu / ikony: Góra
  • Wyrównanie obrazu / ikony: w lewo
Moduł regulacji Divi

Ustawienia tekstu tytułu

Następnie modyfikujemy ustawienia tekstu tytułowego.

  • Czcionka tytułu: Oswald
  • Styl czcionki tytułu: wielkie litery
  • Rozmiar tekstu tytułu: 25px
Skonfiguruj czcionkę modułu podsumowania Divi

Ustawienia tekstu podstawowego

Wraz z ustawieniami tekstu podstawowego.

  • Czcionka ciała: Karla
  • Rozmiar tekstu: 17 pikseli (komputer stacjonarny i tablet), 15 pikseli (telefon)
  • Wysokość linii ciała: 1,9 em
Skonfiguruj podsumowanie modułu tekstowego div i

zaklejania

Następnie przejdź do ustawień rozmiaru i zmień szerokości. Ważne jest, aby szerokość główna była mniejsza niż 50%, co pozwoli nam pokazać dwa moduły Blurb obok siebie w następnych krokach.

  • Szerokość obrazu: 25%
  • Szerokość: 49%
Skonfiguruj rozmiar modułu podsumowania Divi

rozstaw

Dodamy również spacje wokół modułu Blurb, używając niestandardowych wartości wypełnienia na różnych rozmiarach ekranu.

  • Górna wyściółka: 8%
  • Dolna wyściółka: 8%
  • Lewa wyściółka: 8% (komputer stacjonarny i tablet), 2% (telefon)
  • Prawa dopełnienie: 8% (komputer stacjonarny i tablet) 2% (telefon)
Skonfiguruj odstępy między modułami podsumowania Divi

Główny element

Teraz upewnimy się, że moduł Podsumowanie wyświetla tekst obok siebie, w dwóch krokach. Najpierw upewnimy się, że szerokość modułu jest mniejsza niż 50% (tak jak zrobiliśmy w poprzednim kroku). Następnie użyjemy właściwości w wierszu. Dodamy tę właściwość CSS do głównego elementu w sekcji zaawansowanej.

display: inline-block;
Dodaj moduł divi kodu CSS

Sklonuj moduł podsumowania 3 razy

Po ukończeniu pierwszego modu Blurb możesz go sklonować trzy razy. Automatycznie zauważysz, że moduły Blurb pojawiają się w siatce.

Nazwa produktu sekcja divi

Edytuj obrazy modułu Blurb

Edytuj obraz w każdym zduplikowanym bloku Blurb. Znajdziesz je w folderze pobierania, który być może został pobrany na początku tego artykułu.

Obraz modułu podsumowania Divi

Zmodyfikuj zawartość dynamiczną modułu Blurb

Zmodyfikuj także zawartość dynamiczną każdego duplikatu modułu Blurb.

  • Tytuł: tytuł usługi (2,3 lub 4)
  • Treść: opis zalet (2,3 lub 4)
Zasady modułu podsumowania Divi

Dodaj ramki do modułów Blurb indywidualnie

Ustawienia obramowania modułu 1

Teraz, aby zakończyć projektowanie naszej siatki, dodamy obramowania do modułów Blurb na poziomie indywidualnym. Otwórz pierwszy mod Blurb i użyj prostej ramki.

  • Szerokość prawej ramki: 1px
  • Kolor prawej ramki: # ffd623
Moduł podsumowania divi konfiguracji z zaokrąglonymi krawędziami

Dodaj także dolną ramkę do pierwszego modułu Blurb.

  • Szerokość dolnej krawędzi: 1px
  • Kolor dolnej ramki: # 000000
Skonfiguruj dolny margines divi
Ustawienia obramowania modułu 2

Następnie otwórz drugi moduł Blurb i użyj dolnej ramki.

  • Szerokość dolnej krawędzi: 1px
  • Kolor dolnej ramki: # 000000
Podsumowanie modułu granicy konfiguracji divi
Ustawienia obramowania modułu 3

Uzupełnij projekt siatki, dodając prostą ramkę do trzeciego modułu Blurb.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Szerokość prawej ramki: 1px
  • Kolor prawej ramki: # ffd623
siatka korzyści produktu

Dodaj Woo Dodaj do koszyka Moduł w kolumnie 2

Dynamiczna treść

Ostatnim modułem, którego potrzebujemy w naszym projekcie, jest moduł Woo Add to Cart. Upewnij się, że w obszarze zawartości dynamicznej jest wybrana opcja „Ten produkt”.

  • Produkt: ten produkt
Dodaj do ustawień modułu divi karty

Ustawienia pola

Przejdź do następnej zakładki projektu i zmień ustawienia pola.

  • Kolor tła pól: #ffffff
  • Kolor tekstu pola: # 000000
Skonfiguruj styl koloru dodaj do koszyka moduł divi
  • Zaokrąglone pola: 0px (wszystkie rogi)
  • Szerokość dolnej granicy pól: 1px
  • Kolor dolnej granicy pól: # 000000
Skonfiguruj odstępy między sekcjami divi

Ustawienia przycisków

Następnie odpowiednio stylizuj przycisk:

  • Użyj niestandardowych stylów przycisku: Tak
  • Rozmiar tekstu przycisku: 20 pikseli
  • Kolor tekstu przycisku: # 000000
  • Kolor tła przycisku: # ffd623
  • Szerokość obramowania przycisku: 0px
  • Promień obramowania przycisku: 0px
Skonfiguruj projekt przycisku Divi
  • Czcionka przycisku: Oswald
  • Styl czcionki przycisku: wielkie litery
Skonfiguruj przycisk Divi
  • Górna wyściółka: 20px
  • Dolne wypełnienie: 20px
  • Lewe dopełnienie: 50px
  • Prawa wyściółka: 50 pikseli
Skonfiguruj rozmiar modułu Divi

rozstaw

I uzupełnij parametry modułu, dodając niestandardowe wartości marginesów.

  • Górny margines: 100px
  • Lewy margines: 5%
Skonfiguruj odstępy divi

3. Zapisz zmiany w generatorze motywów i wyświetl podgląd wyniku

Po zakończeniu projektowania szablonu strony produktu możesz zapisać wszystkie zmiany Konstruktora motywów i wyświetlić wyniki na swoich produktach!

Zapisz projekt divi
Zapisz modyfikacje Divi

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Wynik demonstracyjny

końcowe przemyślenia

W tym artykule pokazaliśmy, jak wykazać się kreatywnością za pomocą następnego szablonu strony produktu Divi. W szczególności pokazaliśmy, jak dołączyć dynamiczną siatkę korzyści produktu, aby dodać dodatkowe korzyści do strony produktu. Stworzyliśmy ten samouczek przy użyciu Divi w połączeniu z wtyczką Advanced Custom Fields. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer