事例紹介を書く.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここでは顧客案件を3部構成で書きます。課題、解決、成果です。最後には7つの帯が 残ります。写真ヒーロー、主要数値付き概要、課題、写真横の解決、3つのカウンター、 引用、行動喚起です。1ページに多くの案件を並べるには代わりにポートフォリオギャラリーを作るを ご覧ください。

動画では代理店のNorthwind Retail向け仕事を紹介します。

はじめる前に

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

手順1: ヒーローを追加する

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。ホバーしてMore > Settingsを開きます。
  2. 選ぶのはHTML classes下のAlign text centerです。
  3. 開くのはStyleパネルで、Background image下でSelect Imageをクリックし、写真にチェックしてInsert selectedをクリックします。Background styleをCoverにします。
  4. 暗紺色Backgroundと白Font colorを選び、Saveをクリックします。写真読み込み中は色が出ます。
  5. セクションの+をクリックしてButtonを選びます。Titleに「サイトを見る」、Linkに顧客URL、TypeにLight、SizeにLargeを設定してSaveをクリックします。
  6. クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。顧客名をHeading 2で入力し、下に1行概要を続けます。StyleパネルでFont colorを白にしてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。

手順2: 概要を追加する

  1. ヒーローにホバーしてAdd Section Belowをクリックします。新セクションにRowを追加し、グリッドアイコン (Column layout) をクリックして2/3 + 1/3プリセットを選び、Saveをクリックします。
  2. 広いカラムの+をクリックしてTextを選びます。「概要」をHeading 2で入力し、要約を加えてSaveをクリックします。
  3. 狭いカラムの+をクリックしてTextを選びます。指標ラベル「オンライン注文増」を入力してSaveをクリックします。
  4. 狭いカラムの+を再びクリックしてNumber counterを選びます。ラベルの上に載ります。Endに32、Suffixに%、Thousands separatorにComma、Speedに2500を設定してSaveをクリックします。

カウンターに独自ラベル欄はありません。下のTextエレメントがその役目です。

手順3: 課題を追加する

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

手順4: 解決を追加する

  1. 4つ目のセクション、次にRowを追加します。2つの均等カラム付きで入ります。
  2. 左カラムの+をクリックしてTextを選びます。「解決」をHeading 2で入力し、作った内容を説明してSaveをクリックします。
  3. 右カラムの+をクリックしてImageを選びます。Select Imageをクリックし、納品物の写真にチェックしてInsert selectedをクリックします。SEOパネルでAlt attributeを入力してSaveをクリックします。

手順5: 成果を追加する

  1. 5つ目のセクションを追加し、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで紺色Backgroundと白Font colorを選びます。Saveをクリックします。
  2. セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 各カラムにTextラベルを先に入れ、次にNumber counterを上に置きます。手順2通りです。End 32にSuffix %、End 2にSuffix s、End 15000です。

手順6: 引用を追加する

  1. 6つ目のセクションを追加します。
  2. セクションの+をクリックしてBlock quoteを選びます。顧客の言葉を入力し、Citeに氏名と役職を入れてSaveをクリックします。

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

  1. 7つ目のセクションを追加し、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで紫Backgroundと白Font colorを選びます。Saveをクリックします。
  2. セクションの+をクリックしてButtonを選びます。Titleに「お問い合わせ」、Linkに/contact、TypeにLight、SizeにLargeを設定してSaveをクリックします。
  3. クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「はじめませんか？」をHeading 2で入力し、1行加えます。Font colorを白にしてSaveをクリックします。

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

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

表示結果

顧客名とサイトを見るボタンが写真上に中央寄せで座ります。概要は要約横に32%を示し、表示域に入ると数え上がるのが見えます。課題は灰色帯に立ち、解決は写真の横に座ります。

紺色帯では3つの成果が表示域に入ると数え上がります。32%、2s、15,000です。顧客の引用と紫のお問い合わせ帯でページを締めます。

図通りにならない場合

  • ヒーロー写真がセクションいっぱいに広がりません。 Background styleがTheme defaultsのままです。セクションのStyleパネルを開き、Coverにします。
  • 最後のカウンターが15000とカンマなしで出ます。 Thousands separatorがNoneのままです。カウンター設定を開き、Commaを選びます。
  • ラベルがカウンターの上にあります。 カウンターがラベルより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルでラベルをカウンター下へドラッグします。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら