2020年09月10日

-Elementor-背景のバリエーションを知ろう

こんにちは、SeekNextの木谷です。今日はElementorで設定できる背景のパターンをご紹介します。

大きく分けて

・ノーマル

・背景オーバーレイ

・グラデーションオーバーレイ

・動画

・スライドショー

ぐらいでしょうか。全然雰囲気が変わるので、いろいろ試してみてください!

ノーマル背景

今回は画像を設定していますが、色のみにすることも可能です。

設定はこちらの画面から、画像or色を選ぶだけ!

ちなみに、背景の固定はここから出来ますが注意書きにもあるようにこの固定はデスクトップのみでしか動作しません。

画像の位置やサイズも調整可能です。

背景オーバーレイ

こちらも画像・色それぞれ設定可能です。試しに先ほどの背景に画像を重ねてみました。チョイスによってはビシッとハマっていい感じになるんです!(サーフィンする人の上に波を重ねたり)

色のみを重ねる場合はこちら。

今回は黄色を重ねています。ちなみにopacityも簡単に調整ができるのでいい具合に数値を移動させてみてください。

グラデーションオーバーレイ

またガラッと雰囲気が変わりました!こちらは黄色と緑のグラデーションにしています。

ちなみに、タイプは「線」と「放射状」があり、放射状にするとこんな感じです。

この濃さや場所・opacityも変更できるので色々試してみたいですね!

動画

なんと動画も背景にできるんです!直接アップも可能ですが、YoutubeなんかがあるとURLを入力するだけでいいので容量も抑えることができます。

ちなみに、普通に動画を挿入するとこんな感じ。

下記のサンプルHPの一番下で動画を背景に使用しているので見てみてください。ちなみに、これはグラデーションオーバーレイも使用しています。かっこいい感じになりました!!

サンプル

スライドショー

こんな風にいくつか画像を選択するだけで勝手に出来ちゃいます!実際に使用するとどうなるかは試してみてのお楽しみとしましょう…!スピードやtransitionも選択可能なので、色々試してみてください!

いかがでしょうか?

Elementorでも、ただ背景を付けるだけではなくお洒落にデザインすることができます。ぜひ色々試してみてくださいー!