Childお問い合わせホームWordPressElementor【超カンタン】Elementorで背景グラデーションを設定する方法2019年3月9日SHAREツイートシェアはてブLINEWebページを作成する際に、単色背景ではなくグラデーションにしたい時がありますよね。Elementorでは背景グラデーションにするのは、すごく簡単です。設定方法を解説していきます。Elementor公式動画から学ぶElementor公式Youtube動画で分かりやすい動画がありました。(少しElementorのバージョンは古い操作画面です。)動画で確認したい方はどうぞ。背景グラデーションの設定方法グラデーション設定画面を開く背景グラデーションを設定するために、まずは下記の手順で設定画面までいきましょう。グラデーションをクリックグラデーションの設定を行う色:最初のグラデーションカラーを設定できます。場所:最初の色の位置を設定できます。スプレッドの設定になります。2つ目の色:2つ目のグラデーションカラーを設定できます。場所:2つ目の色の位置を設定できます。スプレッドの設定になります。タイプ:線状か放射状を選択できます。線状にすると直線状のグラデーション、放射状にすると規定位置からの放射のグラデーションになります。角度:グラデーションの角度を設定できます。角度やタイプを設定して好みのグラデーションに仕上げましょう。画像背景+グラデーションにしたい場合グラデーション単体ではなく、画像にグラデーションをかけたい場合もありますよね。下記画像のような感じです。これはグラデーションオーバーレイを活用することで実現できます。先ほどと同じように「セクションを編集」>「スタイル」に進みます。ここで背景画像を設定します。次に「背景オーバーレイ」を設定します。背景オーバーレイでグラデーション設定を行うと、画像の上にグラデーションがかかります。基本的には先ほどのグラデーション設定と同じですが、「透明度」の設定を行うことで画像とグラデーションの透過具合が調整できます。動画を背景にしたい場合は動画アイコンをクリックしましょう。次に動画背景の詳細設定をしていきます。:動画の開始タイミングと終了のタイミングを秒単位で設定できます。背景フォールバック:動画背景はスマホ、タブレットでは起動しないため、動画と置き換えて表示する背景画像を設定できます。背景動画の設定ができれば、あとのグラデーションオーバーレイの設定は上で説明した通りです。まとめ背景にグラデーションを設定するだけでグッとおしゃれ感を演出することができます。お洒落なのに設定はすごく簡単ですので、ぜひ実践していってください。JetPlugins一択!プラグインElementorでフリーハンドWebデザイン「絶対配置」が可能に!無料プラグインElementorでスマホ表示を2カラムにする方法この記事を書いた人Kuuuワードプレスを最も得意とし、Webマーケティング全般に詳しい。ネットで効率よく集客をしたい、収益の柱を増やしたいといった方にブログを中心としたマーケティングを教えている。