Jedną z wyjątkowych stron docelowych, które oferujemy jako dożywotni członkowie i nowi klienci w Czarny piątek, jest oszałamiająca strona docelowa sprzedaży oprogramowania. Ten landing page zaskoczy Cię unikalnymi przegrodami i wysokiej jakości makietami. W tym artykule pokażemy, jak korzystać z funkcji dynamicznej zawartości Divi, aby dodać do niej dynamiczne tabele cen!

Jeśli jesteś obecnym klientem Lifetime lub jeśli kupiłeś nowe konto lub uaktualniłeś podczas naszej wyprzedaży w Czarny piątek, możesz pobrać ten układ już teraz.

Uzyskaj ekskluzywną stronę docelową sprzedaży oprogramowania z okazji Czarnego Piątku

Zanim przejdziesz do tego przypadku użycia, musisz położyć ręce na ekskluzywnej stronie docelowej wyprzedaży oprogramowania z okazji Czarnego Piątku, którą możesz zdobyć, zostając nowym członkiem Elegant Themes, aktualizując istniejące konto lub będąc już u nas dożywotnim członkiem. Jeśli rzeczywiście jesteś już dożywotnim członkiem, możesz zalogować się do naszej strefy członkowskiej i pobrać wszystkie nasze ekskluzywne strony docelowe tutaj. Wszyscy inni będą musieli użyć poniższego przycisku, aby kupić lub uaktualnić, zanim będą mogli śledzić resztę naszego samouczka.

Odbierz ofertę, zanim zniknie!

Korzystanie z tworzenia dynamicznych tabel cenowych w Divi

W dalszej części tego posta założymy, że albo skorzystałeś z naszej oferty w Czarny piątek, albo że jesteś już dożywotnim członkiem i masz dostęp do strony docelowej sprzedaży oprogramowania w Czarny piątek

Po pobraniu nowej strony docelowej sprzedaży oprogramowania z naszego obszaru członków możesz obejrzeć poniższy film, aby zobaczyć, jak łatwo jest ją skonfigurować. Zachęcamy również do śledzenia tego samouczka, aby przygotować witrynę do dalszego dostosowywania.

W tym poście przypadku użycia pokażemy, jak tworzyć dynamiczne tabele cenowe za pomocą Divi i bezpłatnej wtyczki Advanced Custom Fields. Tworzenie dynamicznych tabel cenowych jest świetne, jeśli masz klienta, który często zmienia ceny abonamentu i chcesz pozwolić mu na samodzielne zmiany bez dostępu do Divi. Pomoże Ci to upewnić się, że nie zepsują niczego na samej stronie, a jednocześnie mają możliwość zmiany ceny, opisu i poziomu członkostwa określonego pakietu.

Zapowiedź

Zanim zagłębimy się w to, rzućmy okiem na efekt końcowy.

Zacznijmy!

Zainstaluj wtyczkę Advanced Custom Fields

Pierwszą rzeczą, którą musisz zrobić, to zainstalować wtyczkę Advanced Custom Fields na swojej witrynie WordPress, przechodząc do Wtyczki > Dodaj nowy > Wyszukiwanie wtyczki i zainstalowanie jej .

Utwórz nową grupę pól

Po aktywacji wtyczki możesz zacząć. Dodaj nową grupę pól.

Nazwa + Lokalizacja

Nadaj nazwę nowej grupie pól. Pamiętaj, że pod koniec tej części samouczka będziesz mieć trzy grupy pól (równe liczbie tabel cenowych), więc upewnij się, że je poprawnie nazwałeś. Zmień również ustawienia lokalizacji tej grupy pól.

Dodaj pole poziomu członkostwa

Czas zacząć dodawać pola! Potrzebujemy w sumie trzech. Dodaj pole poziomu członkostwa, korzystając z następujących ustawień:

• Etykieta pola: Poziom członkostwa 1
• Nazwa pola: Membership_level_1
• Typ pola: Wybierz
• Wybory: Dodaj wybrane treści

Dodaj pole opisu członkostwa

Kontynuuj, dodając pole opisu członkostwa.

• Etykieta pola: Opis członkostwa 1
• Nazwa pola: Membership_description_1
• Typ pola: Tekst

Dodaj pole ceny

Ostatnie pole, którego potrzebujesz, to pole ceny.

• Etykieta pola: Cena 1
• Nazwa pola: cena_1
• Typ pola: Tekst

Powiel grupę pól dwa razy i dostosuj nazwę i pola do numeru tabeli cen

Jedna grupa pól to jedna tabela cen na naszej stronie. Teraz, gdy skończyliśmy pierwszy, możemy go sklonować dwukrotnie, aby upewnić się, że mamy wystarczającą liczbę grup pól, aby dopasować liczbę tabel cenowych na naszej stronie.

Zmień liczbę wszystkich pól w grupie

Każde z utworzonych pól dynamicznych zostanie wyświetlone w programie Visual Builder. Aby upewnić się, że wiesz, do jakich informacji prowadzisz łącze, nadaj zduplikowanym grupom pól i ich polom inny numer.

Utwórz nową stronę za pomocą strony docelowej sprzedaży oprogramowania Divi

W następnej części tego samouczka dodamy dynamiczne tabele cenowe do naszej strony docelowej sprzedaży oprogramowania. Utwórz nową stronę przy użyciu tego układu.

Dodaj zawartość dynamiczną do strony

Przełącz się z powrotem na zaplecze tej strony i dodaj dynamiczną zawartość do każdej z tabel cenowych.

Dodaj nowy wiersz poniżej tabeli cen na stronie

Struktura kolumny

Kontynuuj, włączając Visual Builder i dodając nowy wiersz tutaj:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowy margines.

• Górny margines: 100px
• Margines dolny: 100px

Dodaj moduł CTA do kolumny 1

Połącz pole tytułu z treścią dynamiczną poziomu 1 członkostwa

Pierwszym modułem, którego będziemy potrzebować w kolumnie 1, jest moduł wezwania do działania. Połącz pole tytułu z polem poziomu członkostwa 1, które utworzyłeś w poprzedniej części tego samouczka.

Połącz skrzynkę treści z opisem członkostwa 1 Treść dynamiczna

Podobnie połącz pole treści z opisem członkostwa 1.

Kolor tła

Następnie przejdź do ustawień tła i zmień kolor tła modułu CTA.

• Kolor tła: #ffffff

Zdjęcie w tle

Dodaj również subtelny obraz tła. Po przesłaniu strony docelowej sprzedaży oprogramowania w Bibliotece multimediów będzie można znaleźć następujący obraz tła:

• Obraz tła: software-sale-13.png

Ustawienia tekstu

Kontynuuj przechodząc do ustawień tekstu i zmieniając orientację tekstu modułu.

• Orientacja tekstu: w lewo

Ustawienia tekstu tytułu

Aby dopasować styl projektu strony docelowej, wprowadź również pewne zmiany w ustawieniach tekstu tytułu.

• Czcionka tytułu: Rubik
• Grubość czcionki tytułu: lekka
• Kolor tekstu tytułu: #4258ff
• Rozmiar tekstu tytułu: 40px
• Wysokość wiersza tytułu: 1,3 em

Ustawienia tekstu podstawowego

To samo dotyczy ustawień tekstu podstawowego.

• Czcionka ciała: Rubik
• Waga czcionki ciała: średnia
• Kolor tekstu ciała: rgba (0,0,0,0.34)
• Rozmiar tekstu ciała: 15px
• Wysokość linii ciała: 1,8 em

Rozstaw

Następnie dodaj górną wyściółkę.

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

Granica

I dodaj „8px” do każdego z górnych rogów modułu.

Cień Pudełka

Na koniec dodamy subtelny cień pudełka, aby nadać stronie głębię.

• Pozycja pionowa cienia pudełka: 50px
• Siła rozmycia cieni w pudełku: 100px
• Kolor cienia: rgba (66,88,255,0.2)

Dodaj moduł tekstowy do kolumny 1

Połącz zawartość pola z ceną 1 zawartości dynamicznej

Śmiało i dodaj moduł tekstowy tuż pod modułem wezwania do działania w kolumnie 1. Połącz pole zawartości tego modułu z zawartością dynamiczną Cena 1.

Kolor tła

Kontynuuj, zmieniając kolor tła tego modułu.

• Kolor tła: #ffffff

Ustawienia tekstu

Zmodyfikuj również ustawienia tekstu.

• Czcionka tekstu: Rubik
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #4258ff
• Rozmiar tekstu: 70px
• Wysokość linii tekstu: 1em

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

• Dolna wyściółka: 60px
• Lewa wyściółka: 40px

Granica

Kontynuuj, przechodząc do ustawień obramowania i dodając „8px” w obu dolnych rogach.

Cień Pudełka

Na koniec, nadaj również temu modułowi tekstowemu cień.

• Pozycja pionowa cienia pudełka: 80px
• Siła rozmycia cieni w pudełku: 100px
• Kolor cienia: rgba (66,88,255,0.2)

Przeciągnij moduł przycisku do kolumny 1

Ostatnim modułem, którego będziemy potrzebować w pierwszej kolumnie, jest moduł przycisku. Sklonuj jeden z modułów przycisków, które możesz znaleźć w poprzednim rzędzie i umieść go w kolumnie 1.

Zmień odstępy

Otwórz ustawienia modułu przycisku i dodaj niestandardowy margines.

• Górny margines: 30px
• Margines dolny: 50px

Sklonuj wszystkie moduły w kolumnie 1 i umieść w pozostałych kolumnach

Aby zaoszczędzić czas, sklonujemy wszystkie trzy moduły w kolumnie 1 dwukrotnie i umieścimy duplikaty w pozostałych kolumnach wiersza.

Modyfikuj moduły w kolumnie 2

Moduł CTA

Połącz pole tytułu z treścią dynamiczną poziomu 2 członkostwa

Musimy zmodyfikować duplikaty, zaczynając od modułu CTA w drugiej kolumnie. Połącz pole tytułu z zawartością dynamiczną 2. poziomu członkostwa.

Połącz skrzynkę treści z opisem członkostwa 2 Zawartość dynamiczna

Zrób to samo dla pola treści.

Dodaj tło gradientowe

Następnie dodaj do modułu tło gradientowe.

• Kolor 1: #6959ff
• Kolor 2: #c1bfff
• Kierunek gradientu: 15 stopni
• Pozycja startowa: 22%
• Pozycja końcowa: 95%

Zmień kolor tekstu tytułu

Zmień również kolor tekstu tytułu.

• Kolor tekstu tytułu: #ffffff

Zmień kolor tekstu głównego

To samo dotyczy koloru tekstu podstawowego.

• Kolor tekstu ciała: #ffffff

Zmień odstępy

Aby umieścić tę konkretną tabelę cenową w centrum uwagi, pobawimy się również wartościami odstępów.

• Górny margines: -50px (komputer), 0px (tablet i telefon)
• Górna wyściółka: 100px

Moduł tekstowy

Połącz zawartość pola z zawartością dynamiczną Price 2

Kontynuuj, otwierając moduł tekstowy w kolumnie 2 i łącząc pole zawartości z zawartością dynamiczną Cena 2.

Zmień kolor tła

Następnie zmień kolor tła tego modułu.

• Kolor tła: #6959ff

Zmień kolor tekstu

I zmień kolor tekstu na biały.

• Kolor tekstu: #ffffff

Zmień odstępy

Na koniec zmień niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Dolna wyściółka: 120px
• Lewa wyściółka: 40px

Modyfikuj moduły w kolumnie 3

Moduł CTA

Połącz pole tytułu z treścią dynamiczną poziomu 3 członkostwa

Musimy również zmienić moduły w kolumnie 3. Połącz pole tytułu z zawartością dynamiczną 3. poziomu członkostwa.

Połącz skrzynkę treści z opisem członkostwa 3 Zawartość dynamiczna

To samo dotyczy pudełka zawartości.

Dodaj tło gradientowe

Następnie dodaj do modułu tło gradientowe.

• Kolor 1: #c87cff
• Kolor 2: #ffbcf8
• Kierunek gradientu: 18 stopni
• Pozycja startowa: 22%
• Pozycja końcowa: 95%

Zmień kolor tekstu tytułu

Zmień kolor tekstu tytułu na biały.

• Kolor tekstu tytułu: #ffffff

Zmień kolor tekstu głównego

Zrób to samo dla koloru tekstu podstawowego.

• Kolor tekstu ciała: #ffffff

Moduł tekstowy

Połącz zawartość pola z zawartością dynamiczną Price 3

Kontynuuj, otwierając moduł tekstowy w kolumnie 3 i zmieniając również tutaj zawartość dynamiczną.

Zmień kolor tła

Następnie dodaj inny kolor tła.

• Kolor tła: #c87cff

Zmień kolor tekstu

Na koniec zmień kolor tekstu na biały i gotowe! Masz teraz na swojej stronie trzy w pełni dynamiczne tabele cenowe!

• Kolor tekstu: #ffffff

Końcowe przemyślenia

Ten przypadek użycia jest częścią naszej oferty z okazji Czarnego Piątku, w ramach której udostępniamy 6 DARMOWYCH stron docelowych z limitowanej edycji klientom z okazji Czarnego Piątku i dożywotnim członkom. Dołączając do naszej wzmocnionej społeczności w tych dniach i stając się członkiem, zyskasz:

• 25% ZNIŻKI NA WSZYSTKO
• Wszystkie 6 stron docelowych za darmo
• Dostęp do naszych niesamowitych motywów i wtyczek
• Nagrody bonusowe

Skorzystaj z okazji i zostań członkiem już dziś!