背景

この記事では、エディターで背景をデザインするさまざまな方法を紹介します。

基礎知識

背景はすべての コンテナ要素 に追加できます(セクションテンプレートもコンテナ要素から構築されるため、そこに追加することもできます)。

背景設定にアクセスするには、コンテナ要素 をダブルクリックし、左側に開いた設定パネルの 「背景」 タブを開きます。

画像背景オプション

背景には、常に次の 3 つの一般的なオプションがあります。

なし: 背景は使用されないことを意味します。
色/グラデーション: ここでは、背景に 1 色を使用するか、複数の色でグラデーションを作成するか決定できます。
要素: ここでは、背景として使用できる事前選択された要素を選択できます。

この記事では、すべてのオプションとそれぞれの設定について説明します。

画像背景親要素

ただし、子コンテナの1つに別の背景を追加することもできます。例えば、Evergreenテンプレートでは、親コンテナの背景は色付きで、子コンテナの背景は植物になっています。

常緑背景

カラー＆グラデーション背景

色/グラデーション をクリックすると、以下から選択できます。

色: 背景に表示される色を1つ選択できます

カラー背景

グラデーション: さまざまなオプションでグラデーション効果を設定できます
- 色: 好きなだけ色を追加し、グラデーションの割合を指定することができます。色は割合に応じて自動的に並べ替えられます。
- 反転: 設定した配色を反転できます
- ランダム化: 色とパーセンテージのランダムな組み合わせを生成します
- スタイル:
  - 線形グラデーションは、片側から反対側へと色を並べます。このオプションには、グラデーションの角度を選択できる角度設定と、グラデーションが背景を「移動する」期間設定があります。
  - 中心から外側に向かって色を並べる放射状グラデーション

どちらのオプションも、テキスト、画像、アイコンなど、Web サイト訪問者の注目を集める要素を上に追加するための優れたキャンバスを提供します。

要素の背景

要素タブには、背景に使用できるすべての要素の事前選択が表示されます。

どの要素を選択しても常に利用できる設定が 2 つあります。

カラーオーバーレイ: このオプションを使用すると、要素の上にオーバーレイを追加できます。例えば、背景を少し暗くして目立たせたい場合や、ウェブサイトのカラースキームに合わせて色付けしたい場合などに使用できます。
視差: これにより、スクロール中に背景コンテンツ (画像など) が前景コンテンツとは異なる「速度」で移動できるようになります。

画像

画像要素を使用すると、背景に画像を表示できます。画像をアップロードするか、ファイルから選択するか、無料のストック写真を閲覧することができます。

画像背景

次のオプションもあります。

遅延読み込み: 有効にすると、ページが読み込まれた後に画像が読み込まれ、ページ速度が向上します。
レスポンシブ: 有効にすると、Retina 画像とスマートフォンに最適化されたサイズが自動的に読み込まれます。
最適化： 有効にすると、ページ表示速度を向上させるために画像が自動的に圧縮されます。無効にすると、ファイルのサイズに関係なく元の画像が読み込まれます。また、レスポンシブ設定は利用できなくなります。
サイズ: さまざまなサイズのオプションを選択できます。
位置: 画像の位置を調整し、表示される画像の範囲を調整できます。 「方向」 で用意されているオプションを使用するか、 「カスタム」 でXオフセットとYオフセットに特定の値を設定できます。
代替テキスト: アクセシビリティを向上させ、画像を表示できない場合にコンテンツを表示できるようにするために、代替テキストを追加します。

画像スライダー

画像スライダーを使用すると、背景を移動する複数の画像を追加できます。

画像スライダー背景

次のオプションもあります。

各画像に 画像の説明 を追加できます
表示するスライド: スライドは画像です。つまり、同時に表示される画像の数を決定します。

画像スライダー背景2スライド

スクロールするスライド: 一度に移動する画像の数を指定します。
中央モード: スライドを中央に配置し、前のスライド/次のスライドの一部を表示します。表示するスライドの数を奇数に選択した場合に最適です。
アニメーション: ここでは、画像が移動するアニメーションをスライドモーションにするか、フェードモーションにするかを決定できます。
速度: アニメーションの速度を設定します。数値が低いほど、アニメーションは速くなり、より「激しい」ものになります。スムーズなトランジションを実現したい場合は、数値を大きくしてください。
自動: 有効にすると、アニメーションが自動的に開始されます。背景画像のスライダーに推奨されます。
一時停止: 画像が表示される時間を決定します。
ホバー時に一時停止: マウスをホバーすると、アニメーションが停止します。
ループ: 有効にすると、すべての画像が表示された後、スライダーが再び開始されます。
遅延ロード: 遅延ロードを使用するかどうかを決定できます。使用する場合は、オンデマンドまたはプログレッシブにする必要があります。
矢印: ウェブサイト訪問者が手動で画像を切り替えることができる両側に矢印を表示します。
ドット: ウェブサイト訪問者が手動で画像を切り替えることができるドットを下部に表示します。