Sposób, w jaki zaprojektujesz stronę produktu, ma bezpośredni wpływ na zachowanie Twoich klientów odwiedzający. Dobrze zaprojektowany i spersonalizowany projekt strony produktu może na to pozwolić odwiedzający łatwiej zdecydować, czy chcą kupić Twój produkt. Jeśli szukasz sposobu na uatrakcyjnienie strony produktu, prawdopodobnie spodoba ci się ten samouczek.
Pokażemy Ci, jak włączyć dynamiczną siatkę korzyści produktu do swojego projektu za pomocą Divi i wtyczki Advanced Custom Fields. Zaczniemy od utworzenia grupy pól dla korzyści. Następnie wypełnimy niestandardowe pola na naszej stronie produktu i dołączymy treść dynamiczny w naszym szablonie strony produktu.
Możliwy wynik
Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.
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, użyjemy wtyczki wolny Zaawansowane pola niestandardowe. Uzyskaj dostęp do swojego Backend WordPress> Wtyczki> Dodaj nową> Znajdź wtyczkę ACF> Zainstaluj> Aktywuj .
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.
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 pierwsze pole
Kontynuuj, dodając nowe pole tytułu pierwszej korzyści produktu.
- Etykieta pola: tytuł świadczenia 1
- Typ pola: tekst
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
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.
Wypełnij pola Korzyści produktu
I spełnij zalety produktu.
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”.
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ą.
Wejdź do edytora szablonów brył modelu
Następnie wprowadź treść modelu, klikając „Dodaj niestandardową treść” i wybierając „Utwórz niestandardową treść”.
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
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
Dodaj nową linię
Struktura kolumny
Kontynuujmy dodając nowy wiersz do sekcji o następującej strukturze:
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%
rozstaw
Usuń wszystkie górne i dolne wewnętrzne odstępy.
- Wysoki margines wewnętrzny: 0px
- Niski margines wewnętrzny: 0px
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”.
- Produkt: ten produkt
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 tekstu
Przejdź do zakładki „Projekt” i zmień czcionkę tekstu.
- Czcionka tekstu: Karla
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
- Czcionka przycisku: Oswald
- Styl czcionki przycisku: Shift
- Wysoki margines wewnętrzny: 20px
- Niski margines wewnętrzny: 20px
- Lewy margines wewnętrzny: 50 pikseli
- Wewnętrzny prawy margines: 50 pikseli
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%
rozstaw
Przejdźmy do zakładki Projekt i dodajmy wysoki wewnętrzny margines.
- Najlepsze wypełnienie: 150px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nową linię o takiej samej strukturze, jak pokazano poniżej:
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
Rozstaw
Usuniemy również górny margines wewnętrzny.
- Najlepsze wypełnienie: 0px
Główny element
I wyśrodkować treść kolumnie na DeskTop, użyjemy dwóch linii kodu CSS w głównym elemencie linii modułu.
Desktop:
wyświetlacz: flex; wyrównaj elementy: środek;
Tablet i telefon:
display: block;
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
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
Dodaj moduł tytułu Woo do kolumny 2
Dynamiczna treść
W kolumnie 2 pierwszym modułem, którego potrzebujemy, jest moduł tytułowy Woo. Upewnij się, że w polu jest zaznaczona opcja „Ten produkt”. treść dynamiczny.
- Produkt: ten produkt
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
rozstaw
Ukończ moduł Woo title, dodając lewy i prawy margines.
- Lewy margines: 5%
- Prawy margines: 5%
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 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
zaklejania
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 niestandardowe wartości marginesów w ustawieniach odstępów.
- Górny margines: 50px
- Dolny margines: 100px
- Lewy margines: 5%
- Prawy margines: 5%
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
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.
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
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
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
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%
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)
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;
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.
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.
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)
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
Dodaj także dolną ramkę do pierwszego modułu Blurb.
- Szerokość dolnej krawędzi: 1px
- Kolor dolnej ramki: # 000000
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
Ustawienia obramowania modułu 3
Uzupełnij projekt siatki, dodając prostą ramkę do trzeciego modułu Blurb.
- Szerokość prawej ramki: 1px
- Kolor prawej ramki: # ffd623
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
Ustawienia pola
Przejdź do następnej zakładki projektu i zmień ustawienia pola.
- Kolor tła pól: #ffffff
- Kolor tekstu pola: # 000000
- Zaokrąglone pola: 0px (wszystkie rogi)
- Szerokość dolnej granicy pól: 1px
- Kolor dolnej granicy pól: # 000000
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
- Czcionka przycisku: Oswald
- Styl czcionki przycisku: wielkie litery
- Górna wyściółka: 20px
- Dolne wypełnienie: 20px
- Lewe dopełnienie: 50px
- Prawa wyściółka: 50 pikseli
rozstaw
I uzupełnij parametry modułu, dodając niestandardowe wartości marginesów.
- Górny margines: 100px
- Lewy margines: 5%
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!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
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.
