会社紹介ページを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここでは会社紹介ページを作ります。ミッションヘッダー、写真横の沿革、数え上がる 3つの数字、チームカード、締めの行動喚起です。1ページで自社を伝える場合に 使います。全同僚を挙げるページには代わりにチームディレクトリーを作るを ご覧ください。

動画ではロッテルダムのデザインスタジオ向けにページを作ります。

はじめる前に

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

手順1: ミッション見出しを追加する

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
  2. セクションにホバーしてMore > Settingsを開きます。Styleパネルを開き、暗いBackground見本を選んでSaveをクリックします。
  3. セクションの+をクリックし、ContentタブからJumbotronを選びます。
  4. 入力するのはTitleにミッション文で、「使い続けたいWebサイトを作ります」
  5. 入力するのはLeadフィールドに補足文で、「2012年から欧州ブランドと組むロッテルダムの24人スタジオです」
  6. 設定するのはTypeをPrimaryにします。プライマリー色上の白文字でSaveをクリックします。

手順2: 会社の沿革を書く

  1. セクションにホバーしてAdd Section Below (下の+) をクリックします。
  2. 新セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。ローのグリッドアイコン (Column layout) をクリックし、2/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 広いカラムの+をクリックしてTextを選びます。「沿革」をHeading 2で入力し、短い段落を2つ続けます。創業経緯と案件の進め方です。Saveをクリックします。
  4. 狭いカラムの+をクリックしてImageを選びます。
  5. クリックするのはSelect Imageで、Apply filtersでメディアライブラリーを検索して、オフィスやチームの写真にチェックし、Insert selectedをクリックします。
  6. 開くのはSEOパネルで、Alt attributeを入力してSaveをクリックします。

ヒント

沿革は短く、小見出しで区切ります。訪問者は読む前に流し見します。

手順3: カウンターで主要数値を出す

  1. 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
  2. セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 各カラムに数値ラベルのTextエレメントを入れます。「納品案件数」「営業年数」「再発注顧客」
  4. 各カラムで+を再びクリックしてNumber counterを選びます。ラベルの上に載ります。次を設定します。
    • End: 数値 (140, 12, 98)
    • Suffix: 該当する「+」や「%」
    • Thousands separator: Comma
    • Speed: 2500。数え終わるまでのミリ秒です
  5. 各カウンターでSaveをクリックします。

カウンターに独自ラベル欄はないため、Textエレメントが下にあります。

手順4: チームセクションを作る

  1. 追加するのはAdd Section Belowで4つ目のセクションです。
  2. セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 各カラムで+をクリックしてCardを選びます。More > Settingsを開き、Headerに氏名 (「ソフィア・アンデルセン」)、Titleに役職 (「クリエイティブディレクター」) を設定してSaveをクリックします。
  4. セクション自体の+をクリックしてTextを選びます。カードローの上に載ります。「チーム紹介」をHeading 2で入力し、中央寄せしてSaveをクリックします。

手順5: 締めセクションを追加する

  1. 追加するのはAdd Section Belowで最後のセクションで、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で入力し、「四半期に数社の新規顧客をお受けします」と続けます。StyleパネルでFont colorを白にしてSaveをクリックします。

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

  1. ビルダーツールバーのSaveをクリックします。
  2. ビューメニュー (eye icon、目のアイコン) を開き、Previewを選びます。
  3. ページをスクロールして全セクションを確認します。

さらに進む

動画にはありませんが、追加の価値があります。

  • 各カード内に略歴Textと顔写真Imageを置き、その下にSocial linksも置きます
  • 100% heightは画面いっぱいのヘッダーにする最初のセクション設定です

表示結果

プレビューに5つの帯が出ます。暗いヘッダーにミッション文とリード文が白で載ります。沿革が写真の横にあります。灰色帯の3つの数字は表示域に入ると0から数え上がります。

チーム見出しが3カード上に中央寄せで座り、各カードに氏名と役職があります。締め帯は白見出しを明るいお問い合わせボタン上に中央寄せします。作業続行は目メニューのEditを選びます。

図通りにならない場合

  • 空ページにAdd Elementsボタンがありません。 ページ作成アシスタントがオフなので、ページはChoose a templateだけを出します。代わりに空き領域をクリックしてエレメントピッカーを開きます。
  • 新しいエレメントが先に追加したものの上にできます。 ビルダーは新規エレメントをセクション・カラムの上に挿入します。コントロールバーのドラッグハンドルで所定位置へドラッグします。
  • Number counterやCardがピッカーにありません。 ビルダーユーザープロファイルが隠しています。管理者にElements下でのチェックをDXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile) で頼みます。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら