FAQページを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここではクリックで開閉するFAQページを作ります。最後には中央寄せ見出し、コラプス パネルの質問カテゴリー、お問い合わせ行動喚起が残ります。よくある質問の短い一覧に 使います。話題別ヘルプ記事には代わりにナレッジベースを作るを ご覧ください。

動画では健康クリニックのFAQを作ります。

はじめる前に

  • ロールがEdit with DXPR Builder権限を持ちます。
  • ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。
  • 新規エレメントと新規トグルはコンテナーの上に載ります。質問は最後から最初へ追加するか、後からドラッグで整えます。

手順1: ヘッダーを追加する

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
  2. セクションにホバーしてMore > Settingsを開きます。HTML classes下でAlign text centerを選び、Saveをクリックします。
  3. セクションの+をクリックし、ContentタブからTextを選びます。
  4. 「よくある質問」と入力し、ツールバーからHeading 2にします。ページ内容の1行を加えてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。

手順2: 質問カテゴリーを追加する

  1. セクションにホバーしてAdd Section Belowをクリックします。
  2. 新セクションの+をクリックし、LayoutタブからCollapse panelを選びます。空トグル1つ付きで入ります。
  3. パネルのMore > Settingsを開きます。全質問を閉じた状態ではじめるにはCollapseをオンにし、Expand iconを+にしてSaveをクリックします。
  4. トグルのMore > Settingsを開き、質問をToggle titleに入力してSaveをクリックします。新規トグルは上に載るので、最後の質問からはじめます。
  5. 質問をクリックして本文を開き、中の+をクリックしてTextを選びます。答えを入力してSaveをクリックします。
  6. パネルのAdd toggleをクリックし、各質問で手順4と5を繰り返して最初まで遡ります。
  7. セクションの+をもう1度クリックしてTextを選びます。パネルの上に載ります。カテゴリー名をHeading 2で入力してSaveをクリックします。

1カテゴリー3から6問を目安にします。

手順3: お問い合わせ行動喚起を追加する

  1. 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで薄灰色Backgroundを選びます。Saveをクリックします。
  2. セクションの+をクリックしてButtonを選びます。Titleに「お問い合わせ」、Linkに/contact、TypeにPrimary、SizeにLargeを設定してSaveをクリックします。
  3. クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「まだ質問がありますか？」をHeading 2で入力し、担当への1行を加えてSaveをクリックします。

手順4: 保存してプレビューする

  1. ビルダーツールバーのSaveをクリックします。
  2. ビューメニュー (eye icon、目のアイコン) を開き、Previewを選びます。

さらに進む

動画にはありません。

  • カテゴリー追加: カテゴリーごとに手順2を繰り返します。各1セクション1コラプスパネルです。よくあるものははじめ方、アカウントと請求、機能、トラブルシューティング、プライバシーとセキュリティーです。
  • セクション代わりのタブ: カテゴリー少数ならLayoutタブからTabsエレメントを追加し、カテゴリーごとに1タブ、各タブ内にコラプスパネルを置きます。全カテゴリーがスクロールなしで手の届く範囲に残ります。

SEOのヒント

  • 実際の質問がToggle title
  • 最初の文で答え、次に詳細を加えます
  • 答えから参照先ページへリンクします
  • テーマやDrupalモジュール経由でFAQ構造化データを追加します

表示結果

見出しが上に中央寄せで座ります。カテゴリー見出し下で全質問が閉じ、+が出ます。クリックで答えが開き、締め帯がお問い合わせボタンを出します。

図通りにならない場合

  • すべての質問が開いた状態ではじまります。 Collapseがオフです。パネルのMore > Settingsを開き、CollapseをオンにしてSaveをクリックします。
  • トグル内に+がありません。 トグルの本文が閉じています。質問をクリックして開き、中の+をクリックします。
  • 質問が違う順番で出ます。 新規トグルはパネルの上に載ります。各トグルをコントロールバーのドラッグハンドルで所定位置へドラッグします。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら