サービスページを作る.

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

ここでは提供内容の一覧ページを作ります。ヘッダー、アイコン付き3サービス、写真横の サービス詳細、顧客ロゴ、行動喚起です。複数サービスを売る場合に使います。1つの 提案ページには代わりにマーケティングランディングページを作るを ご覧ください。

動画ではデジタル代理店のサービスページを作ります。

はじめる前に

  • ロールがEdit with DXPR Builder権限を持ちます。
  • メディアライブラリーに詳細用写真と顧客ロゴ4点があります。
  • ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。
  • DXPR CMSではこのページのテーマページタイトルを隠します。編集フォームでDXPR Theme Settingsを開き、DXPR Hide Regions下のPage Titleにチェックします。JumbotronのTitleがページ唯一のHeading 1になります。SEOに強いページを作るの説明通りです。
  • 新規エレメントはセクション・カラムの上に載ります。カラムのエレメントは逆順に追加するか、後からドラッグで整えます。

手順1: ヘッダーを追加する

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。ホバーしてMore > Settingsを開き、Styleパネルで紺色Backgroundを選んでSaveをクリックします。
  2. セクションの+をクリックし、ContentタブからJumbotronを選びます。
  3. 設定するのはTitleに「サービス紹介」、Leadに提供内容の1行を入れ、TypeはPrimaryのままSaveをクリックします。

手順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セットを選び、paletteを検索してアイコンをクリックします。SizeをVery Large (3x)にし、Icon utilitiesを開いてStyleをCircleにしてSaveをクリックします。
  5. 「開発」にcode、「マーケティング」にbullhornで繰り返します。

手順3: 1サービスを詳しく追加する

  1. 追加するのはAdd Section Belowで3つ目のセクションで、Rowを追加します。2つの均等カラム付きで入ります。
  2. 左カラムの+をクリックしてImageを選びます。Select Imageをクリックし、写真にチェックしてInsert selectedをクリックします。SEOパネルでAlt attributeを入力してSaveをクリックします。
  3. 右カラムの+をクリックしてButtonを選びます。Titleに「見積りを取る」、Linkに/contact、TypeにPrimaryを設定してSaveをクリックします。
  4. 右カラムの+を再びクリックしてTextを選びます。ボタンの上に載ります。「デザイン」をHeading 2で入力し、説明と内容物を加えてSaveをクリックします。

手順4: 顧客ロゴを追加する

  1. 4つ目のセクションを追加し、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで薄灰色Backgroundを選びます。Saveをクリックします。
  2. セクションの+をクリックしてMarqueeを選びます。各サンプル画像の×で3つのサンプル画像を消します。Select Imageをクリックし、ロゴを検索して4点にチェックし、Insert selectedをクリックします。Gray scaleをオンにしてSaveをクリックします。
  3. セクションの+を再びクリックしてTextを選びます。マーキーの上に載ります。「一流ブランドに選ばれています」をHeading 2で入力してSaveをクリックします。

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

  1. 5つ目のセクションを追加し、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をクリックします。

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

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

さらに進む

動画にはありません。

  • サービスごとの詳細部門: 開発とマーケティングに手順3を繰り返します。2つ目以降のロー設定でMirror rowをオンにすると、タブレットとデスクトップで写真が左右交互になります。
  • ジャンプリンク: 各詳細セクションのHTML IDを設定します (design、development、marketing)。各概要テキスト下にButtonを追加し、Link #designなどにします。
  • 推薦文: ロゴの上に顧客ごとにBlock quoteを追加します。

表示結果

紺色帯がページを開き、「サービス紹介」が白の大きな文字で1行概要の上に載ります。3つの中央寄せサービスが続き、各サービスは名と行の上に丸囲みアイコンがあります。デザインは写真、説明、見積りを取る付きで独自帯を得ます。灰色顧客ロゴが薄い帯に流れ、紫帯がページを締めます。

図通りにならない場合

  • マーキーにサンプルロゴが残っています。 3つのサンプル画像は消すまで残ります。マーキー設定を開き、各サンプル画像の×をクリックして保存します。
  • ロゴがカラーのままです。 Gray scaleがオフです。マーキー設定を開き、オンにしてSaveをクリックします。
  • アイコンに円が付きません。 StyleはGeneralではなくIcon utilitiesパネルにあります。アイコン設定を開き、Icon utilitiesを開いてStyleをCircleにします。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら