セクションを追加する.
セクションはページの1つの帯です。上部のヒーローや下の灰色の機能帯など です。各セクションに独自の背景、文字色、余白、高さを与え、中にローや コンテンツを入れます。セクションの追加と設定はこのページを、分割は ローとカラムを ご覧ください。
セクションを追加する
例ではクリニックの紺色ヒーローセクションを作ります。下には3カラムの薄灰色 セクションが続きます。
- 空ページのAdd Elementsをクリックし、Layoutタブから Sectionを選びます。既存セクションの下では、その下の丸いプラスの Add Section Belowをクリックします。
- セクションにホバーしてMoreを開き、Settingsを 選びます。
- セクション全体を設定します。ここではHTML classesの Align text center、紺色のBackground、白の Font colorです。Saveをクリックします。
- セクションの+をクリックして直接コンテンツを追加するか、 Rowを追加してカラムに分割します。
- ツールバーのSaveをクリックしてページを保存します。
BackgroundとFont colorはダイアログの Styleパネルにあります。新しいエレメントはセクションの上に付くので、 一番下のものから先に追加します。動画ではボタンを先に見出しの前に入れます。
表示結果
紺色の帯が画面いっぱいに端から端まで広がります。見出しとボタンは中央寄せの 箱 (セクションの内側コンテナー) に収まります。灰色セクションはすぐ下にはじまり、 3つの機能カラムが同じ中央寄せの箱に収まります。
新しいセクションには最初からHTML classesにクラス Vertical padding size 5 (py-5)が付きます。このクラスがコンテンツの 上下に余白を与えます。
セクションの設定
設定ダイアログには5つのパネルがあります。General、 Background effects、Animation、 Style、Hover styleです。Background effectsがあるのはセクションだけです。
| 設定 | パネル | 内容 | 既定値 |
|---|---|---|---|
| Full width | General | ローが中央寄せコンテナー内ではなく端から端まで広がります | Off |
| 100% height | General | セクションの高さがブラウザー画面以上になります | Off |
| Vertical centering | General | 中身より高いセクションの垂直中央にコンテンツが座ります | Off |
| HTML ID | General | アンカー名です。#nameへのリンクがこのセクションに飛びます |
Empty |
| HTML classes | General | ユーティリティークラスです。Align text centerやパディングサイズなど | Vertical padding size 5 (py-5) |
| Background effect | Background effects | Simple image、Fixed image、Parallax image、Gradient、YouTube video | Simple image |
| Background、Font color | Style | セクションの後ろの色とテキストの色です | None。テーマが決めます |
背景はFull widthの設定にかかわらず常にセクション全体に 広がります。画像効果はStyleパネルで選ぶBackground imageを 動かします。各効果は背景を ご覧ください。
余白を増減するには、Vertical padding size 5 (py-5)を小さいサイズや No vertical padding (py-0)に替えます。正確なピクセルには Styleパネルのボックスモデルを使います。 間隔の説明通りです。
セクションレシピ
| セクション | 作る設定 |
|---|---|
| Hero | 100% heightとVertical centeringをオン、Parallax image効果、見出しとボタン |
| Features | 明るいBackground、見出し、3カラムのロー |
| Call to action | 強いBackground、Align text center、短い1行とボタン |
| Testimonials | 明るいBackgroundと3カラムのロー。各カラムにBlock quote |
ヒーローセクションのデザインが 最初の1つを手順通りに作ります。
表示されない場合
- 空ページにAdd Elementsボタンがありません。 ページ作成アシスタントが
オフなので、空ページはChoose a templateだけを出します。空き領域を
クリックしてエレメントピッカーを開くか、Enable page creation assistantを
/admin/dxpr_studio/dxpr_builder/ai_settingsで オンにします。 - Add Section Belowボタンがありません。 ページ直下のセクションだけが 持ちます。カラムやタブの中のセクションにはありません。代わりにカラムの +をクリックします。
- Vertical centeringが効きません。 セクションの高さは中身の分だけ なので、中央寄せする余地がありません。100% heightも一緒にオンに します。
- Full widthが効かないようです。 背景はすでにセクション全体に広がって います。Full widthはローをその端まで動かすだけです。1カラムの短い テキストでは変化が見えにくいです。
- 追加していないセクションが現れます。 空ページでRowや コンテンツエレメントを選んだためです。全エレメントは周りにセクションが必要です。 DXPR Builderが代わりに追加しました。他と同じく設定を開きます。