チームディレクトリーを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここではチームページを作ります。中央寄せヘッダー、3つ目の下にLinkedInリンク付きの リーダーカード3枚、チームカード4枚のグリッドです。全同僚を探しやすくする場合に 使います。会社ページ内の短いチーム部門には代わりに会社紹介ページを作るを ご覧ください。

動画では物流会社のチームページを作ります。

はじめる前に

  • ロールはEdit with DXPR Builder権限を持ちます。
  • ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。
  • 新規エレメントはセクション・カラムの上に載ります。そのためソーシャルリンクは上のカードより先に入れます。

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

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
  2. セクションにホバーしてMore > Settingsを開きます。HTML classes下でAlign text centerを選び、Saveをクリックします。
  3. セクションの+をクリックし、ContentタブからTextを選びます。
  4. 「チーム紹介」をHeading 2で入力し、紹介1行を加えてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。

手順2: リーダーカードを追加する

  1. セクションにホバーしてAdd Section Belowをクリックします。新セクションのMore > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
  2. セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 1つ目のカラムの+をクリックしてCardを選びます。More > Settingsを開き、役職をHeaderに、氏名をTitleに設定してSaveをクリックします。
  4. 2つ目のカラムにCardを同じ方法で追加します。
  5. 3つ目のカラムの+をクリックしてSocial linksを選びます。2つの記入例付きで入ります。1行目の「Facebook」をlinkedinに書き換え、横にプロフィールURLを入力します。2行目を×で消し、StyleをCircle、Sizeを2xにしてSaveをクリックします。
  6. 同じカラムの+をクリックしてCardを選びます。リンクの上に載ります。HeaderとTitleを同様に設定してSaveをクリックします。
  7. セクションの+をクリックしてTextを選びます。ローの上に載ります。「リーダーシップ」をHeading 2で入力してSaveをクリックします。

手順3: チームグリッドを追加する

  1. 3つ目のセクションはAdd Section Belowで追加し、次にRowを追加します。グリッドアイコン (Column layout) をクリックし、1/4 + 1/4 + 1/4 + 1/4プリセットを選んでSaveをクリックします。
  2. 各カラムにCardを追加します。More > Settingsを開き、役職をHeaderに、氏名をTitleに設定してSaveをクリックします。
  3. セクションの+をクリックしてTextを選びます。ローの上に載ります。「チーム」をHeading 2で入力してSaveをクリックします。

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

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

さらに進む

動画にはありません。

  • 写真と略歴: カードの+をクリックして略歴Textを追加します。次にカードの+を再びクリックしてImageを追加します。テキストの上に載ります。人物名でAlt attributeを入力します。
  • 丸い写真: 各画像のStyleパネルでBorder radiusを設定します。値はピクセルで、最大100です。
  • ホバーの浮き上がり: カードのHover styleパネルでDrop shadowを2にします。
  • 自動更新チーム: 「チームメンバー」コンテンツタイプとGridビューのブロックディスプレイを作ります。Drupal Viewsタブからビューを挿入すると、編集者はページに触れず人を追加します。

表示結果

中央寄せの「チーム紹介」見出しがページ上部に座ります。灰色帯ではリーダーカード3枚が役職をヘッダーに氏名を下に示し、3つ目の下に丸いLinkedInアイコンがあります。「チーム」が次に4カード横並びで続きます。

図通りにならない場合

  • カードを追加しても設定ダイアログが出ません。 カードは空で開き、ダイアログは出ません。カードにホバーしてMore > Settingsを開き、HeaderとTitleを入力します。
  • ソーシャルリンクに「No matching brand icon found」と出ます。 ブランドが既知アイコン名ではありません。小文字で入力します (linkedinなど)。
  • LinkedInアイコンがカードの上にあります。 カードがリンクより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルでカードをリンク上へドラッグします。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら