ナレッジベースを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここではヘルプセンターのトップページを作ります。紺色ヘッダー、アイコン付き3つのカテゴリーカード、人気記事2一覧、サポート行動喚起です。ヘルプが多くの記事に分散する場合に使います。短い一問一答一覧には代わりにFAQページを作るをご覧ください。

動画ではソフトウェア製品のヘルプセンターを作ります。

はじめる前に

ロールがEdit with DXPR Builder権限を持ちます。
ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。
新規エレメントはセクション・カラムの上に載ります。カラムのエレメントは逆順に追加するか、後からドラッグで整えます。

空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
セクションにホバーしてMore > Settingsを開きます。HTML classes下でAlign text centerを選びます。Styleパネルで紺色Backgroundと白Font colorを選び、Saveをクリックします。
セクションの+をクリックしてTextを選びます。「ヘルプセンター」をHeading 2で入力し、「今日はどのようなご用件ですか？」を加えます。StyleパネルでFont colorを白にしてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。

セクションにホバーしてAdd Section Belowをクリックします。新セクションにAlign text centerクラスを付けます。
セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
1つ目のカラムの+をクリックしてCardを選びます。More > Settingsを開き、Headerにカテゴリー名、Titleに記事数を設定してSaveをクリックします。
同じカラムの+をクリックしてIconを選びます。カードの上に載ります。Font Awesome Free Solidセットを選び、rocketを検索してアイコンをクリックします。SizeをExtra Large (2x)にしてSaveをクリックします。
2つ目のカラムにcredit-card、3つ目にscrewdriver-wrenchで繰り返します。

追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。
各カラムの+をクリックしてTextを選びます。記事タイトル3つを1行ずつ入力してSaveをクリックします。
セクションの+をクリックしてTextを選びます。ローの上に載ります。「人気記事」をHeading 2で入力してSaveをクリックします。

4つ目のセクションを追加し、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで紫Backgroundと白Font colorを選びます。Saveをクリックします。
セクションの+をクリックしてButtonを選びます。Titleに「サポートに連絡する」、Linkに/support、TypeにLight、SizeにLargeを設定してSaveをクリックします。
クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「必要な情報が見つかりませんか？」をHeading 2で入力し、1行加えます。Font colorを白にしてSaveをクリックします。

動画にはありません。

検索ボックス: ExtendでコアSearchモジュールをオンにします。ヘッダーセクションの+をクリックし、Drupal Blocksタブを開いてBlock: Forms: Search formを選びます。訪問者は/search/nodeに着きます。
クリックできるカード: カラムに先にLinkエレメントを追加し、そのLinkをカテゴリーページにします。次に中にCardを追加します。
記事リンク: 一覧の各タイトルを選んでツールバーのリンクボタンでリンクします。
カテゴリー追加: 同じプリセットの2つ目のRowを追加します。よくあるものはエディターの使い方、テンプレートとデザイン、APIと開発です。

紺色ヘッダーが「ヘルプセンター」で訪問者を白で迎えます。3つの中央寄せカテゴリーが続き、各カテゴリーは名と記事数のカード上にアイコンがあります。灰色帯に人気記事6件が2カラムに並び、紫帯がサポートに連絡するを出します。

カードを追加しても設定ダイアログが出ません。 カードは空で開き、ダイアログは出ません。カードにホバーしてMore > Settingsを開き、HeaderとTitleを入力します。
アイコンがカードの下にあります。 アイコンがカードより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルでアイコンをカード上へドラッグします。
紺色の上で見出しが暗いままです。 Textエレメントに独自Font colorがありません。Styleパネルを開き、Font colorを白にします。
再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。