Tworzenie dynamicznej siatki korzyści produktu dla szablonu strony produktu za pomocą Divi i ACF

Sposób, w jaki projektujesz stronę produktu, ma natychmiastowy wpływ na zachowanie odwiedzających. Dobrze zaprojektowany i dostosowany 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, pokochasz ten post. Pokażemy Ci, jak uwzględnić dynamiczną siatkę korzyści produktu w swoim projekcie za pomocą Divi i wtyczki Zaawansowane pola niestandardowe. Zaczniemy od utworzenia grupy pól dla korzyści. Następnie wypełnimy pola niestandardowe na naszej stronie produktu i umieścimy dynamiczną zawartość w naszym szablonie strony produktu. Będziesz mógł również bezpłatnie pobrać szablon strony produktu!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon strony produktu ZA DARMO

Aby położyć swoje ręce na darmowym szablonie strony produktu, 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. Zainstaluj wtyczkę ACF i dodaj grupę pól korzyści produktu

Zainstaluj wtyczkę Advanced Custom Fields

Aby wyświetlić różne zalety produktu w ramach zaplecza naszych produktów, użyjemy bezpłatnej wtyczki Advanced Custom Fields. Przejdź do swojego zaplecza WordPress > Wtyczki > Dodaj nowy > Wyszukaj wtyczkę ACF > Zainstaluj > Aktywuj .

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

Po zainstalowaniu i aktywowaniu wtyczki ACF będziesz mógł przejść do pól niestandardowych i dodać nową grupę pól.

Ustawienia grupy pól

Nadaj swojej nowej grupie pól tytuł i pozwól, aby wyświetlała się tylko na stronach produktów.

• „Typ posta” to „Produkt”

Dodaj pierwsze pole

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

• Etykieta pola: Tytuł świadczenia 1
• Typ pola: Tekst

Powtórz krok dla pozostałych pól

Zrób to samo dla pozostałych zalet produktu i ich opisów. Wszystkie te pola wymagają przypisanego typu pola „Tekst”.

• Zasiłek Tytuł 1
• Opis korzyści 1
• Zasiłek Tytuł 2
• Opis korzyści 2
• Zasiłek Tytuł 3
• Opis korzyści 3
• Zasiłek Tytuł 4
• Opis korzyści 4

2. Dodaj zalety produktu do produktów

Otwórz lub dodaj nowy produkt

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

Wypełnij pola korzyści produktu

I wypełnij zalety produktu.

3. Zbuduj szablon strony produktu wewnątrz Divi Theme Builder

Przejdź do kreatora motywów Divi i dodaj nowy szablon

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

Użyj szablonu we wszystkich produktach

Używamy tego szablonu we wszystkich produktach, ale zamiast tego możesz wybrać produkty z określoną kategorią lub tagiem.

Wejdź do edytora szablonów treści szablonu

Następnie wprowadź treść szablonu, klikając „Dodaj treść niestandardową” i wybierając „Buduj treść niestandardową”.

Zmodyfikuj 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

Rozstaw

Przejdź do zakładki projektu sekcji i dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wierszy i wprowadź zmiany w ustawieniach rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 90%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł powiadomień o koszyku Woo do kolumny

Treści dynamiczne

Jedynym modułem, którego potrzebujemy w tym wierszu i sekcji, jest moduł powiadomień o koszyku Woo. Upewnij się, że w obszarze zawartości dynamicznej wybrano opcję „Ten produkt”.

• Produkt: ten produkt

Kolor tła

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

• Kolor tła: rgba(0,0,0,0)

Ustawienia tekstu

Przejdź do zakładki projektu i zmień czcionkę tekstu w ustawieniach tekstu.

• Czcionka tekstu: Karla

Ustawienia przycisków

Uzupełnij ustawienia modułu, odpowiednio stylizując przycisk:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #ffd623
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Oswald
• Styl czcionki przycisku: wielkie litery

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj sekcję #2

Tło gradientowe

Dodaj kolejną zwykłą sekcję tuż pod poprzednią, otwórz ustawienia sekcji i użyj responsywnego tła gradientowego.

• Kolor 1: #000000
• Kolor 2: #ffffff
• Pozycji startowej:
  • Komputer stacjonarny: 30%
  • Tablet: 57%
  • Telefon: 54%
• Pozycja końcowa:
  • Pulpit: 30%
  • Tablet: 57%
  • Telefon: 54%

Rozstaw

Przejdź do zakładki projektu sekcji i dodaj górną wyściółkę.

• Górna wyściółka: 150px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 95%
• Maksymalna szerokość: 2560 pikseli
• Wyrównanie wierszy: Środek

Rozstaw

Usuwamy również domyślną górną wyściółkę wiersza.

• Górna wyściółka: 0px

Główny element

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

Pulpit:

display: flex;
align-items: center;

Tablet i telefon:

display: block;

Dodaj moduł obrazów Woo do kolumny 1

Treści dynamiczne

Czas dodać moduły, zaczynając od modułu Woo Images w kolumnie 1. Upewnij się, że w obszarze zawartości dynamicznej zaznaczono opcję „Ten produkt”.

• Produkt: ten produkt

Efekt przewijania ruchu w pionie

Dodajemy do obrazu subtelny ruch za pomocą efektu przewijania ruchu w poziomie na karcie Zaawansowane.

• Włącz ruch w pionie: Tak
• Odsunięcie początkowe:
  • Pulpit: -4
  • Tablet i telefon: 0
• Przesunięcie środkowe: 0
• Przesunięcie końcowe: 0
• Wyzwalacz efektu ruchu: środek elementu

Dodaj moduł tytułu Woo do kolumny 2

Treści dynamiczne

W kolumnie 2 pierwszym potrzebnym modułem jest moduł tytułowy Woo. Upewnij się, że w obszarze zawartości dynamicznej wybrano opcję „Ten produkt”.

• Produkt: ten produkt

Ustawienia tekstu tytułu

Następnie przejdź do zakładki projektu 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: 80px

Rozstaw

Uzupełnij moduł tytułu Woo, dodając trochę lewego i prawego marginesu.

• Lewy margines: 5%
• Prawy margines: 5%

Dodaj moduł opisu Woo do kolumny 2

Treści dynamiczne

Przejdźmy do następnego modułu, którym jest moduł opisu Woo. Używamy do tego następującej zawartości dynamicznej:

• Produkt: ten produkt
• Typ opisu: krótki opis

Ustawienia tekstu

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

• Czcionka tekstu: Karla
• Kolor tekstu: #dbdbdb
• Rozmiar tekstu: 17px (komputer i tablet), 15px (telefon)
• Wysokość linii tekstu: 1,9 em

Rozmiary

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

• Szerokość: 59% (komputer stacjonarny), 82% (tablet i telefon)

Rozstaw

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

• Górny margines: 50px
• Margines dolny: 100px
• Lewy margines: 5%
• Prawy margines: 5%

Dodaj moduł Blurb do kolumny 2

Treści dynamiczne

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 produktu w tytule i treści.

• Tytuł: Zasiłek Tytuł 1
• Treść: Opis korzyści 1

Załaduj obrazek

Następnie prześlij obraz lub użyj wybranej ikony. Możesz znaleźć te, których używaliśmy w tym samouczku, w folderze pobierania, który udało Ci się pobrać na początku tego samouczka.

Ustawienia obrazu/ikony

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

• Umieszczenie obrazu/ikony: góra
• Wyrównanie obrazu/ikony: do lewej

Ustawienia tekstu tytułu

Następnie modyfikujemy ustawienia tekstu tytułu.

• Czcionka tytułu: Oswald
• Styl czcionki tytułu: wielkie litery
• Rozmiar tekstu tytułu: 25px

Ustawienia tekstu podstawowego

Wraz z ustawieniami tekstu podstawowego.

• Czcionka ciała: Karla
• Rozmiar tekstu podstawowego: 17 pikseli (komputer i tablet), 15 pikseli (telefon)
• Wysokość linii ciała: 1,9 em

Rozmiary

Następnie przejdź do ustawień rozmiaru i zmodyfikuj szerokości. Ważne jest, aby użyć szerokości głównej mniejszej niż 50%, co pozwoli nam pokazać dwa Moduły Blurb obok siebie w kolejnych krokach.

• Szerokość obrazu: 25%
• Szerokość: 49%

Rozstaw

Dodamy również trochę spacji wokół modułu Blurb, używając niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 8%
• Dolna wyściółka: 8%
• Lewa wyściółka: 8% (komputer stacjonarny i tablet), 2% (telefon)
• Prawa wyściółka: 8% (komputer stacjonarny i tablet) 2% (telefon)

Główny element

Teraz, aby upewnić się, że dwa moduły Blurb pojawią się obok siebie, należy wykonać dwa ważne kroki. Pierwszym z nich jest upewnienie się, że szerokość modułu jest mniejsza niż 50% (tak jak zrobiliśmy to w jednym z poprzednich kroków). Drugi używa wbudowanej właściwości wyświetlania. Dodamy tę właściwość CSS do głównego elementu modułu Blurb w zakładce Zaawansowane.

display: inline-block;

Trzykrotne klonowanie modułu Blurb

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

Modyfikuj obrazy modułu Blurb

Zmień obraz w każdym zduplikowanym module Blurb. Możesz je znaleźć w folderze pobierania, który udało Ci się pobrać na początku tego postu.

Modyfikuj dynamiczną zawartość modułu Blurb

Zmień także zawartość dynamiczną dla każdego zduplikowanego modułu Blurb.

• Tytuł: Zasiłek Tytuł (2,3 lub 4)
• Treść: Opis korzyści (2,3 lub 4)

Dodawaj obramowania do modułów Blurb indywidualnie

Rozmycie modułu 1 Ustawienia obramowania

Teraz, aby ukończyć nasz projekt siatki, dodamy kilka ramek do modułów Blurb na indywidualnym poziomie. Otwórz pierwszy moduł Blurb i skorzystaj z prawej krawędzi.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #ffd623

Dodaj również dolną ramkę do pierwszego modułu Blurb.

• Szerokość dolnej granicy: 1px
• Kolor dolnej krawędzi: #000000

Rozmycie Ustawienia obramowania modułu 2

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

• Szerokość dolnej granicy: 1px
• Kolor dolnej krawędzi: #000000

Rozmycie modułu 3 Ustawienia obramowania

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

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #ffd623

Dodaj moduł Dodaj do koszyka Woo do kolumny 2

Treści dynamiczne

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

• Produkt: ten produkt

Ustawienia pól

Następnie przejdź do karty projektu i zmień ustawienia pól.

• Kolor tła pól: #ffffff
• Kolor tekstu pola: #000000

• Pola zaokrąglone rogi: 0px (wszystkie rogi)
• Szerokość dolnego obramowania pól: 1px
• Kolor dolnego obramowania pól: #000000

Ustawienia przycisków

Następnie dostosuj odpowiednio styl przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #ffd623
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Oswald
• Styl czcionki przycisku: wielkie litery

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Rozstaw

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

• Górny margines: 100px
• Lewy margines: 5%

3. Zapisz zmiany w kreatorze motywów i podgląd wyników

Po zakończeniu projektowania szablonu strony produktu możesz zapisać wszystkie zmiany w Kreatorze motywów i wyświetlić wyniki dotyczące swoich produktów!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki kolejnemu szablonowi strony produktu Divi. Mówiąc dokładniej, pokazaliśmy, jak dodać dynamiczną siatkę korzyści produktu, aby dodać dodatkową zachętę do strony produktu. Stworzyliśmy ten samouczek za pomocą Divi w połączeniu z wtyczką Advanced Custom Fields. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.