Divi視差とビデオの背景に色とグラデーションのオーバーレイを追加する方法

色とグラデーションのオーバーレイは、視聴者の注意を引き付け、コンテンツを目立たせることができる優れたデザイン要素です。 それらは背景画像でうまく機能します。 セクション、行、または列に背景画像を追加し、色またはグラデーションオーバーレイを追加してから、その上にコンテンツを配置します。 ただし、1つの問題は、色とグラデーションのオーバーレイが、デフォルトでDiviの視差とビデオの背景で機能しないことです。

このチュートリアルでは、視差のある画像またはマーケットプレイスのサードパーティプラグインを使用したビデオを使用して、背景に色とグラデーションのオーバーレイを追加する方法を示します。 また、オーバーレイがセクションディバイダーで機能することも確認できます。 これには通常コードが必要ですが、適切なツールを使用すれば、誰もが実装するのは難しくありません。

始めましょう。

スニークピーク

このチュートリアルで作成するものを見てみましょう。

あるセクションに視差の背景があり、別のセクションにビデオの背景があるレイアウトを作成しています。 視差の背景にはグラデーションがあり、ビデオの背景には単色のオーバーレイがあります。 セクションディバイダーのスタイルも設定します。 ピザなので、ピッツェリアレイアウトパックのランディングページを使用しています。 これがデスクトップでの外観です。

これは、同じデザインが電話でどのように見えるかです。

標準のDivi視差とビデオの背景

標準のDiviツールを使用すると、セクション、行、および列に背景画像とビデオを追加できますが、それらのオーバーレイは制限されています。 背景画像の場合、グラデーションオーバーレイを追加できますが、単色のオーバーレイを追加することはできません。 ビデオのオプションにはオーバーレイは含まれていません。

背景画像のオプションには視差が含まれていますが、背景画像の視差を有効にすると、オーバーレイが画像の上に表示されなくなります。 オーバーレイを表示するように選択している場合でも、オフになっています。

Divi視差とビデオの背景に色とグラデーションのオーバーレイを追加する方法

Divi Background Plusと呼ばれるサードパーティのプラグインを使用して、視差とビデオの背景に色とグラデーションのオーバーレイを追加します。 このプラグインを使用してセクションディバイダーのスタイルを設定する方法についても説明します。

Divi BackgroundPlusをインストールします

Divi Background Plusは、Diviマーケットプレイスで入手できます。 始める方法を見てみましょう。 まず、Divi BackgroundPlusを購入してコンピューターにダウンロードします。

WordPressダッシュボードで、[プラグイン]に移動し、[新規追加]を選択します。 画面上部の[プラグインのアップロード]をクリックします。

[ファイルの選択]を選択し、コンピューター上のzipファイルに移動してファイルを選択し、 [今すぐインストール]をクリックします。

ファイルがアップロードされたら、[プラグインのアクティブ化]をクリックします。 他の設定は必要ありません。 これでプラグインを使用する準備が整いました。

Divi BackgroundPlusと呼ばれる新しいモジュールがDiviBuilderに追加されます。 このモジュールを使用して、視差広告ビデオの背景のグラデーションとカラーオーバーレイを作成します。 このチュートリアルに必要なのは、このプラグインとセクションの背景だけです。

Divi視差の背景にグラデーションオーバーレイを追加する

背景画像をアップロードするセクション設定を開きます。 この例では、Pizzeriaレイアウトパックの最初のセクションで背景画像を使用していますが、任意のセクション、行、または列にアップロードできます。

コンテンツ設定で画像タブを開きます。 視差効果の使用を有効にします。 デフォルト設定であるTrueParallaxを使用しています。 CSS視差も機能します。

視差効果を有効にすると、グラデーションが無効になりますが、グラデーションの設定はそのままです。 セクションの設定でグラデーションを使用するのではなく、Divi BackgroundPlusモジュールの設定にグラデーションを追加します。

このセクションですでに使用されているのと同じグラデーションを使用する場合は（私と同じように）、[グラデーション]タブを選択し、グラデーションのどこかを右クリックします。 [背景のグラデーションの色をコピー]をクリックします。

背景画像のあるセクションに新しいモジュールを追加することを選択し、 Divi BackgroundPlusを選択します。

[コンテンツ]タブの[レイアウト設定]で、セクション、行、または列に設定を適用することを選択します。 セクションを選択しています。

背景設定を開き、グラデーションタブを選択します。 デフォルトのグラデーションが自動的に適用されます。 背景が透けて見えるように不透明度を調整したり、独自のグラデーションを作成したり、レイアウトのグラデーションを使用したりできます。

レイアウトから1つを使用するには、右クリックして、[背景のグラデーションの色を貼り付け]を選択します。 これにより、色だけでなく、グラデーションの種類、方向、開始位置、終了位置、および背景画像の上にグラデーションを配置するための設定も適用されます。

結果は次のとおりです。 同じ画像とオーバーレイを含むオリジナルのバージョンができましたが、背景が真の視差で表示されるようになりました。

同じレイアウトが電話でどのように見えるかを次に示します。

Diviビデオの背景にカラーオーバーレイを追加する

最初のセクションの下に新しい通常のセクションを追加します。 このセクションに背景ビデオ、オーバーレイ用のDivi Background Plusモジュールを追加し、メッセージ、連絡先情報、およびオーバーレイ内のCTAを表示するためのテキストモジュールを追加します。

「召喚状」セクションのテキストを使用する予定です。 これは、Diviのレイヤーツールを使用して簡単に行うことができます。 これを行うには、コピーするセクションを右クリックして、[レイヤーに移動]を選択します。

あなたがコピー行をコピーして、選択したい行を右クリックします。

次に、行を配置するセクションを選択して右クリックし、[行の貼り付け]を選択します。 このセクションからコピーしたい両方の行に対してこれを実行しています。 または、このセクションをコピーして、Divi BackgroundPlusモジュールを追加することもできます。

これで、Divi Background Plus、いくつかのテキストモジュール、およびCTAを含む新しいセクションができました。

次に、セクションの背景にビデオを追加します。 ビデオの色はテキストの色とうまく機能しますが、オーバーレイを追加してもう少し目立たせたいと思います。 私のバックグラウンドビデオには、Pexelsの無料ビデオTimaMiroshnichenkoのMixedToppings Over aPizzaを使用しています。

Divi Background Plus設定を開き、レイアウトのセクションを選択します。

[背景]タブまで下にスクロールして、[色]オプションを選択します。 もちろん、あなたの色はあなたのビデオによって異なります。 私はビデオに赤い色合いを与えたかった。 私が使用した：

• rgba（150,0,0,0.15）

赤みがかったオーバーレイを使用した背景ビデオがデスクトップでどのように表示されるかを次に示します。

これが電話の同じレイアウトです。

さらにいくつかの例として、不透明度が30％の標準的な紫色の背景を使用します。

これは、不透明度が80％の標準的なオレンジです。

セクションディバイダーのスタイルを設定する

オーバーレイはセクションディバイダーでも機能します。 セクションディバイダーを追加するには、セクションの設定を開きます。

、[デザイン]タブに移動します仕切りを選択して、あなたが仕切りを追加したい場所に応じて、上または下を選択してください。 下部にのみ仕切りを追加しています。 [仕切りスタイル]というラベルの付いたドロップダウンボックスをクリックして、仕切りを選択します。

必要な仕切りスタイルを選択します。 2色の角度を作る5番目のスタイルを選択しています。

編集アイコンを選択して、カスタムカラーを追加します。 これは、仕切りが表示されていないセクションに表示される色です。 前の例でわかるように、デフォルトの色は白です。 16進コードとして色を追加するか、カラーピッカーから色を選択します。 ビデオの下のセクションの色の1つである色＃0d0d0dを追加しています。

• 色＃0d0d0d

ビデオには、そのセクションの下部にスタイル付きの仕切りがあります。 仕切りの透明な部分を通してビデオが表示されているのを見ることができ、それは両方のセクションとうまく調和しています。

結果

デスクトップとモバイルでレイアウトがどのように表示されるかを見てみましょう。

デスクトップ版を見てみましょう。 最初のセクションにグラデーションオーバーレイがある真の視差背景があります。 2番目のセクションには、カラーオーバーレイと、次のセクションから分離するセクション仕切りのある背景画像が含まれます。

スマートフォンでのレイアウトは次のようになります。 すべての要素はモバイルデバイスでうまく機能します。

終わりの考え

これが、Divi視差とビデオの背景に色とグラデーションのオーバーレイを追加する方法についての説明です。 Divi Background Plusを使用すると、構築と使用が簡単になります。 セクション、行、列で機能し、それらから簡単に選択できます。 すべてのカスタマイズは標準のDiviツールと設定であるため、使い慣れています。

これで、視差やビデオを無効にすることなく、背景に色やグラデーションのオーバーレイを含めることができます。

我々はあなたから聞きたい。 Divi Background Plusを使用して、視差画像とビデオの色とグラデーションのオーバーレイを作成しましたか？ コメントであなたがそれについてどう思うか教えてください。

Lauritta /shutterstock.com経由の注目の画像