Diviの新しい背景設定で10の背景デザイントリックが可能になりました

Diviの新しいバックグラウンドオプションインターフェイスのリリース以来、Diviはさらに強力になりました。 新しい機能により、多くの新しいデザインの可能性が開かれました。 今日は、あなたが気付いていないかもしれないいくつかの新しいデザインのトリックを紹介します。うまくいけば、いくつかの素晴らしい背景デザインを作成するようにあなたを刺激することができます。

Visual Builderを使用して作成できる、無数の背景デザインの組み合わせとブレンドがあります。 この投稿のために私が決めた10のトリックは、表面を傷つけるだけですが、それらは、さまざまな概念を紹介し、興味をかき立てることを目的としています。 これらのデザイントリックのほとんどは、新しいグラデーション背景オプションなどの新しい背景オプションを使用し、背景画像とグラデーションカラーを組み合わせて実行されます。

私はあなたに警告しなければなりません。 バックグラウンドオプションを掘り下げ始めたら、決してやめないかもしれません！ とても楽しいです。 まあ、少なくとも私にとってはそうだった。

楽しみ。

これがデザイントリックのスニークピークです

この投稿をフォローする方法

新しいデザインのトリックを説明するたびに最初からやり直す代わりに、ほとんどのデザインに同じサンプルデザインを使用し、そのデザインに異なるトリックを追加しました。 つまり、ほとんどの例では、新しいトリックに取り組む前に、以前のデザイントリックを完了する必要があります。 トリック＃1-9はすべて同じ基本設定に従い、前提条件としてトリック＃1が必要です。 したがって、機能をテストする場合は、トリック＃1から始めることをお勧めします。

Diviを使用した10の背景デザインの秘訣

私たちのYoutubeチャンネルを購読する

トリック＃1：斜めのオーバーレイ

全幅セクションを追加してから、全幅ヘッダーモジュールを挿入します。

次に、ヘッダーモジュールの設定を次のように更新します。

コンテンツオプション

タイトル：[タイトルを入力]
小見出し：[小見出しを入力]
ロゴ画像のURL：[ロゴを入力]
背景のグラデーションの色：rgba（12,113,195,0.55）、rgba（255,255,255,0）
グラデーションタイプ：線形
グラデーション方向：135度
開始位置：60％
終了位置：60％（60％以下であればすべて機能します）

グラデーションは同じポイントで開始および終了するため、基本的にグラデーション効果はまったく発生しません。 したがって、結果は60％マーカーの両側に2色になります。 それをグラデーション方向の角度と組み合わせると効果が生まれます。

デザインオプション

テキストの色：明るい
タイトルフォント：デフォルト、太字（B）、大文字（TT）
タイトルフォントサイズ：40px
小見出しのフォントサイズ：24px

高度なオプション

[メイン要素]ボックスの[カスタムCSS]で、次のCSSを追加します。

Padding: 150px 0;

これは、ヘッダーモジュールの上部と下部にパディングを追加するためだけのものです

設定を保存する

次に、全幅セクションに背景を追加します。 紫色のコントロールボックスの歯車アイコンをクリックして、全幅セクション設定に移動します。

次に、セクション設定コンテンツオプションを次のように更新します。

背景画像：[ここに背景画像を入力してください。 少なくとも1960pxの幅である必要があります。 unsplash.comからこの画像を選択し、画像の目立つ部分が右側になるようにトリミングしました。]
視差効果を使用する：はい（これはオプションですが、対角線オーバーレイでうまく機能すると思います）
視差法：真の視差

それでおしまい！ グラデーションの色の不透明度とグラデーションの方向の程度をお好みに合わせて自由に調整してください。

良いスタートを切ったと思います。 2番目のトリックに進みましょう。

秘訣＃2：斜めのオーバーレイを重ねる

このデザイントリックはトリック＃1の続きなので、続行する前にトリック＃1が完了していることを確認してください。

トリック＃1では、全幅ヘッダーモジュールの背景グラデーションオプションを使用して斜めのオーバーレイを使用しました。

同じ例を使用して、全幅セクションに背景グラデーションを追加します。 そのセクションの背景画像はすでに用意されていますが、Diviの新しいオプションを使用すると、グラデーションカラーを背景画像に組み合わせて、特定の効果とブレンドすることができます。

全幅セクションの設定に移動し、次のコンテンツオプションを更新します。

背景のグラデーションの色：rgba（131,0,233,0.38）、rgba（255,255,255,0）
グラデーションタイプ：線形
グラデーションの方向：135度（ヘッダーモジュールの他のグラデーションの方向と同じ）
開始位置：38％
終了位置：38％

次に、背景画像アイコンをクリックして、以下を変更します。

視差効果を使用する：いいえ
背景画像のブレンド：乗算

これで、2つの重なり合う斜めのオーバーレイができ、独自の背景デザインに簡単にカスタマイズできます。

秘訣＃3：サークルオーバーレイ

このデザイントリックはトリック＃1の続きなので、続行する前にトリック＃1が完了していることを確認してください。

次に、トリック＃1の斜めのオーバーレイを円のオーバーレイに変換します。 これを行うには、全幅モジュール設定に移動し、以下を更新します。

コンテンツオプション

背景グラデーションタイプ：放射状
半径方向：中心
開始位置：30％
終了位置：30％

デザインオプション

テキストとロゴの向き：センター

次に、新しいヘッダーの背景を確認します。

このトリックは、見栄えの良いヘッダーまたはアクションの呼び出しを作成します。 サークルオーバーレイのサイズは簡単に調整でき、さまざまな画面サイズにうまく対応します。 現在、背景画像の上に半透明のグラデーションカラーを使用していますが、これは背景画像がなくても見栄えがします。

これは、背景画像がなく、テキストの色が暗い場合の例です。

秘訣4：円の境界線を作成するために円のオーバーレイを重ねる

これは、全幅ヘッダーモジュールに円オーバーレイを追加することを中断したトリック＃3からの続きです。 サークルオーバーレイを配置したら、2番目のサークルオーバーレイを追加して、最初のサークルオーバーレイの境界として機能させることができます。 これを行うには、全幅ヘッダーモジュールの後ろにある全幅セクションに別の背景グラデーションを追加します。

全幅セクション設定に移動し、以下を更新します。

コンテンツオプション

[背景画像]タブの下：

視差効果を使用する：いいえ
背景画像のブレンド：乗算

[背景グラデーション]タブの下：

背景のグラデーションの色：rgba（0,0,0,0.45）、rgba（255,255,255,0）
背景グラデーションタイプ：放射状
半径方向：中心
開始位置：34％
終了位置：34％

設定を保存する

それでおしまい。

開始位置のパーセンテージを調整することで、背景のグラデーション円のサイズを簡単に変更することもできます。

トリック＃5：逆円オーバーレイ

これは、全幅ヘッダーモジュールの円オーバーレイで中断したトリック＃3からの続きです。 現在、円は半透明の青で、背景画像の残りの部分にはグラデーションオーバーレイカラーがまったくありません。 このトリックでは、これを切り替えて円のオーバーレイを反転し、半透明の青いグラデーションオーバーレイが円を囲み、円の内側にその背後の背景画像が表示されるようにします。

これを行うには、全幅ヘッダー設定に移動し、以下を更新します。

コンテンツオプション

背景のグラデーションの色：rgba（255,255,255,0）、rgba（12,113,195,0.79）

注：ここで実際に行っているのは、左右の色を入れ替えることだけです。 これで、透明な色が円の内側に表示され、青いグラデーションが円を囲みます。 青の不透明度を上げて、少し暗くします。

見てみな…

秘訣＃6：ビデオ背景付きの逆円オーバーレイ

これはトリック＃5からの続きで、周囲の青い背景に逆の円のオーバーレイが残りました。 現在、円はその背後にある背景画像を公開しています。 この円オーバーレイの後ろに配置するビデオ背景を簡単に追加できます。 気を散らさないビデオを使用することをお勧めします。 また、ビデオを使用するときは常に、ページの読み込み時間が損なわれないようにファイルサイズが小さいことを確認してください。

背景画像をビデオに置き換えるには、[全幅セクション設定]に移動し、[
背景のビデオアイコンとあなたのビデオを追加します。

次に、全幅ヘッダー設定に移動し、以下を更新します。

コンテンツオプション

背景のグラデーションの色：rgba（12,113,195,0.67）、＃333333

新しいグラデーションカラーでは、背景ビデオは円内にのみ表示されます。 そして、オーバーレイする色は本当にテキストをポップにします。

トリック＃7：中心から外れた逆円オーバーレイ

これはトリック＃5の続きであり、逆の円のオーバーレイが残りました。 全幅ヘッダー設定に戻ると、半径方向をさまざまな設定に調整して、ヘッダーの外観を変えることができます。

フル幅ヘッダー設定に移動し、以下を更新します。

コンテンツオプション

半径方向：右

デザインオプション

テキストとロゴの向き：左

これが最終結果とさまざまな半径方向のいくつかの例です。

これらの例には明らかにいくつかの作業が必要ですが、あなたはその考えを理解します。

秘訣＃8：シャドウ効果にグラデーションを使用する

このトリックは驚くようなものではないかもしれませんが、非常に便利です。 Photoshopのようなフォトエディタを使用して画像にシャドウを追加することを気にしたくない私たちにとって、これはあなたのためです。

これは、全幅ヘッダーモジュールの背景グラデーションオプションを使用して斜めのオーバーレイで中断したトリック＃1の続きです。 次に、半透明の青いオーバーレイを、画像の左側から始まり、徐々に右側にフェードアウトする暗いシャドウに変更しましょう。 このようにして、右側の画像の主要部分はそのままになり、左側の暗い影はテキストを読みやすくするのに役立ちます。

シャドウ効果を追加するには、[全幅ヘッダー設定]に移動し、以下を更新します。

コンテンツオプション

背景のグラデーションの色：rgba（0,0,0,0.55）、rgba（0,0,0,0）
グラデーション方向：90度
開始位置：38％
終了位置：85％

結果は次のとおりです。

秘訣＃9：背景画像のブレンド

Diviの新しい背景オプションには、画像をカスタマイズするためのCSSブレンドモードが含まれています。 さまざまな画像ブレンドを探索することは非常に楽しく、驚くべきデザインを作成する傾向があります。 デザイナーではない人にとっては、これらのクールなオプションを利用するために、彩度または明度の定義を知る必要はありません。 すべてのクールな効果を表示するには、背景色またはグラデーションを背景画像と組み合わせて設定する必要があります（背景画像だけでは実際には機能しません）。 次に、必要な外観が得られるまで遊んでください。 結果はあなたを驚かせるかもしれません。

この例では、全幅ヘッダーモジュールの背景グラデーションオプションを使用して対角線オーバーレイで中断したトリック＃1から続行します。

全幅ヘッダー設定に移動し、コンテンツオプションの下の背景グラデーションを削除します。

設定を保存する

次に、セクション設定に移動して、以下を更新します。

コンテンツオプション

背景のグラデーションの色：rgba（0,0,0,0.76）、＃0c71c3
グラデーション方向：90度
開始位置：50％
終了位置：50％

まだ変更はありません。 大丈夫。 [背景画像]タブに移動して、以下を更新します。

視差効果を使用する：いいえ
背景画像のブレンド：ハードライト

それでおしまい。 結果を確認してください。

注：ここで使用される色は、使用する背景画像に基づいて異なる効果を作成します。 だから私はあなたが好きなものを手に入れるまで色とブレンドオプションをいじってみることをお勧めします。

秘訣＃10：グラデーションの背景に色を追加するためのレイヤー。

デフォルトでは、すべてのセクション、行、列、およびモジュールに2つの色のグラデーションを設定できます。 ただし、それらを組み合わせて重ねると、グラデーションの背景に5色を作成できます。 そして、これらの5つの色が混ざり合うと、かなりクールなスペクトルを作成できます。

これがあなたのやり方です。 まず、1列の構造行を持つ通常のセクションを追加します。 次に、行内に宣伝文モジュールを追加します。

宣伝文モジュールの設定を次のように更新します。

コンテンツオプション

タイトル：[タイトルを入力]
コンテンツ：[コンテンツを入力]

デザインオプション

テキストの色：明るい
テキストの向き：中央
ヘッダーフォント：デフォルト、太字（B）
ヘッダーフォントサイズ：56px
本文フォントサイズ：22px
カスタムパディング：100px上、100px下

宣伝文は白地に白なので、まだ見えませんが、大丈夫です。 あなたは直ぐに。 グラデーションカラーの追加を開始します。

後ろから前へ、左から右へと進んでいきます。 開始するには、セクション設定に移動し、以下を更新します。

コンテンツオプション

背景のグラデーションの色：＃ff0077、＃0c71c3
グラデーション方向：90度
開始位置：0％
終了位置：30％

デザインオプション

カスタムパディング： 0px上、0px下

次に、次のレベルのグラデーションカラーである行を更新しましょう。 行設定に移動し、以下を更新します。

コンテンツオプション

背景のグラデーションの色：rgba（255,255,255,0）、＃8300e9
グラデーション方向：90度
開始位置：25％
終了位置：50％
列1の背景グラデーションの色：rgba（255,255,255,0）、＃e02b20
グラデーション方向：90度
開始位置：50％
終了位置：75％

デザインオプション
この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1
カスタムパディング：0px上、0px下

設定を保存する

次に、グラデーションの最後のレイヤーとして、宣伝文モジュールに移動し、以下を更新する必要があります。

コンテンツオプション
背景のグラデーションの色：rgba（255,255,255,0）、＃edf000
グラデーション方向：90度
開始位置：75％
終了位置：100％

デザインオプション

カスタムパディング：100px上、100px下

それでおしまい。 これで、5つのグラデーションカラーがブレンドされて、非常にカラフルな背景が作成されました。

グラデーションタイプを放射状（円形）に変更して、デザインを完全に変更することもできます（約20秒かかります）。

すべてのレイヤー（セクション、行、列、宣伝文モジュール）のグラデーションタイプを放射状に変更すると、次のようになります。

ボーナストリック

これは、視差を使用して背景画像を重ねる方法の例です。 これは、TrueParallaxを使用した背景画像のある通常のセクションです。 セクションの内側には、セクションの全幅に広がるようにパディングなしで全幅に作成された1列の行があります。 行に、CSS視差法を使用して、いくつかのグラデーション円（泡のように見えると思われる）を含む透明な背景画像を追加しました。 次に、背景が透明な行にCall to ActionModuleを追加しました。 この組み合わせにより、ページのセクションを下にスクロールするときに動きが生じます。

このトリックは、Diviの外部でカスタム写真を作成する必要があるため、少し複雑です。 可能性をお見せしたいと思います。

さらにいくつかの例

この投稿で言及されているのと同じトリックをテストしながら作成したいくつかの設計例でこれを終了します。

最終的な考え

これらの新しい背景オプションの探索を楽しんでいただき、それらがもたらす可能性に興奮していることを願っています。 また、これらのオプションはセクション、行、列、およびモジュールで使用できるため、これらのデザイントリックをWebサイトの任意の部分に適用できます。 まだ行っていない場合は、少し時間をかけて少し深く掘り下げ、それらの創造的なジュースを流してください。 時間をかけて自分でバックグラウンドオプションを検討すれば、次のプロジェクトでそれらを実装することにワクワクすることでしょう。 あなたが思いついたものを見るのが待ちきれません。

コメントであなたからの連絡を楽しみにしています。