セクションに色・写真・グラデーションを敷く.
すべてのセクションは色、写真、グラデーションで埋められます。色と写真はStyleパネルから設定します。セクション、ロー、カラム、エレメントのすべてにあります。セクションにはグラデーション、固定・パララックス写真、YouTube動画用のBackground effectsパネルが追加されます。例ではネイビーのセクションに都市の写真、白テキスト、上からのグラデーションを付けます。
動画ではセクションの背後に写真を追加し、グラデーションで覆っています。
色と写真を追加する
- 空のコンテンツエリアでAdd Elementsをクリックし、LayoutタブからSectionを選びます。
- セクションにホバーしてMore > Settingsを開きます。
- 開くのはStyleパネルです。
- 選ぶのはBackground用の濃いネイビーのスウォッチです。
- 選ぶのはFont color用の白です。
- 対象はBackground image配下で、Select Imageをクリックします。メディアライブラリーを検索し、写真にチェックしてInsert selectedをクリックします。
- 設定するのはBackground styleで、Coverにします。
- 設定するのはBackground positionで、Center centerにしてSaveをクリックします。
- セクションの+をクリックし、ContentタブからTextを選びます。
- 見出し(例:
Evening lectures)とその下に1行を入力します。見出しはHeading 2に設定し、エディターツールバーで両行を中央揃えにします。 - 開くのはStyleパネルで、Font colorを白に設定してSaveをクリックします。
グラデーションを追加する
- セクションにホバーしてMore > Settingsを再度開きます。
- 開くのはBackground effectsパネルで、Background effectをGradientに設定します。
- 選ぶのはStart colorとEnd colorで、Saveをクリックします。
- ツールバーのSaveをクリックし、ビューメニュー(目のアイコン)を開いてPreviewを選びます。
表示内容
最初の手順の後、写真は白見出しの背後でセクション全体を埋めます。Coverは収まらない部分を切り取り、Center centerは写真の中央を表示し続けます。ネイビーの色は写真の読み込み中か、写真が届かない箇所にのみ表示されます。
グラデーションは上部の開始色から下部の終了色へブレンドします。写真の上に重なります。不透明な色は写真を完全に覆い、透明度のある色は写真を透けさせます。
設定
Styleパネル(セクション・ロー・カラム・エレメント共通)
| 設定 | 動作 | デフォルト |
|---|---|---|
| Background | カラーピッカーまたはテーマスウォッチからの塗り色 | なし |
| Background image | メディアライブラリーからの画像。選択はSelect Image | なし |
| Background style | Coverはエレメントを埋めて切り取ります。Containは全体を表示し、隙間が残る場合があります。No repeatは等倍で1回表示します。Repeatはタイル状に敷き詰めます | Theme defaults |
| Background position | 切り取り時に表示され続ける部分です。例はCenter centerやLeft top | Theme defaults |
AI画像生成を設定している場合、Background imageはプロンプトも受け付けます。詳しくはAI画像生成をご覧ください。
Background effectsパネル(セクションのみ)
| 背景エフェクト | 動作 | 追加設定 |
|---|---|---|
| Simple image(デフォルト) | 写真はページと一緒にスクロールします | なし |
| Fixed image | 写真は固定され、ページがその上をスクロールします | なし |
| Parallax image | 写真はページよりゆっくり動きます。例はヒーローセクションをご覧ください | Parallax speed、Parallax mode(FixedまたはLocal)、Disable on mobile |
| Gradient | 2色がセクション全体にブレンドされます。写真があればその上に重なります | Start color、End color、Gradient direction(180度は上から下へ)、Start position、End position |
| YouTube video | ミュートされたYouTube動画がセクションを埋めます。繰り返すにはLoopにチェックします | YouTube video URL、Video options、Start time in seconds、Stop time in seconds |
固定・パララックスエフェクトはStyleパネルで設定した写真を動かします。YouTube動画に写真は不要です。
背景が表示されない場合
- Background effectsパネルがありません。セクションにのみあります。セクション(ロー、カラム、エレメントではなく)にホバーしてMore > Settingsを開きます。
- 写真が切れています。 Coverはセクションに収まらない部分を切り取ります。主題を表示し続けるにはBackground positionを変更するか、Containを選びます。
- グラデーションが写真を隠しています。グラデーションは上に重なり、不透明な色は写真を覆います。カラーピッカーでStart colorとEnd colorの不透明度を下げます。
- セクションにグラデーションが表示されません。グラデーションには両方の色が必要です。Start colorとEnd colorを選びます。
- YouTube動画が再生されません。 YouTube video URLが空か、1つの動画へのリンクではありません。動画の完全なアドレス(例:
https://www.youtube.com/watch?v=の後にID)を貼り付けます。