Baza wiedzy..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz stronę główną centrum pomocy: granatowy nagłówek, trzy karty kategorii, każdą z ikoną, dwie listy popularnych artykułów i wezwanie do wsparcia. Użyj jej, gdy pomoc rozkłada się na wiele artykułów. Krótką listę pytań i odpowiedzi zbuduj zamiast tego według strony FAQ.

Film buduje centrum pomocy produktu programowego.

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 sekcji albo kolumny. Dodawaj elementy kolumny w odwrotnej kolejności albo przeciągnij je potem na miejsce.

Krok 1: dodaj nagłówek

  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. W panelu Style wybierz granatowy Background i biały Font color, a potem kliknij Save.
  3. Kliknij + na sekcji i wybierz Text. Wpisz „Help centre” jako Heading 2 i dodaj „How can we help you today?”. Ustaw Font color na biały w panelu Style 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 kategorie

  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 Card. Otwórz jej More > Settings, ustaw Header na nazwę kategorii, a Title na liczbę artykułów, a potem kliknij Save.
  4. Kliknij + w tej samej kolumnie i wybierz Icon; ląduje nad kartą. Wybierz zestaw Font Awesome Free Solid, wyszukaj rocket i kliknij ikonę. Ustaw Size na Extra Large (2x) i kliknij Save.
  5. Powtórz w drugiej kolumnie z credit-card, a w trzeciej z screwdriver-wrench.
  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 Row; powstaje z dwiema równymi kolumnami.
  3. Kliknij + w każdej kolumnie i wybierz Text. Wpisz trzy tytuły artykułów, po jednym na linijkę, i kliknij Save.
  4. Kliknij + na sekcji i wybierz Text; ląduje nad wierszem. Wpisz „Popular articles” jako Heading 2 i kliknij Save.

Krok 4: dodaj wezwanie do wsparcia

  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 „Contact support”, Link na /support, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Can't find what you need?” 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:

  • Pole wyszukiwania: włącz moduł rdzenia Search w Extend. Kliknij + w sekcji nagłówka, otwórz kartę Drupal Blocks i wybierz Block: Forms: Search form. Odwiedzający lądują na /search/node.
  • Klikalne karty: dodaj najpierw element Link do kolumny i ustaw jego Link na stronę kategorii. Potem dodaj Card w środku.
  • Linki artykułów: zaznacz każdy tytuł na listach i podlinkuj go przyciskiem linku na pasku narzędzi.
  • Kolejne kategorie: dodaj drugi Row z tym samym presetem. Popularne to Using the editor, Templates and design oraz API and development.

Efekt

Granatowy nagłówek wita odwiedzających napisem „Help centre” na biało. Za nim następują trzy wyśrodkowane kategorie, każda z ikoną nad kartą z nazwą i liczbą artykułów. Szary pas wymienia sześć popularnych artykułów w dwóch kolumnach, a fioletowy pas oferuje Contact support.

Jeśli nie widzisz strony jak na filmie

  • Karta nie pokazuje okna ustawień po dodaniu. Karty otwierają się puste, bez okna. Najedź na kartę i otwórz More > Settings, aby wypełnić Header i Title.
  • Ikona siada pod kartą. Ikona weszła przed kartą, a nowe elementy lądują na górze kolumny. Przeciągnij ikonę nad kartę za uchwyt na jej pasku sterowania.
  • Nagłówek zostaje ciemny na granacie. 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?