複数カラムのコンテンツを作る.

Learn DXPR BuilderBuild pagesVolg een tutorial

ここでは最も使う4つのカラム配置を1ページに作ります。サイドバー付きコンテンツ、 均等2分割、3等分、4等分です。各配置の上に見出しを付けます。どのプリセットがどの コンテンツに向くか学ぶ場合に使います。全ロー設定はローとカラムを ご覧ください。

動画では自治体のごみ収集ページを作ります。

はじめる前に

  • ロールがEdit with DXPR Builder権限を持ちます。
  • ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。
  • 新規エレメントはセクションの上に載ります。そのため各見出しはローより後に入れます。上に載るからです。

配置を選ぶ

Layout Best for Preset
サイドバー付きコンテンツ 関連リンク付き記事 2/3 + 1/3
均等2分割 比較、ビフォーアフター ローの既定値
3等分 特長紹介、サービス 1/3 + 1/3 + 1/3
4等分 統計、小さなカード 1/4 + 1/4 + 1/4 + 1/4

新しいRowは2つの均等カラム付きで入ります。他の全配置はローのグリッド アイコン (Column layout) から来ます。

手順1: サイドバー付きコンテンツ

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
  2. セクションの+をクリックしてRowを選びます。グリッドアイコン (Column layout) をクリックし、2/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 広いカラムの+をクリックし、ContentタブからTextを選びます。記事を入力し、最初の行をHeading 3にしてSaveをクリックします。
  4. 狭いカラムの+をクリックしてTextを選びます。「関連」をHeading 4で入力し、関連ページごとに1行加えてSaveをクリックします。
  5. セクションの+をクリックしてTextを選びます。ローの上に載ります。「サイドバー付きコンテンツ」をHeading 2で入力してSaveをクリックします。

手順2: 均等2分割

  1. セクションにホバーしてAdd Section Belowをクリックします。新セクションのMore > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
  2. セクションの+をクリックしてRowを選びます。2つの均等カラムが既定なので変更は不要です。
  3. 各カラムにTextエレメントを追加します。「Before」と「After」をHeading 4で1行ずつ付けます。
  4. 手順1と同様に見出し「均等2分割」を追加します。

手順3: 3等分

  1. 追加するのはAdd Section Belowで3つ目のセクションで、Align text centerクラスを付けます。
  2. 追加するのはRowで、グリッドアイコン (Column layout) をクリックして1/3 + 1/3 + 1/3プリセットを選び、Saveをクリックします。
  3. 各カラムにTextエレメントを追加します。「紙」、「ガラス」、「生ごみ」をHeading 4で1行ずつ付けます。
  4. 見出し「3等分」を追加します。

手順4: 4等分

  1. 追加するのは薄灰色BackgroundとAlign text centerクラス付きで4つ目のセクションです。
  2. 追加するのはRowで、グリッドアイコン (Column layout) をクリックして1/4 + 1/4 + 1/4 + 1/4プリセットを選び、Saveをクリックします。
  3. 各カラムにTextエレメントを追加します。曜日をHeading 4で、収集物を付けます。
  4. 見出し「4等分」を追加します。

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

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

小さい画面での表示

カラムは幅768ピクセルから横に並ぶため、タブレットはデスクトップと同じ配置です。 携帯電話では各カラムが全幅になり、順序通り積み重なります。タブレットに別配置を 与えるにはローのグリッドアイコン (Column layout) をクリックして Add screen sizeを選びます。

さらに進む

動画にはありません。

  • 狭・広・狭: 1/4 + 1/2 + 1/4プリセットは長いテキストを空マージンで読みやすく保ちます。
  • Mirror row: ロー設定でオンにするとタブレットとデスクトップでカラムを入れ替えます。携帯電話は元の順序を保つため、1つ目のカラムが先に来ます。

表示結果

4つの帯が続き、各帯に見出しが上に載ります。記事と関連リンクが1つ目を共有し、2分割が灰色に載り、中央寄せ3等分が次に来ます。灰色の中央寄せ4等分がページを締めます。

図通りにならない場合

  • ローのカラム数が違います。 プリセットはレイアウトダイアログのSaveのクリック時にだけ適用します。ローのグリッドアイコン (Column layout) を再びクリックし、プリセットを選んでSaveをクリックします。
  • 見出しがローより下にあります。 見出しがローより先に入り、新規エレメントはセクションの上に載ります。コントロールバーのドラッグハンドルで見出しをロー上へドラッグします。
  • タブレットでカラムが縦に積まれます。 タブレットが幅768ピクセル未満です (縦持ち小型タブレットなど)。ローのレイアウトダイアログでAdd screen sizeを使ってその幅用の配置を追加します。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら