Strona produktu..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu zbudujesz stronę jednego produktu. Zdjęcie stoi obok nazwy, ceny i przycisku Buy now, a za nimi trzy funkcje, lista specyfikacji i wezwanie sprzedażowe. Użyj jej do wszystkiego, co sprzedajesz. Aby porównać kilka planów, dodaj do niej tabelę cenową.

Film buduje stronę produktu sprzętowego o nazwie Insight Hub.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma zdjęcie produktu.
  • 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 kolumny. Dlatego prawą kolumnę budujesz od przycisku w górę.

Krok 1: dodaj produkt

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Kliknij + na sekcji i wybierz Row; powstaje z dwiema równymi kolumnami.
  3. Kliknij + w lewej kolumnie i wybierz Image. Kliknij Select Image, zaznacz zdjęcie produktu i kliknij Insert selected. Wpisz Alt attribute w panelu SEO i kliknij Save.
  4. Kliknij + w prawej kolumnie i wybierz Button. Ustaw Title na „Buy now”, Link na swój sklep, Type na Primary, a Size na Large, a potem kliknij Save.
  5. Kliknij + w prawej kolumnie jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz cenę jako Heading 2 i kliknij Save.
  6. Kliknij + jeszcze raz i wybierz Text; ląduje na górze. Wpisz nazwę produktu jako Heading 2, dodaj jedną linijkę opisu i kliknij Save. Motyw drukuje tytuł strony jako jej nagłówek Heading 1. Aby ten nagłówek stał się nagłówkiem Heading 1, zobacz projektowanie stron przyjaznych SEO.

Krok 2: dodaj funkcje

  1. Najedź na sekcję i kliknij Add Section Below. Nadaj nowej sekcji klasę Align text center.
  2. Kliknij + na sekcji i wybierz Row. Kliknij jej ikonę siatki (Column layout), wybierz preset 1/3 + 1/3 + 1/3 i kliknij Save.
  3. Kliknij + w pierwszej kolumnie i wybierz Text. Wpisz nazwę funkcji jako Heading 3, dodaj jedną linijkę i kliknij Save.
  4. Kliknij + w tej samej kolumnie i wybierz Icon; ląduje nad tekstem. Wybierz zestaw Font Awesome Free Solid, wyszukaj plug i kliknij ikonę. Ustaw Size na Very Large (3x), otwórz Icon utilities, ustaw Style na Circle i kliknij Save.
  5. Powtórz w drugiej kolumnie z cloud, a w trzeciej z battery-full.

Krok 3: dodaj specyfikację

  1. Dodaj trzecią sekcję opcją Add Section Below. Otwórz jej More > Settings, wybierz jasnoszary Background w panelu Style i kliknij Save.
  2. Kliknij + na sekcji i wybierz Text. Wpisz „Specifications” jako Heading 2, potem po jednej specyfikacji na linijkę, i kliknij Save.

Krok 4: dodaj wezwanie do działania

  1. Dodaj czwartą sekcję i otwórz jej More > Settings. Wybierz Align text center w HTML classes, potem fioletowy Background i biały Font color w panelu Style. Kliknij Save.
  2. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Talk to sales”, Link na /contact, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Insight Hub from 249 euro” jako Heading 2 i dodaj jedną linijkę. Ustaw Font color na biały 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:

  • Tabela specyfikacji: wstaw tabelę przyciskiem Table na pasku narzędzi tekstu zamiast jednej linijki na specyfikację.
  • Galeria: zamień pojedyncze zdjęcie na karuzelę Image carousel ze zdjęciami produktu.
  • Plany: podlinkuj cenę do tabeli cenowej.

Efekt

Zdjęcie produktu wypełnia lewą połowę, a nazwa, cena i przycisk Buy now stoją po prawej. Za nimi trzy wyśrodkowane funkcje, każda z ikoną w okręgu nad nazwą i linijką. Specyfikacje stoją na szarym pasie, a fioletowy pas zamyka stronę przyciskiem Talk to sales.

Jeśli nie widzisz strony jak na filmie

  • Nazwa, cena i przycisk są w złej kolejności. Weszły z góry w dół, a nowe elementy lądują na górze kolumny. Przeciągnij je na miejsce za uchwyt na ich pasku sterowania.
  • Ikony nie mają okręgu. Style stoi w panelu Icon utilities, nie w General. Otwórz ustawienia ikony, otwórz Icon utilities i ustaw Style na Circle.
  • Nagłówek zostaje ciemny na fiolecie. Element Text nie ma własnego Font color. Otwórz jego panel Style i ustaw Font color na biały.
  • 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?