ランディングページを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここでは1つの提案向けランディングページを作ります。写真ヒーローとデモを依頼する ボタン、アイコン付き3つの特長、2つの推薦文、締めの行動喚起です。目標1つの キャンペーン・製品ページに使います。1スクロールページのサイト全体には代わりにシングルページサイトを作るを ご覧ください。

動画ではInsightという分析製品向けページを作ります。

はじめる前に

  • ロールが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に/demo、TypeにLight、SizeにLargeを設定してSaveをクリックします。
  6. クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。見出しをHeading 2で入力し、下に見出し文を続けます。StyleパネルでFont colorを白にして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セットを選び、boltを検索してアイコンをクリックします。SizeをVery Large (3x)にし、Icon utilitiesを開いてStyleをCircleにしてSaveをクリックします。
  5. 2つ目のカラムにchart-line、3つ目にshieldで繰り返します。

手順3: 推薦文を追加する

  1. 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
  2. セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。
  3. 各カラムの+をクリックしてBlock quoteを選びます。引用を入力し、Citeに氏名と役職を入れてSaveをクリックします。

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

  1. 4つ目のセクションを追加し、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで紫Backgroundと白Font colorを選びます。Saveをクリックします。
  2. セクションの+をクリックしてButtonを選びます。Titleに「説明会を予約する」、Linkに/demo、TypeにLight、SizeにLargeを設定してSaveをクリックします。
  3. クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「Insightを自社データで見る」をHeading 2で入力し、1行加えます。Font colorを白にしてSaveをクリックします。

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

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

さらに進む

動画にはありません。

  • 見込み客フォーム: 最後のボタンの代わりにDrupal Blocksタブからウェブフォームブロックを挿入します。ページにフォームを追加する
  • 濃い写真: ヒーローのBackground effectsパネルでBackground effectをGradientにします。同じ暗色を60%程度の不透明度でStart colorとEnd color
  • 高いヒーロー: Styleパネルでヒーローセクションに上下100ピクセルのパディングを付けます
  • テンプレートから開始: 空ページでChoose a templateをクリックしてランディングページレイアウトを選びます。ページテンプレート

表示結果

見出し、見出し文、デモを依頼するボタンが写真上に白で中央寄せに座ります。3つの特長が続き、各特長は短い見出しと行の上に丸囲みアイコンがあります。2つの引用が灰色帯に横に並び、紫帯が説明会を予約するでページを締めます。

図通りにならない場合

  • アイコンに円が付きません。 StyleはGeneralではなくIcon utilitiesパネルにあります。アイコン設定を開き、Icon utilitiesを開いてStyleをCircleにします。
  • ヒーロー写真がセクションいっぱいに広がりません。 Background styleがTheme defaultsのままです。セクションのStyleパネルを開き、Coverにします。
  • アイコンが特長文の下にあります。 アイコンがテキストより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルでアイコンをテキスト上へドラッグします。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら