料金表を作る.
ここでは料金表を作ります。横に並ぶ3プランで、各パネルに価格、機能一覧、全幅 ボタンがあり、中央プランを強調します。料金ページや製品ページ内に使います。 周囲の製品ページ全体には製品ページを作るを ご覧ください。
動画では報告ツール向け3プランを作ります。
はじめる前に
- ロールがEdit with DXPR Builder権限を持ちます。
- ページをビルダーで開きます。新規はContent > Add content > Landing Page (
/node/add/landing_page) を開き、Saveをクリックします。 - 新規エレメントはコンテナーの上に載るため、各パネルではボタンを価格より先に入れます。
手順1: セクションとカラムを追加する
- 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
- セクションにホバーしてMore > Settingsを開きます。HTML classes下でAlign text centerを選びます。Styleパネルを開き、薄灰色Backgroundを選んでSaveをクリックします。
- セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。
- ローのグリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
手順2: 最初のプランを作る
- 1つ目のカラムの+をクリックし、ContentタブからPanelを選びます。
- パネルにホバーしてMore > Settingsを開きます。Titleに「Starter」を設定し、TypeはDXPRのままにしてSaveをクリックします。
- パネルの+をクリックしてButtonを選びます。Titleに「プランを選ぶ」、Linkに
/signup、TypeにPrimaryを設定します。カラムいっぱいに広げるにはBlock buttonをオンにしてSaveをクリックします。 - パネルの+を再びクリックしてTextを選びます。ボタンの上に載ります。価格をHeading 2で入力し、機能を1行ずつ加えてSaveをクリックします。
手順3: 他プランを作る
- 2つ目のカラムで手順2を「Professional」向けに繰り返します。パネルのStyleパネルで紫Backgroundを選び、ボタンのTypeをSuccessにして目立たせます。
- 3つ目のカラムで手順2を「Enterprise」向けに繰り返します。価格は「カスタム料金」です。
ヒント
中央カラムに目が行きます。一番売りたいプランをそこに置きます。
手順4: 見出しを追加する
- セクションの+をクリックしてTextを選びます。ローの上に載ります。
- 「プランを選ぶ」をHeading 2で入力し、「シンプルな月額料金。いつでも解約できます」などの1行を加えてSaveをクリックします。
手順5: 保存してプレビューする
- ビルダーツールバーのSaveをクリックします。
- ビューメニュー (eye icon、目のアイコン) を開き、Previewを選びます。
さらに進む
動画にはありません。
- 4プラン: 代わりに1/4 + 1/4 + 1/4 + 1/4プリセットを選んで4つ目のカラムを作ります。
- 人気バッジ: 強調パネルの上にTextエレメントを追加し、「一番人気」を太字にします。
- 年額と月額: ローの上に「月額 | 年額 (20%お得)」などのText行を追加します。行は静的です。動く切替には独自スクリプトのHTMLエレメントが必要です。
- 機能チェック: 各機能行の前にチェックマークを貼るか、一覧の上にIconエレメントを追加します。
表示結果
「プランを選ぶ」が灰色帯の3プラン上に中央寄せで座ります。各パネルにタイトルバーの名、価格、3つの機能、全幅のプランを選ぶボタンがあります。中央プランは紫に緑ボタンで目立ちます。
図通りにならない場合
- 設定ダイアログなしでパネルが開きます。 パネルは空で開き、ダイアログは出ません。パネルにホバーしてMore > Settingsを開き、Titleを設定します。
- PrimaryなどのパネルTypeに色が付きません。 テーマがそのパネルタイプをスタイルしません。TypeはDXPRのままにし、手順3通りパネルのStyleパネルでBackgroundを選びます。
- ボタンがテキストと同じ幅しかありません。 Block buttonがオフです。各ボタンの設定を開いてオンにします。
- 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。
次はこちら
- 製品ページ: 機能と料金付き全ページ用
- Cardエレメント: 別カードスタイル用
- Panelエレメント: 全パネル設定用