Strona FAQ..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu zbudujesz stronę FAQ, na której każde pytanie otwiera się i zamyka po kliknięciu. Skończysz z wyśrodkowanym nagłówkiem, kategorią pytań w panelu zwijanym i wezwaniem do kontaktu. Użyj jej do krótkiej listy popularnych pytań. Artykuły pomocy pogrupowane tematycznie zbuduj zamiast tego według bazy wiedzy.

Film buduje FAQ kliniki zdrowia.

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 i nowe przełączniki lądują na górze kontenera. Dodawaj pytania od ostatniego do pierwszego 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, a potem kliknij Save.
  3. Kliknij + na sekcji i wybierz Text z karty Content.
  4. Wpisz „Frequently asked questions” i ustaw na Heading 2 z paska narzędzi. Dodaj jedną linijkę o tym, co obejmuje strona, a potem 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 kategorię z pytaniami

  1. Najedź na sekcję i kliknij Add Section Below.
  2. Kliknij + na nowej sekcji i wybierz Collapse panel z karty Layout; powstaje z jednym pustym przełącznikiem.
  3. Otwórz More > Settings na panelu. Włącz Collapse, aby każde pytanie zaczynało zwinięte, ustaw Expand icon na +, a potem kliknij Save.
  4. Otwórz More > Settings na przełączniku, wpisz pytanie jako jego Toggle title i kliknij Save. Nowe przełączniki lądują na górze, więc zacznij od ostatniego pytania.
  5. Kliknij pytanie, aby otworzyć jego treść, kliknij + w środku i wybierz Text. Wpisz odpowiedź i kliknij Save.
  6. Kliknij Add toggle na panelu i powtarzaj kroki 4 i 5 dla każdego pytania, aż do pierwszego.
  7. Kliknij + na sekcji jeszcze raz i wybierz Text; ląduje nad panelem. Wpisz nazwę kategorii jako Heading 2 i kliknij Save.

Celuj w 3 do 6 pytań na kategorię.

Krok 3: dodaj wezwanie do kontaktu

  1. Dodaj trzecią sekcję opcją Add Section Below i otwórz jej More > Settings. Wybierz Align text center w HTML classes i jasnoszary Background w panelu Style. Kliknij Save.
  2. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Contact us”, Link na /contact, Type na Primary, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Still have questions?” jako Heading 2, dodaj jedną linijkę wskazującą twój zespół, a potem kliknij Save.

Krok 4: 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:

  • Kolejne kategorie: powtórz krok 2 dla każdej kategorii, po jednej sekcji i jednym panelu zwijanym na kategorię. Popularne to Getting started, Account and billing, Features, Troubleshooting i Privacy and security.
  • Karty zamiast sekcji: przy małej liczbie kategorii dodaj element Tabs z karty Layout, po jednej karcie na kategorię, i umieść panel zwijany w każdej karcie. Każda kategoria zostaje w zasięgu bez przewijania.

Wskazówki SEO

  • Użyj prawdziwego pytania jako Toggle title
  • Odpowiedz w pierwszym zdaniu, a potem dodaj szczegóły
  • Podlinkuj odpowiedzi do strony, której dotyczą
  • Dodaj dane strukturalne FAQ przez motyw albo moduł Drupala

Efekt

Nagłówek stoi wyśrodkowany na górze. Pod nagłówkiem kategorii każde pytanie jest zamknięte i pokazuje +. Kliknięcie otwiera odpowiedź, a pas zamykający oferuje przycisk Contact us.

Jeśli nie widzisz strony jak na filmie

  • Wszystkie pytania zaczynają otwarte. Collapse jest wyłączone na panelu zwijanym. Otwórz More > Settings panelu, włącz Collapse i kliknij Save.
  • W przełączniku nie ma +. Treść przełącznika jest zamknięta. Kliknij pytanie, aby je otworzyć, a potem kliknij + w środku.
  • Pytania pokazują się w złej kolejności. Nowe przełączniki lądują na górze panelu. Przeciągnij każdy przełącznik na miejsce za uchwyt na jego pasku sterowania.
  • 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?