もくじ
Toggle前編のおさらい
前編では、 背景 の基本操作をご紹介致しました。ウィジェットのみならず、ページ、セクション、カラムといろいろな背景があり、組み合わせる事で、様々な表現が出来る事をお伝え致しました。今回は後編という事で、更に細かい設定や、背景を使った応用的表現をご紹介していきたいと思います。
前編をまだご覧になっていない方はこちらからどうぞ!
背景オーバーレイ
オーバーレイという言葉、わかりそうで分からない方もいるかと思います。直訳すると「重ねる」「覆う」「被せる」という意味です。つまり、背景の上に重ねたり、覆ったり、被せたり出来る背景を「背景オーバーレイ」といいます。
前編でご紹介しましたが、Elementorの階層としては、ページ背景>セクション背景>セクション背景オーバーレイ>カラム背景>カラム背景オーバーレイ>ウィジェット背景の順となります。
背景 オーバーレイの種類
まず、上にも書きましたが、背景オーバーレイが設定出来る箇所としては、セクションとカラムとなります。
背景オーバーレイに設定出来る背景タイプは、クラシック(単色カラー)と、クラシック(画像)、グラデーションの3タイプです。動画は背景オーバーレイには設定出来ません。
各種タイプの設定方法は前編と同様となりますので、忘れてしまった場合は、前編をご覧下さい。
背景 オーバーレイの透明度
背景と違い、背景オーバーレイには「透明度」という項目があります。背景オーバーレイを透明する事で下の背景が見え、背景オーバーレイを透明にしないほど、下の背景は見えなくなります。設定値は0(完全に透明)〜1(透明度なし)の間で設定出来ます。
上の画像はそれぞれの透明度を実際に設定した画像です。背景が単色のイエローで、背景オーバーレイは建物の画像です。一番上は背景オーバーレイが完全に透明の状態、つまり透明度0の場合です。徐々に透明度を1に近づけると背景オーバーレイに設定された建物写真がはっきりしてくるのがわかるかと思います。
CSSフィルター
CSSによる画像へフィルタをかける事が出来ます。
こちらをご覧下さい。
コントロール出来る項目としては「ぼかし」「明るさ」「コントラスト」「彩度」「Hue(色相)」です。背景がごちゃごちゃしていると、上に乗っかるコンテンツが見づらくなってしまったり、色が強すぎたりする場合は、CSSフィルターを使う事で、見やすくなったりもします。
特にホバーとCSSフィルターを使うと、面白い背景が出来ます(笑)
ボタンモード
これはレイヤー効果の様な働きをします。フォトショップなど画像加工ソフトを利用した事がある方だと分かりやすいかもしれません。どんな変化があるか見てみて下さい!
Elementor Pro 背景
背景にはElementor Proならではの項目があります。特にモーション(動き)に関する項目です。
Scrolling Effects(スクローリングエフェクト)
これも実際に動いているところを見て頂いた方がなんとなく分かるかもしれませんので、こちらをご覧下さい。
違いを分かりやすくする為、最初は添付を「固定」にして比較しています。次に、scrolling effectを「オン」にして、1つずつ試しています。
Vertical Scroll:スクロールに合わせ、縦位置を変化出来ます。
Horizontal Scroll:スクロールに合わせ、横位置を変化出来ます。
Transparency:透明度を変化させる事が出来ます。
Blur:ボケ感を変化させる事が出来ます。
Scale:背景画像のサイズをスクロールに合わせ、拡大縮小出来ます。
背景とコンテンツを組み合わせる事で、さらにScrolling Effectの効果はアップします!
す、すみません。あくまでサンプルという事で・・・(汗)
さらに、「Apply Effects On」で、モーションを実行するデバイスもデスクトップ・タブレット・モバイルとそれぞれ設定出来ます。例えば、モバイルをこの項目から削除すると、スマホから見た時はモーション効果をオフにします。
Mouse Effects(マウスエフェクト)
マウスの動きに合わせ、対象となるものを動かす事が出来ます。背景の場合は、「Mouse Track」という効果のみが使えます。マウスの動きに合わせて背景も動きます。
正直背景ではあまり使わないかと・・・というのは、薄い色やデザインの背景イメージであればまだ良いかと思いますが、写真やコントラストの強いイメージだと、正直うざいです(笑)とは言え、この効果を見た人はもっとも注目するコーナーかと思います。
まとめ
前編と後編に分け、背景についてレビューしてみました。いかがでしたでしょうか?特に背景オーバーレイはいろいろな活用方法があるかと思いますので、いろいろと試して見てはいかがでしょうか。
おそらくホームページのデザインで大きく印象を変えるのは背景かと思います。特にレイヤー感を上手に使ったサイトは見栄えもよく、プロ感が出せると思います。デザインについてはプロではないので、具体的なご提案は出来ませんが、ご自身の好きなサイトをまずは真似て見るのも良いかもしれません。
どうしてもElementorを使っていると、背景=セクションみたいな感覚になりがちですが、カラムやウィジェット、ときにページに設定してみると、意外とカッコ良くなるかもです!