要素間のバックグラウンド トランジションを作成しますか? Divi ?
要素間のシームレスな背景デザインの遷移を作成します Divi あなたのデザインを向上させる素晴らしい方法です サイトのWeb Divi.
これにより、クリエイティブな方法で、線とセクションの間でグラデーション、パターン、および背景マスクをシームレスに移行できます。
たとえば、デザインの全体的な位置合わせや対称的な外観を失うことなく、さまざまな色のパターンまたはマスク トランジションを使用できます。
このチュートリアルでは、Divi の組み込みの背景デザイン オプションを使用して、Divi セクションとラインの間のシームレスな背景デザイン トランジションを作成します。 このデザインの用途と汎用性は無限であり、Divi の背景デザイン オプションをまったく新しいレベルに引き上げます!
のは、始めましょう。
概要
このチュートリアルで構築するデザインを簡単に見てみましょう。
マスクと背景パターンにいくつかの簡単な変更を加えるだけで可能なその他のサンプル デザインを次に示します。
Divi Builder で新しいページを作成する
開始するには、次のことを行う必要があります。
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック DiviBuilderを使用する
その後、クリック 構築を開始 (ゼロから構築)
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
バックグラウンドでDiviセクションとラインの間のシームレスなトランジションを作成する
プレースホルダー コンテンツとしてのヘッダーの作成
また読みます： Divi: 線からホバー効果のあるタブを作成する方法
作業に入る前に、次のようにヘッダーを追加する必要があります。 コンテンツ 架空の。 まず、ページのデフォルト セクションに XNUMX 列の行を追加します。
次に、Text モジュールを行に追加します。
H1 サイズのテキストを追加します。
タブの下 設計で、必要に応じてヘッダー テキストのデザインを更新します。
- フォント: Roboto Condensed
- フォントの太さ: 太字
- スタイル: TT
- テキストの配置: 中央揃え
- 文字色：#000000
- 見出しのテキスト サイズ: 4vw
- 文字間隔: 0.1em
- 行の高さ: 1.3em
セクションの背景デザイン
セクションにパディングを追加
偽のヘッダーが配置されたら、セクション設定を開き、次のように間隔を更新します。
- パディング (上下): 15vw
セクションに背景グラデーションを追加しました
作業するスペースが増えたので、背景デザインをセクションに追加する準備が整いました。 タブの下 背景グラデーションで、次のグラデーション ポイントを追加します。
- 勾配停止:
- 0%: #4f0f75 (0% で)
- 25%: #2843c9 (25%)
- 50%: #4ae2e0 (50%)
- 75%: #3881ff (75%で)
- 100%: #4f0f75 (100% で)
セクションに背景パターンを追加する
タブの下 背景パターン、次を更新します。
- パターン: 斜めストライプ
- パターンカラー: rgba(79,15,117,0.23)
- 変形：回転
- パターンサイズ: 注文のサイズ
- 幅: 7vw
- 高さ: 5vw
- パターンリピート原点：センター
注意： パターンの幅と高さには、必ず VW の長さの単位を使用してください。 また、繰り返し原点を「中心」に設定してください。 これにより、後で行に追加する背景パターンと同じ場所に背景パターンが保持されます。
セクションに背景マスクを追加する
タブの下 背景マスク、次を追加します。
- 背景マスク: レイヤー ブロブ
- マスクカラー: rgba(0,0,0,0.7)
- マスク幅：100vw
- ポジション：センター
注意： パターンと同様に、VW の長さ単位を使用してマスクのサイズを設定する必要があります。 また、マスクを中央に配置する必要があります。
ライン背景デザイン
セクションの背景をコピーして行の背景に貼り付けます
ライン背景のデザイン プロセスを高速化するには、セクションの背景設定をコピーします。
次に、既存の行に背景を貼り付けます。
この時点で、線の背景パターンとマスクがセクションの背景にシームレスに移行する様子をすでに確認できます。
線の背景が透明に見えますが、実際には同じサイズと位置のセクションで使用されている同じパターンとマスクです。
VW を使用して行サイズとパディングを調整する
次に、VW の長さ単位を使用して、行にカスタム幅を指定する必要があります。 以下を更新します。
- 幅: 75vw
- 最大幅: 75vw
- パディング (上、下、左、右): 10vw
グラデーションストップをオンラインで調整する
次に、セクション背景グラデーションへのシームレスな移行のために、ライン背景のグラデーション ストップを調整する必要があります。
タブの下 背景グラデーション、セクションの背景から継承された XNUMX つの中央のグラデーション ポイントを保持し、最初と最後のグラデーション ストップを削除します。
次に、最初のストップを 0% に、100 番目のストップを XNUMX% に設定します。 完了したら、次のグラデーションが必要です。
- 勾配停止
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
ボックスの影を線に追加
デザインを少し持ち上げて、背景のシームレスな移行を強調するために、行にボックス シャドウを追加できます。
- ボックス シャドウ: スクリーンショットを参照
- 垂直位置: 0px
- ボックス シャドウ ブラーの強さ: 4vw
- 影の色: rgba(0,0,0,0.5)
線の背景パターンの色を調整する
すべての背景要素が配置されたので、よりクリエイティブなデザインのために色の調整を開始できます。
オプションの下で 背景パターン 行、次を更新します。
- パターンカラー: rgba(255,255,255,0.23)
線の背景マスクの色を調整
また、ラインのマスク カラーを更新して、デザインを際立たせることもできます。
タブの下 背景マスク、次を更新します。
- マスクカラー：#ffffff
- マスク変換: 反転
最終結果
最終結果を見てみましょう。
今すぐDIVIをダウンロードしてください!!!
さらなる可能性
マスクと背景パターンにいくつかの簡単な変更を加えるだけで可能なその他のサンプル デザインを次に示します。
今すぐDIVIをダウンロードしてください!!!
まとめ
Divi でシームレスな背景デザインのトランジションを作成するための鍵は、これらの VW の長さの単位を賢く使用することです。
まず、ブラウザのビューポートの幅に収まるセクションの背景デザインを (ページの中央から) 作成する必要があります。 完了したら、同じ XNUMX 行の背景デザインを使用できます。 その後、グラデーションと色を微調整して、すばらしいデザインに仕上げます。
このテクニックが、将来のプロジェクトに役立つ別の設計スキルを追加することを願っています。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
