この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
Webページを作成する際に、単色背景ではなくグラデーションにしたい時がありますよね。
Elementorでは背景グラデーションにするのは、すごく簡単です。
さっそく設定方法を解説していきます。
Elementor公式動画から学ぶ
Elementor公式Youtube動画で分かりやすい動画がありました。(少しElementorのバージョンは古い操作画面です。)
動画で確認したい方はどうぞ。
背景グラデーションの設定方法
グラデーション設定画面を開く
背景グラデーションを設定するために、まずは下記の手順で設定画面までいきましょう。
- 新しいセクションの追加をクリック
- 追加したいウィジェットをドラッグ
- セクションセッティングのハンドル
をクリックしてセクションを編集 - スタイル > 背景 > グラデーションをクリック
グラデーションの設定を行う
- 色：最初のグラデーションカラーを設定できます。
- 場所：最初の色の位置を設定できます。スプレッドの設定になります。
- 2つ目の色：2つ目のグラデーションカラーを設定できます。
- 場所：2つ目の色の位置を設定できます。スプレッドの設定になります。
- タイプ：線状か放射状を選択できます。線状にすると直線状のグラデーション、放射状にすると規定位置からの放射のグラデーションになります。
- 角度：グラデーションの角度を設定できます。
角度やタイプを設定して好みのグラデーションに仕上げましょう。
応用編：グラデーションオーバーレイを活用する方法
画像背景+グラデーションにしたい場合
グラデーション単体ではなく、画像にグラデーションをかけたい場合もありますよね。
例えば下記画像のような感じです。
これはグラデーションオーバーレイを活用することで実現できます。
まず、先ほどと同じように「セクションを編集」>「スタイル」に進みます。
ここで背景画像を設定します。
次に「背景オーバーレイ」を設定します。
背景オーバーレイでグラデーション設定を行うと、画像の上にグラデーションがかかります。
基本的には先ほどのグラデーション設定と同じですが、「透明度」の設定を行うことで画像とグラデーションの透過具合が調整できます。
動画背景+グラデーションにしたい場合
動画を背景にしたい場合は動画アイコンをクリックしましょう。
次に動画背景の詳細設定をしていきます。
- 動画リンク：Youtubeリンクか動画ファイルのURLを入力します。
- 開始時間・終了時間：動画の開始タイミングと終了のタイミングを秒単位で設定できます。
- 背景フォールバック：動画背景はスマホ、タブレットでは起動しないため、動画と置き換えて表示する背景画像を設定できます。
背景動画の設定ができれば、あとのグラデーションオーバーレイの設定は上で説明した通りです。
まとめ
背景にグラデーションを設定するだけでグッとおしゃれ感を演出することができます。
お洒落なのに設定はすごく簡単ですので、ぜひ実践していってください。
