イベントページを作る.

DXPR Builderを学ぶページを作るチュートリアル

ここでは1イベントのページを作ります。日付と今すぐ申込むボタン付き写真 ヒーロー、地図横の詳細、登壇者カード、申込帯です。オープンキャンパス、講演、 ウェビナーに使います。1スクロールページのサイト全体には代わりにシングルページサイトを作るを ご覧ください。

動画では大学オープンキャンパスのページを作ります。

はじめる前に

  • ロールが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に申込ページ、TypeにLight、SizeにLargeを設定してSaveをクリックします。
  6. クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。イベント名をHeading 2で入力し、日付とキャッチコピーを続けます。StyleパネルでFont colorを白にしてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。

手順2: 詳細と地図を追加する

  1. ヒーローにホバーしてAdd Section Belowをクリックします。新セクションの+をクリックしてRowを選びます。2つの均等カラムが必要な分割です。
  2. 左カラムの+をクリックしてTextを選びます。「イベント詳細」をHeading 2で入力し、日付、会場、連絡先を1行ずつ加えてSaveをクリックします。
  3. 右カラムの+をクリックしてMapを選びます。会場のAddressを入力し、Map heightを320にしてSaveをクリックします。

手順3: 登壇者を追加する

  1. 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
  2. セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 各カラムの+をクリックしてCardを選びます。More > Settingsを開き、Headerにセッション名、Titleに登壇者の氏名と役職を設定してSaveをクリックします。

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

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

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

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

さらに進む

動画にはありません。

  • 登壇者写真: カードの+をクリックして略歴Textを追加し、カードの+を再びクリックしてImageを追加します。テキストの上に載ります
  • 濃い写真: ヒーローのBackground effectsパネルでBackground effectをGradientにします。同じ暗色を60%程度の不透明度でStart colorとEnd color
  • 予定表: Textエレメントを追加し、Tableボタンで時刻、セッション、登壇者の表を挿入します
  • ページ内申込: ページにフォームを追加する

表示結果

イベント名、日付、今すぐ申込むボタンが写真上に白で中央寄せに座ります。下には左半分に詳細、右に会場地図が載ります。3つの登壇者カードが灰色帯に立ち、紫帯が申込むでページを締めます。

図通りにならない場合

  • ヒーロー写真がセクションいっぱいに広がりません。 Background styleがTheme defaultsのままです。セクションのStyleパネルを開き、Coverにします。
  • 地図が違う場所を示しています。 Google Mapは入力通り住所を検索します。郵便番号、市、国をAddressに加えて保存し直します。
  • カードを追加しても設定ダイアログが出ません。 カードは空で開き、ダイアログは出ません。カードにホバーしてMore > Settingsを開き、HeaderとTitleを入力します。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら