のグラデーションビルダーを使用しますか? Divi どの種類のグラデーションを選択すればよいかわかりませんか?
グラデーション タイプは、新しい Divi グラデーションビルダー 。 新しいタイプのグラデーション Divi 背景にさまざまな形や色を追加できます。
この記事では、これらの種類のグラデーションを比較し、それらを使用してユニークな背景を作成する方法を紹介します!
のは、始めましょう。
Divi グラデーション タイプとは何ですか?
Divi の新しい Gradient Builder は、グラデーション タイプを含むいくつかの新しいグラデーション機能を追加します。 次の XNUMX 種類のグラデーションから選択できます。
- 線形
- 円形の
- 楕円
- コニカル
タイプごとにグラデーションの表示が異なります。 それらは、円、楕円、または円錐の線形カラーパターンとして表示されるグラデーションを形成するために使用されます。 例で詳しく説明します。
グラデーションの種類は、位置、繰り返すかどうか、グラデーション スクロール バーの測定単位、背景の上のグラデーションの配置など、他のコントロールの影響も受けます。
各調整は、グラデーションに大小の影響を与える可能性があります。 グラデーションは微妙または目立つことができます。 わずかな変更でも大きな変更でも、XNUMX 回の調整で行うことができます。
それを念頭に置いて、各グラデーション タイプを使用したグラデーションの例をいくつか見てみましょう。 グラデーションの種類ごとに XNUMX つの例を示します。
XNUMX つ目は、Web で見られる標準的なグラデーション タイプです。 次の XNUMX つは、グラデーションの種類で何ができるかを確認するためだけに、もう少し実験的なものになります。
グラデーション タイプの例
グラデーション タイプの例として、 無料のベッド＆ブレックファースト レイアウト パック ディビで利用できます。 このセクションには既にグラデーションがありますが、これを置き換えて実験を行います。
元の背景グラデーションを削除するか、変更することができます。 結果は同じです。 簡単にするために、それを変更します。
タイトル テキストを黒から白に変更してカスタマイズしました。
直線グラデーションタイプ
また読みます： Divi: 背景画像でパターン ブレンディングを使用する方法
線形グラデーションは、グラデーションがページ全体に広がっているかのように表示します。
線形グラデーション タイプの最初の例
最初の例のプレビューを次に示します。 画面の左側に明るい色、右側に暗い色を表示し、その間をスムーズに移行します。
この例を作成するには、XNUMX つの色を追加します。 の プレミア 92,158,82,0.76% の位置で rgba(0) です。 の 2番目の 0,10,4,0.76% の位置で rgba(97) です。
- 勾配停止:
- 0%: rgba(92,158,82,0.76)
- 97%: rgba(0,10,4,0.76)
次に、 タイプ グラデーションを Linear に設定し、 リーダーシップ 131度以上。 彼は 繰り返さない. をセットする団結 パーセンテージで。 背景画像の上にグラデーションを配置します。
- グラデーションの種類: 線形
- 勾配方向: 131deg
- 勾配を繰り返す: いいえ
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション：はい
線形グラデーション タイプの XNUMX 番目の例
これは、XNUMX 番目の線形グラデーションの例のプレビューです。 それは最初のように機能しますが、左側にハードストップがあり、暗い色合いが引き継がれます.
これを作成するには、XNUMX つのグラデーション ストップを追加します。 の プレミア 18,76,41,0.76% の位置で rgba(13) です。 の 2番目の 92,158,82,0.76% の位置で rgba(13) です。 色 3 18,76,41,0.76% の位置で rgba(34) です。
- 勾配停止:
- 13%: rgba(18,76,41,0.76)
- 13%: rgba(92,158,82,0.76)
- 34%: rgba(18,76,41,0.76)
次に、 タイプ グラデーションを Linear に設定し、 リーダーシップ 90度以上。 彼は 繰り返さない . 変更団結 パーセンテージ。 背景画像の上に配置します。
- グラデーションの種類: 線形
- 勾配方向: 90deg
- 勾配を繰り返す: いいえ
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション：はい
線形グラデーション タイプの XNUMX 番目の例
XNUMX 番目の例では、明るい色の線を右上隅に斜めに配置し、暗い色の線に接しています。
こちらはXNUMX色展開。 色 1 92,158,82,0.76% の位置で rgba(13) です。 色 2 92,158,82,0.76% の位置で rgba(23) です。 の サードカラー 18,76,41,0.76% の位置で rgba(32) です。
- 勾配停止:
- 13%: rgba(92,158,82,0.76)
- 23%: rgba(92,158,82,0.76)
- 32%: rgba(18,76,41,0.76)
を定義する タイプ 線形への勾配 方向 209度。 生まれた 繰り返さない を設定します。団結 パーセンテージで。 背景画像の上にグラデーションを配置します。
- グラデーションの種類: 線形
- 勾配方向: 209deg
- 勾配を繰り返す: いいえ
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション：はい
円形グラデーションタイプ
円形グラデーション タイプは、色で円を作成します。
円形グラデーション タイプの最初の例
最初の円形グラデーションの例では、中央に明るい色を配置し、エッジの周りに暗い色を配置します。
こちらは2色展開。 の プレミア 92,158,82,0.76% の位置で rgba(0) です。 の 2番目の 0,10,4,0.76% の位置で rgba(62) です。
- 勾配停止:
- 0%: rgba(92,158,82,0.76)
- 62%: rgba(0,10,4,0.76)
を定義する タイプ 円形のグラデーション。 中心に 方向 . 彼を確認してください 繰り返さない 、 変更団結 パーセンテージとして背景画像の上に配置します。
- グラデーションの種類: 円形
- グラデーションの位置: センター
- 勾配を繰り返す: いいえ
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション：はい
円形グラデーション タイプの XNUMX 番目の例
このグラデーションは、画面の中央に明確な円形のエッジを配置します。
XNUMX色あります。 XNUMX色が重ねられています。 の プレミア 18,76,41,0.76% の位置で rgba(13) です。 の 2番目の 92,158,82,0.76% の位置で rgba(33) です。 色 3 92,158,82,0.76% の位置で rgba(51) です。 色 4 rgba(18,76,41,0.76) です。 色 51 の上、3% の位置に配置されます。
- 勾配停止:
- 13%: rgba(18,76,41,0.76)
- 33%: rgba(92,158,82,0.76)
- 51%: rgba(92,158,82,0.76)
- 51%: rgba(18,76,41,0.76)
を定義する タイプ 円形へのグラデーションと配置 リーダーシップ 左上隅にあります。 彼を確認してください 繰り返さない 、 変更 団結 パーセンテージとして背景画像の上に配置します。
- グラデーションの種類: 円形
- グラデーションの位置: 左上
- 勾配を繰り返す: いいえ
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション：はい
円形グラデーション タイプの XNUMX 番目の例
この例では、円の中央から開始して、最も暗い色でいくつかの明るい円を配置します。
こちらもXNUMX色を順番に重ねてこのデザインに仕上げています。 の 初演 color は 18,76,41,0.76% の位置で rgba(13) です。 色 2 18,76,41,0.76% の位置で rgba(44) です。 の troisième 色が 92,158,82,0.76 番目の色に重なっています。 これは 44% の位置にある rgba(XNUMX) です。 色 4 92,158,82,0.76% の位置で rgba(51) です。
- 勾配停止:
- 13%: rgba(18,76,41,0.76)
- 44%: rgba(18,76,41,0.76)
- 44%: rgba(92,158,82,0.76)
- 51%: rgba(92,158,82,0.76)
それを変更 グラデーションタイプ 円形で。 を置きます 方向 下。 繰り返します これです。 をセットする団結 パーセンテージで背景画像の上にグラデーションを配置します。
- グラデーションの種類: 円形
- グラデーションの位置: 下
- 繰り返し勾配: はい
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション：はい
楕円グラデーションタイプ
楕円グラデーションは、色を楕円の形に配置します。
楕円グラデーション タイプの最初の例
最初の楕円形の例では、明るい色の楕円を画面の中央に配置し、その周りを暗い色で囲みます。
こちらはXNUMX色展開。 の プレミア 92,158,82,0.76% の位置で rgba(0) です。 の 2番目の 0,10,4,0.76% の位置で rgba(50) です。
- 勾配停止:
- 0%: rgba(92,158,82,0.76)
- 50%: rgba(0,10,4,0.76)
それを変更 グラデーションタイプ 楕円形で。 をセットする 方向 センターに。 これを確認してください 繰り返さない 、 をセットする団結 パーセンテージで背景画像の上に配置します。
- グラデーションの種類: 楕円形
- グラデーションの位置: センター
- 勾配を繰り返す: いいえ
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション：はい
楕円グラデーション タイプの XNUMX 番目の例
XNUMX 番目の例では、グラデーション全体に多数の細い円形の線を配置します。
XNUMX色あります。 の プレミア 92,158,82,0.76pt 位置の rgba(34) です。 の 2番目の 位置 0,10,4,0.76pt の rgba(39) です。
- 勾配停止:
- 34pt: rgba(92,158,82,0.76)
- 39pt: rgba(0,10,4,0.76)
それを変更 タイプ 楕円形へのグラデーションと調整 リーダーシップ 左。 これを 繰り返す. 変更団結 ドットで。 背景画像の上に配置します。
- グラデーションの種類: 楕円形
- グラデーションの位置: 右
- 繰り返し勾配: はい
- グラデーション単位: ドット (pt)
- 背景画像の上の正方形のグラデーション：はい
楕円グラデーション タイプの XNUMX 番目の例
XNUMX 番目の例では、グラデーションに多数の半円を配置します。
こちらはXNUMX色展開。 の プレミア 位置 32,68,35,0.73vmin の rgba(34) です。 の 2番目の 位置 0,10,4,0.76vmin の rgba(39) です。
- 勾配停止:
- 34vmin: rgba(32, 68, 35, 0.73)
- 39vmin: rgba(0,10,4,0.76)
それを変更 タイプ 楕円形へのグラデーションと調整 リーダーシップ ハイで。 これを 繰り返す. 変更ユニット ビューポートの最小値。 背景画像の上に配置します。
- グラデーションの種類: 楕円形
- グラデーションの位置: 上
- 繰り返し勾配: はい
- グラデーションの単位: ビューポートの最小値 (vmin)
- 背景画像の上の正方形のグラデーション：はい
円錐グラデーションタイプ
円錐グラデーション タイプは、円錐を上から見たように、グラデーションを円錐として表示します。
円錐グラデーション タイプの最初の例
この例では、グラデーションの中心から左側に対角線を配置し、片側に明るい色、反対側に暗い色を配置します。
XNUMX色あります。 の プレミア 92,158,82,0.76% の位置で rgba(0) です。 の 2番目の 0,10,4,0.76% の位置で rgba(50) です。
- 勾配停止:
- 0%: rgba(92,158,82,0.76)
- 50%: rgba(0,10,4,0.76)
それを変更 グラデーションタイプ 円錐形で。 調整する 方向 221度以上。 中心に 位置 et 繰り返さないで . 画像の上にグラデーションを配置します。
- グラデーションの種類: 円錐
- 勾配方向: 221deg
- ポジション：センター
- 勾配を繰り返す: いいえ
- 背景画像の上の正方形のグラデーション：はい
円錐グラデーション タイプの XNUMX 番目の例
この例は前の例と似ていますが、中心線を上に配置しています。
こちらはXNUMX色展開。 の プレミア 20,40,20,0.76% の位置で rgba(7) です。 色 2 30,73,25,0.68% の位置で rgba(24) です。 色 3 103,132,30,0.68% の位置で rgba(65) です。 の 第4 color は 38,86,26,0.68% の位置で rgba(85) です。
- 勾配停止:
- 7%: rgba(20,40,20,0.76)
- 24%: rgba(30,73,25,0.68)
- 65%: rgba(103,132,30,0.68)
- 85%: rgba(38,86,26,0.68)
を定義する グラデーションタイプ コニカルと 方向 0度で。 中心に 位置 . 生まれた 繰り返さない 画像の上に配置します。
- グラデーションの種類: 円錐
- 勾配方向: 0deg
- ポジション：センター
- 勾配を繰り返す: いいえ
- 背景画像の上の正方形のグラデーション：はい
円錐グラデーション タイプの XNUMX 番目の例
最後の例では、グラデーションの上部中央からすべての方向に向かって線のバーストを配置します。
こちらはXNUMX色展開。 の プレミア 30,73,25,0.68度の位置でrgba(5)です。 の 2番目の 20,40,20,0.76度の位置でrgba(7)です。
- 勾配停止:
- 5度: rgba(30,73,25,0.68)
- 7度: rgba(20,40,20,0.76)
をセットする グラデーションタイプ コニカルと リーダーシップ 221度を置きます 位置 上記。 繰り返す これを背景画像の上に配置します。
- グラデーションの種類: 円錐
- 勾配方向: 221deg
- 位置: トップ
- 繰り返し勾配: はい
- 背景画像の上の正方形のグラデーション：はい
今すぐDIVIをダウンロード!!!
まとめ
これは、Divi のグラデーション ビルダーのグラデーション タイプの比較です。
これらの例からわかるように、設定は単純ですが、どの設定でもグラデーションのデザインに大きな違いをもたらすことができます。
最良の結果を得るには、さまざまな方向と位置でグラデーション タイプを試し、繰り返しオプションのオンとオフを切り替えて、作成できるものを確認してください。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
