製品ページを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここでは1製品のページを作ります。名、価格、今すぐ買うボタンの横に写真があり、 次に3つの特長、仕様一覧、販売の行動喚起が続きます。売るものなら何にでも使います。 複数プランの比較には料金表を追加します。

動画ではInsight Hubというハードウェア製品のページを作ります。

はじめる前に

  • ロールがEdit with DXPR Builder権限を持ちます。
  • メディアライブラリーに製品の写真があります。
  • ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。
  • 新規エレメントはカラムの上に載ります。そのため右カラムはボタンから上に作ります。

手順1: 製品を追加する

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
  2. セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。
  3. 左カラムの+をクリックしてImageを選びます。Select Imageをクリックし、製品写真にチェックしてInsert selectedをクリックします。SEOパネルでAlt attributeを入力してSaveをクリックします。
  4. 右カラムの+をクリックしてButtonを選びます。Titleに「今すぐ買う」、Linkにショップ、TypeにPrimary、SizeにLargeを設定してSaveをクリックします。
  5. 右カラムの+を再びクリックしてTextを選びます。ボタンの上に載ります。価格をHeading 2で入力してSaveをクリックします。
  6. クリックするのは+をもう1度で、Textを選びます。一番上に載ります。製品名をHeading 2で入力し、説明1行を加えてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。

手順2: 特長を追加する

  1. セクションにホバーしてAdd Section Belowをクリックします。新セクションにAlign text centerクラスを付けます。
  2. セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 1つ目のカラムの+をクリックしてTextを選びます。特長名をHeading 3で入力し、1行加えてSaveをクリックします。
  4. 同じカラムの+をクリックしてIconを選びます。テキストの上に載ります。Font Awesome Free Solidセットを選び、plugを検索してアイコンをクリックします。SizeをVery Large (3x)にし、Icon utilitiesを開いてStyleをCircleにしてSaveをクリックします。
  5. 2つ目のカラムにcloud、3つ目にbattery-fullで繰り返します。

手順3: 仕様を追加する

  1. 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
  2. セクションの+をクリックしてTextを選びます。「仕様」をHeading 2で入力し、仕様を1行ずつ続けてSaveをクリックします。

手順4: 行動喚起を追加する

  1. 4つ目のセクションを追加し、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで紫Backgroundと白Font colorを選びます。Saveをクリックします。
  2. セクションの+をクリックしてButtonを選びます。Titleに「営業に相談する」、Linkに/contact、TypeにLight、SizeにLargeを設定してSaveをクリックします。
  3. クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「Insight Hubは249ユーロから」をHeading 2で入力し、1行加えます。Font colorを白にしてSaveをクリックします。

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

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

さらに進む

動画にはありません。

  • 仕様表: 仕様1行ずつの代わりにテキストツールバーのTableボタンで表を挿入します。
  • ギャラリー: 単写真を製品写真のImage carouselに替えます。
  • プラン: 価格を料金表へリンクします。

表示結果

製品写真が左半分いっぱいに広がり、右に名、価格、今すぐ買うボタンがあります。3つの中央寄せ特長が続き、各特長は名と行の上に丸囲みアイコンがあります。仕様が灰色帯に立ち、紫帯が営業に相談するでページを締めます。

図通りにならない場合

  • 名前、価格、ボタンの順番が違います。 上から順に入れましたが、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルで所定位置へドラッグします。
  • アイコンに円が付きません。 StyleはGeneralではなくIcon utilitiesパネルにあります。アイコン設定を開き、Icon utilitiesを開いてStyleをCircleにします。
  • 紫の上で見出しが暗いままです。 Textエレメントに独自Font colorがありません。Styleパネルを開き、Font colorを白にします。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら