のパターンブレンドモードを使用して、ユニークな背景画像を作成しますか? Divi ?
の組み込みの背景パターン設定 Divi 目を引くデザインを作成し、背景画像にスタイルを追加できます サイトのWeb. ブレンド モード設定を使用して、パターンが背景画像とどのようにブレンドされるかを微調整できます。
このチュートリアルでは、パターン ブレンディング モードをページの背景画像に追加する方法の例をいくつか紹介します。 それらに従って、これらの外観を自分で再現するか、インスピレーションとして使用して独自のカスタム デザインを作成してください。
のは、始めましょう！
概要
これは、このチュートリアルで設計する内容のプレビューです。
最初のレイアウト
XNUMX 番目のレイアウト
XNUMX 番目のレイアウト
Divi 背景画像でパターン ブレンディング モードを使用する方法
事前定義されたレイアウトで新しいページを作成します
まず、ライブラリから事前定義されたレイアウトを使用します。 Divi。 このデザインでは、 « マリーナランディングページ 」は マリーナ レイアウト パック .
新しいページをあなたに追加する サイトのWeb タイトルを付けてから、[Divi Builder を使用] オプションを選択します。
この例では、Divi ライブラリから事前に作成されたレイアウトを使用するので、 レイアウトを参照.
レイアウトを見つけて選択する マリーナランディングページ.
選択 このレイアウトを使用 ページにレイアウトを追加します。
これで設計の準備が整いました。
最初のレイアウト
最初のデザインでは、最初のヘッダー画像にシェブロン パターンを追加します。 これにより、ヘッダーに視覚的な関心が追加されます。
適用するブレンドモードにより、パターンはより微妙になり、背景画像が表示されます.
まず、セクション設定を開き、セクションに移動します 経歴. タブをクリックします 背景パターン 選択 背景パターンを追加.
次に柄の種類を選びます。 ご覧のとおり、さまざまなテンプレートから選択できます。それらはすべて、以下のテンプレート設定によってさらにカスタマイズできます。
- パターン タイプ: 逆ヘリンボーン 2
「パターンブレンド」モードを追加
最後に、パターンのブレンド モードを設定します。 ブレンドモードを使用します やわらかい光 この例では。 このブレンド モードでは、パターンがより繊細になり、背景画像の邪魔にならなくなります。
- パターンブレンドモード: ソフトライト
結果
これが最初の例の最終的な設計です。
モバイル版はこちら。
XNUMX 番目のレイアウト
XNUMX 番目のレイアウトでは、背景画像とグラデーションにオーバーレイされた波のパターンを使用します。これは、ページの航海のテーマによく合います。
まず、セクションに移動します "使い方" セクション設定を開きます。
設定を開く 経歴、次にタブを選択します 背景パターンクリックします 背景パターンを追加.
このデザインでは、パターン タイプを使用します。 波.
- パータンタイプ: 波
次に、パターンの色を白に変更します。
- パターンカラー：#FFFFFF
パターンブレンドモードを追加
これで、ブレンド モードをパターンに追加できます。 パターンブレンドモードを オーバーレイ.
また発見： Divi: 「全幅メニュー」モジュールのバスケットと検索アイコンをカスタマイズする方法
この描画モードは、背景画像の暗い色を暗くし、明るい色を明るくします。
- パターン ブレンド モード: オーバーレイ
結果
これは、セクションに適用された XNUMX 番目の例の最終結果です。 "使い方".
そしてこちらがモバイル版。
XNUMX 番目のレイアウト
XNUMX 番目のレイアウトを開始しましょう。
このレイアウトでは、不透明な斜めストライプを背景に追加します」 実施要請"。
セクション設定を開くことから始めて、セクションに移動します 経歴. タブをクリックします 背景パターン、次に選択します 背景パターンを追加.
パターンを選択 斜めのストライプ.
次に模様の色を設定します。
- パターンカラー: rgba(255,255,255,0.25)
[パターンの変形] 設定を使用して、パターンを水平方向に反転します。 これは、好みに合わせてパターンを微調整するのに役立つもう XNUMX つのパラメーターです。
- パターン変換: 水平
パターンブレンドモードを追加
最後に、パターンのブレンド モードを設定します。 このデザインでは、ブレンド モードを使用します。 輝き.
次のガイドもお読みください。 Divi：「グラデーションビルダー」を使用して画像を美しくする方法
これをパターンの色と組み合わせることで、写真が透けて見えるようにしながら、画像に明るい画面が追加されます。 このデザインでは、パターンが独特のコントラストを追加するため、ボートのイメージが背景からより際立ちます。
- パターン ブレンド モード: 光度
結果
これが、このセクションの最終的なデザインです。
そして、これがそのモバイル版です。
最終結果
それでは、パターン ブレンド モードを使用したページ全体のデザインを見てみましょう。
今すぐDIVIをダウンロード!!!
まとめ
パターンを追加すると、背景画像に視覚的な興味を引くことができますが、パターンが背景画像を圧倒する場合があります。 幸いなことに、Diviには多くのブレンドモードが付属しているため、パターンを好きなだけカスタマイズできます.
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
