Tabela cenowa..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu zbudujesz tabelę cenową: trzy plany obok siebie, każdy w panelu z ceną, listą funkcji i przyciskiem na całą szerokość, przy czym środkowy plan jest wyróżniony. Użyj jej na stronie cenowej albo wewnątrz strony produktu. Pełną stronę produktu wokół niej zbuduj według strony produktu.

Film buduje trzy plany dla narzędzia do raportowania.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Strona jest otwarta w kreatorze. Nową utworzysz w Content > Add content > Landing Page (/node/add/landing_page) przyciskiem Save.
  • Nowe elementy lądują na górze kontenera, więc w każdym panelu przycisk wchodzi przed ceną.

Krok 1: dodaj sekcję i kolumny

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Najedź na sekcję i otwórz More > Settings. W HTML classes wybierz Align text center. Otwórz panel Style, wybierz jasnoszary Background i kliknij Save.
  3. Kliknij + na sekcji i wybierz Row; powstaje z dwiema równymi kolumnami.
  4. Kliknij ikonę siatki wiersza (Column layout), wybierz preset 1/3 + 1/3 + 1/3 i kliknij Save.

Krok 2: zbuduj pierwszy plan

  1. Kliknij + w pierwszej kolumnie i wybierz Panel z karty Content.
  2. Najedź na panel i otwórz More > Settings. Ustaw Title na „Starter”, zostaw Type na DXPR i kliknij Save.
  3. Kliknij + na panelu i wybierz Button. Ustaw Title na „Choose plan”, Link na /signup, a Type na Primary. Włącz Block button, aby wypełnił kolumnę, a potem kliknij Save.
  4. Kliknij + na panelu jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz cenę jako Heading 2, dodaj funkcje po jednej na linijkę i kliknij Save.

Krok 3: zbuduj pozostałe plany

  1. Powtórz krok 2 w drugiej kolumnie dla „Professional”. W panelu Style panelu wybierz fioletowy Background, a Type przycisku ustaw na Success, aby plan się wyróżnił.
  2. Powtórz krok 2 w trzeciej kolumnie dla „Enterprise”, z „Custom pricing” jako ceną.

Wskazówka

Środkowa kolumna przyciąga wzrok. Umieść tam plan, który najbardziej chcesz sprzedać.

Krok 4: dodaj nagłówek

  1. Kliknij + na sekcji i wybierz Text; ląduje nad wierszem.
  2. Wpisz „Choose your plan” jako Heading 2, dodaj jedną linijkę, na przykład „Simple monthly pricing. Cancel any time.”, i kliknij Save.

Krok 5: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka) i wybierz Preview.

Idź dalej

Niepokazane w filmie:

  • Cztery plany: wybierz zamiast tego preset 1/4 + 1/4 + 1/4 + 1/4 i zbuduj czwartą kolumnę.
  • Odznaka najpopularniejszego: dodaj element Text na górze wyróżnionego panelu z pogrubionym „Most popular”.
  • Rocznie i miesięcznie: dodaj linijkę Text nad wierszem, na przykład „Monthly | Annual (save 20%)”. Linijka jest statyczna; żywy przełącznik potrzebuje elementu HTML z własnym skryptem.
  • Znaczniki funkcji: wklej znak wyboru przed każdą linijką funkcji albo dodaj nad listą element Icon.

Efekt

„Choose your plan” stoi wyśrodkowane nad trzema planami na szarym pasie. Każdy panel pokazuje nazwę na pasku tytułu, cenę, trzy funkcje i przycisk Choose plan na całą szerokość. Środkowy plan wyróżnia się fioletem z zielonym przyciskiem.

Jeśli nie widzisz planów jak na filmie

  • Panel otwiera się bez okna ustawień. Panele otwierają się puste, bez okna. Najedź na panel i otwórz More > Settings, aby ustawić jego Title.
  • Typ panelu taki jak Primary nie pokazuje koloru. Twój motyw nie styluje tego rodzaju panelu. Zostaw Type na DXPR i wybierz Background w panelu Style panelu, jak w kroku 3.
  • Przyciski są szerokie tylko jak tekst. Block button jest wyłączony. Otwórz ustawienia każdego przycisku i włącz go.
  • Twoje zmiany zniknęły po przeładowaniu. Stronę opuszczono przed kliknięciem Save na pasku narzędzi kreatora. Jeśli Save pokazuje błąd, zobacz Zmiany nie zapisują się.

Co dalej?