WordPressのテーマビルダープラグイン「Elementor」のファンブログ

背景 攻略(後編)背景の種類と使い方

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
background_elementor

前編のおさらい

前編では、 背景 の基本操作をご紹介致しました。ウィジェットのみならず、ページ、セクション、カラムといろいろな背景があり、組み合わせる事で、様々な表現が出来る事をお伝え致しました。今回は後編という事で、更に細かい設定や、背景を使った応用的表現をご紹介していきたいと思います。

前編をまだご覧になっていない方はこちらからどうぞ!

背景オーバーレイ

 オーバーレイという言葉、わかりそうで分からない方もいるかと思います。直訳すると「重ねる」「覆う」「被せる」という意味です。つまり、背景の上に重ねたり、覆ったり、被せたり出来る背景を「背景オーバーレイ」といいます。

前編でご紹介しましたが、Elementorの階層としては、ページ背景>セクション背景>セクション背景オーバーレイ>カラム背景>カラム背景オーバーレイ>ウィジェット背景の順となります。

背景 オーバーレイの種類

まず、上にも書きましたが、背景オーバーレイが設定出来る箇所としては、セクションとカラムとなります。

背景オーバーレイに設定出来る背景タイプは、クラシック(単色カラー)と、クラシック(画像)、グラデーションの3タイプです。動画は背景オーバーレイには設定出来ません。

各種タイプの設定方法は前編と同様となりますので、忘れてしまった場合は、前編をご覧下さい。

背景 オーバーレイの透明度

背景と違い、背景オーバーレイには「透明度」という項目があります。背景オーバーレイを透明する事で下の背景が見え、背景オーバーレイを透明にしないほど、下の背景は見えなくなります。設定値は0(完全に透明)〜1(透明度なし)の間で設定出来ます。

bg_overlay

上の画像はそれぞれの透明度を実際に設定した画像です。背景が単色のイエローで、背景オーバーレイは建物の画像です。一番上は背景オーバーレイが完全に透明の状態、つまり透明度0の場合です。徐々に透明度を1に近づけると背景オーバーレイに設定された建物写真がはっきりしてくるのがわかるかと思います。

CSSフィルター

CSSによる画像へフィルタをかける事が出来ます。

おじさん
おじさん
まんまやな・・・


こちらをご覧下さい。

cssfilter_bgol

コントロール出来る項目としては「ぼかし」「明るさ」「コントラスト」「彩度」「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を使っていると、背景=セクションみたいな感覚になりがちですが、カラムやウィジェット、ときにページに設定してみると、意外とカッコ良くなるかもです!

関連記事

Elementor 背景 攻略(前編)背景の種類と使い方

Elementor公式サイト

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。