の [グラデーションの繰り返し] オプションを使用して、カスタムの背景パターンを作成しますか? Divi ?
の背景オプション Divi 背景パターンを作成する多くの方法を提供します。 グラデーションのみを使用して背景パターンを作成することもできます。 グラデーションの繰り返しオプションを使用すると、これが簡単になります。
この記事では、グラデーションの繰り返しオプションの使用方法を説明します。 Divi カスタム背景パターンを作成します。
のは、始めましょう。
グラデーションリピートとは
グラデーション リピート オプションは、グラデーション ストップに基づいてパターンを作成します。 グラデーション ストップは、グラデーション内で色が表示されて停止する場所を決定する測定値です。 Divi とその Gradient Builder は、これらのストップを使用してパターンを作成します。
最後の色は、ブレークポイントがグラデーションのどこにあるかをグラデーションに伝えます。 このブレークポイントの前に、必要な数の色を含めることができます。
Le グラデーションビルダー パターンを作成する画面を埋めるためにそれを繰り返します。 このオプションは、任意のセクション、行、列、またはモジュールに追加でき、それらを一緒に使用できます。
「背景グラデーション」オプションを有効にします
オプションを有効にするには グラデーションリピートで、歯車アイコンをクリックしてセクションの設定を開きます。 行、列、 モジュール.
スクロールして 経歴 . タブを選択 グラデーションの背景 クリックします 背景グラデーションを追加.
グラデーションストップバーの下には、という設定があります グラデーションリピート . これはデフォルトで無効になっています。 クリックするだけでアクティブ化できます。
グラデーションが繰り返され、グラデーション ストップやその他のグラデーション設定 (グラデーション ユニットなど) に基づいてパターンが作成されます。
勾配単位
勾配単位は測定単位です。 これは、グラデーション バーのグラデーション ストップ番号が何を示すかを指定し、グラデーション ストップの測定方法を決定します。 これは、繰り返しオプションによって作成されるパターンに影響します。
Divi の背景グラデーション ジェネレーターは 15 ユニットを提供します。 最も一般的な XNUMX つのオプションの例を見てみましょう。 例で説明するように、結果はグラデーション ストップの数と設定によって異なります。
パーセント (パーセント)
パーセンテージは、勾配の停止をパーセンテージで測定します。 これにより、親要素に基づいてグラデーション ポイントが計算されます。 最後のグラデーションステッチが小さいほど、作成されたパターンはよりタイトになります. いずれかの色の位置を調整すると、その色が移動し、他の色はそのまま残ります。
ピクセル（px）
ピクセルは、各グラデーション ストップのピクセル数を測定します。 これにより、グラデーションのパターンが他のほとんどの単位タイプよりも小さくなります。 最初または最後の色の位置を移動すると、各色の位置が変わります。
ウィンドウの高さ (vh)
ビューポートは、表示されるブラウザ ウィンドウの領域です。 高さと幅を別々に計測しています。 ウィンドウの高さは、グラデーション ストップを使用して、ウィンドウ サイズの高さのパーセンテージを測定します。 最初または最後の色の位置を調整すると、すべての色に影響します。
ウィンドウ幅 (vw)
ウィンドウの幅はグラデーション ストップを使用して、ウィンドウ サイズの幅 (またはブラウザーの幅) の割合を測定します。 幅によって調整が変わります。 数値を大きくしたり小さくしたりすると、その特定の色の位置が変わりますが、他の色は同じままです。
「グラデーションリピート」オプションの使用例
この例では、 無料鍼レイアウトパック ディビで利用できます。
セクションの最初の列を調整する必要があります。 それらを開く ラインパラメータ 歯車のアイコンをクリックします。
次に、 歯車アイコン 最初の列。
列 XNUMX のグラデーション
最初の列には独自の背景グラデーションがあります。 レイアウトの一部です。 私たちはそれを変えません。 この同じグラデーションを XNUMX つの例で使用します。 必要な場合の設定は次のとおりです。
- 勾配停止:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
グラデーション設定
- グラデーションの種類: 線形
- グラデーション位置: 180 度
- 勾配を繰り返す: いいえ
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション: いいえ
スペーシング
列の左側に間隔を追加します。 タブにアクセスする 設計、までスクロール 間隔 を選択します タブレット アイコン をクリックしてデバイス オプションを開きます。
デスクトップとタブレットのタブに 5% の左パディングを追加します。 電話タブを選択し、左側のパディングを削除します。 上と右は現在の設定のままにします。
- パディング
- 上：180px
- 左: 5%
- 左: 80px
例XNUMX
最初の例では、細い線で斜めに繰り返しパターンを作成します。
これには XNUMX つのグラデーション ストップがあります。
- 勾配停止:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
次の設定を使用します。
- グラデーションの種類: 線形
- グラデーションの方向: 156 度
- 繰り返し勾配: はい
- グラデーションの単位: ピクセル
- 背景画像の上の正方形のグラデーション: いいえ
XNUMX 番目の例
XNUMX 番目の例では、より大きな線で斜めの繰り返しパターンを作成します。
これには XNUMX つのグラデーション ストップがあります。
- 勾配停止:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
グラデーション設定については、
- グラデーションの種類: 線形
- グラデーションの方向: 156 度
- 繰り返し勾配: はい
- グラデーションの単位: ピクセル
- 背景画像の上の正方形のグラデーション: いいえ
例 XNUMX
XNUMX 番目の例では、中サイズの円で繰り返し円形パターンを作成します。
これには XNUMX つのグラデーション ストップがあります。
- 勾配停止
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
次のグラデーション設定を適用します
- グラデーションの種類: 円形
- グラデーションの位置: 下
- 繰り返し勾配: はい
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション: いいえ
例4
XNUMX 番目の例では、大きな円を含む円形パターンを作成します。
これには XNUMX つのグラデーション ストップがあります。
- 勾配停止:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
グラデーション設定の場合、次のように変更します。
- グラデーションの種類: 円形
- グラデーションの位置: センター
- 繰り返し勾配: はい
- グラデーションの単位: パーセント
- 背景画像の上の正方形のグラデーション: いいえ
今すぐDIVIをダウンロード!!!
まとめ
これは、オプションを使用する方法についての私たちの見方です グラデーションリピート Divi からカスタム背景を作成します。 グラデーション設定の多くの調整は、グラデーションのデザインに影響します。
グラデーションの繰り返しは、これらすべての微調整とうまく連携して、興味深いカスタム背景パターンを簡単に作成できます。
ここに示した例を試して変更を加え、グラデーションがどのように影響を受けるかを確認し、独自のカスタム背景グラデーションを作成することをお勧めします。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
