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 600.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 bezpośredni wpływ na zachowanie użytkowników. Dobrze zaprojektowana i spersonalizowana konstrukcja 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 korzyści. Następnie wypełnimy niestandardowe pola na naszej stronie produktu i uwzględnimy dynamiczną treść 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 bezpłatnej wtyczki Advanced Custom Fields. Uzyskaj dostęp do swojego Backend WordPress> Wtyczki> Dodaj nowy> Wyszukaj 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 nowej grupie pól tytuł i pozwól mu 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ł Benefit 1
  • Typ pola: tekst

Powtórz krok dla pozostałych pól

Zrób to samo w przypadku innych zalet produktu i ich opisów. Wszystkie te pola wymagają przypisanego im 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 dodawać 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 narzędzia Divi Theme Builder i kliknij „Dodaj nowy szablon”.

Użyj szablonu dla wszystkich produktów

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

Wejdź do edytora modelu bryły 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 modułu otwórzmy ustawienia linii i dokonajmy pewnych korekt odstępów.

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

rozstaw

Usuń wszystkie wewnętrzne odstępy górny i dolny.

  • Wysoki margines wewnętrzny: 0px
  • Niski margines wewnętrzny: 0px

Dodaj moduł Woo Cart Notice do kolumny

Treść dynamiczna

Jedynym modułem, którego potrzebujesz w tym wierszu i tej sekcji, jest moduł Woo Cart Notice. Upewnij się, że „Ten produkt” jest zaznaczony w sekcji dynamicznej.

Ł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

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%
    • Tablet: 57%
    • Telefon: 54%
  • Pozycja końcowa:
    • Pulpit: 30%
    • Tablet: 57%
    • Telefon: 54%

rozstaw

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

  • Najlepsze wypełnienie: 150px

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowych linii o tej samej strukturze, jak pokazano poniżej:

zaklejania

Na razie nie dodając żadnych modułów, otworzymy ustawienia i zmodyfikujemy 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

Aby wyśrodkować zawartość kolumny 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, zacznijmy od modułu Woo Images w kolumnie 1. Upewnij się, że wybrano opcję „Ten produkt”.

  • Produkt: ten produkt

Efekt animacji pionowego przewijania

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

  • Aktywuj ruch pionowy: Tak
  • Rozpocznij przesunięcie:
    • Biuro: -4
    • Tablet i telefon: 0
  • Średnie przesunięcie: 0
  • Przesunięcie końcowe: 0
  • Wyzwalacz efektu ruchu: środek elementu

Dodaj moduł tytułu Woo do kolumny 2

Dynamiczna treść

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

  • Produkt: ten produkt
siatka korzyści produktu

Ustawienia tekstu tytułowego

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

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]

  • 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. W tym celu wykorzystujemy następujące dynamiczne treści:

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

Ustawienia tekstu

Przejdź do karty projektu 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ść dla różnych rozmiarów 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 parametrów wymiarowania i zmień szerokości. Ważne jest, aby użyć głównej szerokości mniejszej niż 50%, pozwoli to nam pokazać dwa moduły Blurb obok siebie w kolejnych krokach.

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

rozstaw

Dodamy również spacje wokół modułu Blurb przy użyciu niestandardowych wartości wypeł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 dopełnienie: 8% (komputer stacjonarny i tablet) 2% (telefon)

Główny element

Teraz upewnijmy 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 to zrobiliśmy w poprzednim kroku). Następnie wykorzystamy właściwość na linii. 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łu 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 module Blurb dwa razy. Można je znaleźć w folderze pobierania, który można było pobrać 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 ukończyć projektowanie naszej siatki, dodamy ramki do modułów Blurb na indywidualnym poziomie. Otwórz pierwszy moduł 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.

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 „Ten produkt” jest zaznaczony w obszarze zawartości dynamicznej.

  • Produkt: ten produkt

Ustawienia pola

Przejdź do następnej karty projektu i zmodyfikuj parametry pól.

  • Kolor tła pola: #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 etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym artykule pokazaliśmy, jak kreatywnie korzystać z 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. Ten samouczek stworzyliśmy 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, zostaw komentarz w sekcji komentarzy poniżej.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie 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