セクションを端から端まで広げる.

セクションのコンテンツは端から端まで広げることも、背景がウィンドウいっぱいに広がる中で中央のボックスに収めることもできます。決めるのはセクションの1つのトグル、Full widthです。例ではグレーのセクションを3カラムで作り、Full widthをオンにしてカラムを伸ばします。色や写真の塗りについては背景をご覧ください。

動画ではグレーのセクションを3カラムで作り、コンテンツを端から端まで広げます。

ボックス型セクションを作る

1. 空のコンテンツエリアでAdd Elementsをクリックし、LayoutタブからSectionを選びます。
2. セクションにホバーしてMoreを開き、Settingsを選びます。
3. 開くのはStyleパネルで、ライトグレーのBackgroundを選びます。
4. クリックするのはSaveです。グレーはすでにウィンドウいっぱいに広がっています。
5. セクションの+をクリックしてRowを選びます。
6. ローのグリッドアイコンをクリックし、3等分カラムのタイルを選んでSaveをクリックします。
7. 各カラムで+をクリックし、ContentタブからTextを選んでHeading 4と1行を入力し、Saveをクリックします。

3つのカラムはグレーの帯の中央ボックスに収まっています。

Full widthをオンにする

1. セクションのMoreを開き、Settingsを選びます。
2. 対象はGeneralパネルで、Full widthをオンにします。
3. クリックするのはSaveです。
4. DXPR BuilderツールバーのSaveをクリックします。
5. ビューメニュー(ツールバーの目のアイコン)を開き、Previewを選びます。

表示内容

グレーの帯の見た目は変わりません。変わったのはコンテンツボックスのみです。最初のカラムはセクションの左端から、最後のカラムは右端で終わります。

すべてのセクションは2つの部分から成ります。背景を担う外側のエレメントと、ローを収める内側のボックスです。Full widthが変えるのは内側のボックスのみです。オフでは最大幅付きで中央配置、オンではセクションの端まで伸びます。

設定

セクションのGeneralパネルには3つのレイアウトトグルがあり、すべてデフォルトでオフです。

ロー自体に幅設定はなく、セクションが決めます。

2つのパターン

• 端から端までの背景とボックス内のテキスト：定番のヒーローです。Full widthはオフのまま、背景はStyleまたはBackground effectsパネルで設定します。
• 端から端までのコンテンツ：カードや画像のストリップです。Full widthをオンにし、テキストがウィンドウ端に近すぎる場合はカラムにPaddingを付けます。

変更が反映されない場合

• Full widthをオンにしても何も変わりません。スマートフォンのような狭い画面では、ボックス版ですでに幅いっぱいになっています。ブラウザーウィンドウを広げて再度確認します。
• 背景がウィンドウ端まで届きません。テーマがページコンテンツをボックス領域に配置しているため、セクションはその領域までしか広がりません。テーマで全幅のページレイアウトまたはリージョンを選びます。
• テキストがウィンドウ端に接しています。それがFull widthの動作です。カラムのStyleパネルでPaddingを追加するか、Full widthはオフのままにします。

次のステップ

• セクションに色・写真・グラデーションを敷く：コンテンツ背後の帯をスタイルする。
• レイアウトをスマートフォンに対応させる：小画面でのカラムの振る舞いを制御する。