Diviでブレンドされたグラデーションオーバーレイを使用して視差画像の背景を作成する方法
公開: 2022-08-03以前のバージョンの Divi では、グラデーション オーバーレイを視差背景画像に追加することは組み込みオプションではありませんでした。 しかし、Divi の新しい背景オプション (およびグラデーション ビルダー) を使用すると、無数のグラデーション オーバーレイ デザインを使用して美しい視差背景を簡単に作成できます。
このチュートリアルでは、Divi の背景オプションを使用して、True と CSS Parallax の両方の方法を使用して背景画像とブレンドするカラフルなグラデーション オーバーレイを追加する方法を紹介します。
スニークピーク
このチュートリアルで作成する背景デザインを簡単に見てみましょう。
この最初のものには、True Parallax メソッドを使用して背景画像で使用されるカラー ブレンド モードのグラデーション オーバーレイがあります。
CSS Parallax Method を使用した同じデザインがこちらです。 グラデーションが背景画像に固定/添付されたままになるため、単なるレイヤーではなく実際の画像の一部のように見えることに注意してください。
これは、ブレンド モードを使用せずに半透明のカラー ストップを使用したグラデーション オーバーレイの例です。
コンセプト
この設計の基本的な考え方には、次の 2 つの手順が含まれます。
1. グラデーション ビルダーを使用してセクションの背景グラデーションを作成し、グラデーションが背景画像の上に配置されるようにします。
2. 視差方式の 1 つとカラー ブレンド モードを使用する同じセクションに背景画像を追加します。
これにより、ページを下にスクロールするときに移動する視差画像にカラフルなグラデーションを重ねることができます。 カラー ブレンド モードは、グラデーション オーバーレイを画像とマージして、視差で見栄えのする美しい画像を作成します。
レイアウトを無料でダウンロード
このチュートリアルのデザインを実際に使用するには、まず下のボタンを使用してダウンロードする必要があります。 得るために
ダウンロードにアクセスするには、以下のフォームを使用して Divi Daily メーリング リストに登録する必要があります。 新しいものとして
サブスクライバーは、さらに多くの Divi の利点と無料の Divi レイアウト パックを毎週月曜日に受け取ります! すでに
下にメールアドレスを入力し、ダウンロードをクリックしてください。 「再購読」したり、余分な電子メールを受信したりすることはありません。
無料でダウンロード
Divi ニュースレターに参加すると、究極の Divi Landing Page Layout Pack のコピーに加えて、その他のすばらしい無料の Divi リソース、ヒント、およびトリックをメールでお送りします. 従うと、すぐにDiviマスターになります. すでに購読している場合は、下にメールアドレスを入力し、ダウンロードをクリックしてレイアウトパックにアクセスしてください。
購読に成功しました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください!
セクション レイアウトを Divi ライブラリにインポートするには、次の手順を実行します。
- ディビ ライブラリに移動します。
- ページの上部にある [インポート] ボタンをクリックします。
- 移植性ポップアップで、インポートタブを選択します
- コンピューターからダウンロード ファイルを選択します (最初にファイルを解凍し、JSON ファイルを使用してください)。
- 次に、インポートボタンをクリックします。
完了すると、セクション レイアウトが Divi Builder で使用できるようになります。
チュートリアルに行きましょうか。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Divi テーマをインストールして有効にします。
- WordPress で新しいページを作成し、Divi Builder を使用してフロント エンド (ビジュアル ビルダー) でページを編集します。
- オプション「Build From Scratch」を選択します。
- 空白のキャンバスを用意して、Divi でデザインを開始しましょう!
Diviでブレンドされたグラデーションオーバーレイを使用して視差画像の背景を作成する方法
1. 記入行と見出しテキストを作成する
このチュートリアルでは、セクションの背景デザインに焦点を当てますが、通常の使用例でデザインがどのように見えるかをよりよく理解するために、塗りつぶし行と見出しを追加することは理にかなっています.
まず、ビルダーの既存のセクションに 1 列の行を追加します。
次に、テキスト モジュールを行/列に追加します。
テキスト設定
テキスト モジュールの設定を開きます。 [コンテンツ] タブで、本文のコンテンツに H2 見出しを追加します。
<h2>Say Hello to Divi</h2>
[デザイン] タブで、見出しオプションと最大幅を次のように更新します。
- 見出し 2 フォント: インテル
- 見出し 2 フォントの太さ: 太字
- 見出し 2 テキストの色: #fff
- 見出し 2 テキスト サイズ: 8vw
- 見出し 2 行の高さ: 1.2em
- 見出し 2 テキストの影: スクリーンショットを参照
- 見出し 2 テキストの影のぼかしの強さ: 0.28em
- 見出し 2 テキストの影の色: #10076d
- 最大幅: 50%
行の設定
見出しが配置されたので、行のサイズと間隔を更新して応答性を高めましょう。
行設定を開きます。 [デザイン] タブで、次を更新します。
- 幅: 100%
- 最大幅: 80vw
- パディング: 15vw 上部、15vw 下部
2.セクションのグラデーション背景をデザインする
塗りつぶしコンテンツが完成したので、セクションのグラデーション背景のデザインを開始する準備が整いました。
背景のグラデーション設定
セクションの設定を開きます。 [コンテンツ] タブで、背景オプションの下にあるグラデーション タブを選択し、グラデーション オプションを次のように更新します。
- 勾配停止 1: #0094ff (0% で)
- 勾配停止 2: #ff00c7 (25% で)
- 勾配停止 3: #0094ff (50%)
- 勾配停止 4: #ff00c7 (75%)
- 勾配停止 5: #0094ff (100%)
- グラデーションの種類: 円形
- グラデーションの位置: 左下
- 背景画像の上にグラデーションを配置: はい
3.カラーブレンドモードで視差背景画像を追加する
グラデーションのデザインが完成したら、視差の背景画像を追加する準備が整いました。 次に、カラー ブレンド モードを適用して、グラデーション デザインと背景画像をブレンドし、美しい視差背景デザインを作成します。
背景画像の設定
セクションの背景オプションで、[背景画像] タブを選択し、背景画像をアップロードします。 以下を更新します。
- 視差効果を使用: はい
- 視差方式: 真の視差
- 背景画像のブレンド: 色
カラー ブレンド モードを使用する理由
カラー ブレンド モードは、イメージのグレースケール バージョンをグラデーションの色 (色相と彩度) とブレンドします。 これにより、まったく新しい配色で画像の視覚的な品質が維持されます。
4.背景マスクを追加します（なぜですか？）
デザインを仕上げるために、見出しの後ろに背景マスクを追加して、テキストをもう少しポップにし、視差効果を強調しましょう。
背景マスク設定
セクションの背景オプションで、[背景マスク] タブを選択し、次を更新します。
- マスク: ブレード
- マスク変換: 水平反転、反転
- マスクサイズ: カスタムサイズ
- マスク幅：72vw
- マスク位置: 右上
5. テスト用に一時的なスクロール スペースを追加する
最終的な結果を確認する前に、セクションの上下にスペースを追加して、パララックス効果を確認するのに十分なスクロール スペースを確保する必要があります。 これを行うには、セクションに次のマージンを追加するだけです。
- マージン: 80vh 上、80vh 下
セクションを独自のページに追加するときは、このスペースを削除することを忘れないでください。
最終結果
ライブページで最終結果を見てみましょう。
CSS Parallax Method を使用した同じデザインがこちらです。 グラデーションが背景画像に固定/添付されたままになるため、単なるレイヤーではなく実際の画像の一部のように見えることに注意してください。
ブレンド モードなしでグラデーション オーバーレイを使用する
このデザインのブレンド モードは気に入っていますが、視差の背景画像に従来のグラデーション オーバーレイが必要だと感じるかもしれません。
たとえば、デザインにブレンド モードを追加せずに、各グラデーション カラー ストップに半透明の色を与えるだけにすることもできます。 これにより、グラデーション オーバーレイの背後にある背景画像のより微妙な表現を確認できます。
これを行うには、各色の不透明度を 72% 程度に下げてから、背景画像のブレンド オプションを通常に戻します。
これがどのように見えるかの例を次に示します。
もっとグラデーションを試してみてください！
グラデーション ビルダーを使用すると、さらに多くの色とグラデーション タイプを作成して、これらの層状の背景デザインを際立たせることができます。 より多くの背景グラデーション デザインの可能性のライブ デモを確認できます。
最終的な考え
ブレンドされたグラデーションオーバーレイを使用した視差背景デザインの作成は、Divi の組み込みの背景オプションを使用して簡単に行うことができます。 これまでにないほど、Divi で Photoshop のパワーを発揮します。 無数のグラデーション カラー ストップと位置を使用して、さまざまな色の組み合わせを自由に試してみてください。 さらに、さまざまなブレンド モードを試すこともできます。
うまくいけば、これはあなた自身のウェブサイトや次のプロジェクトに役立つでしょう.
コメントであなたからのご連絡をお待ちしております。
乾杯！