Divi要素間でシームレスな背景デザインのトランジションを作成する方法
公開: 2022-05-27Divi要素間でシームレスな背景デザイントランジションを作成することは、DiviWebサイトのデザインを向上させるための優れた方法です。 アイデアは、ブラウザの幅に応じて同じサイズと位置を共有する（行とセクションの両方で）一致する背景デザインを作成することです（vwの長さの単位を使用）。 これにより、背景のグラデーション、パターン、マスクを行とセクションの間でクリエイティブな方法でシームレスに移行できます。 たとえば、デザインの全体的な配置と対称的な側面を失うことなく、パターンまたはマスクを異なる色に遷移させることができます。
このチュートリアルでは、Diviの組み込みの背景デザインオプションを使用して、Diviセクションと行の間のシームレスな背景デザイントランジションを作成します。 このデザインのアプリケーションと汎用性は無限であり、Diviのバックグラウンドデザインオプションをまったく新しいレベルに引き上げます！
始めましょう。
スニークピーク
このチュートリアルで作成するデザインを簡単に見てみましょう。
これは、背景マスクとパターンにいくつかの簡単な変更を加えるだけで可能な、さらにいくつかのデザイン例です。
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDivi Landing Page Layout Packのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
セクションレイアウトをDiviライブラリにインポートするには、次の手順を実行します。
- Diviライブラリに移動します。
- ページ上部の[インポート]ボタンをクリックします。
- 移植性ポップアップで、[インポート]タブを選択します
- コンピューターからダウンロードファイルを選択します（最初にファイルを解凍し、JSONファイルを使用してください）。
- 次に、インポートボタンをクリックします。
完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだ行っていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Diviセクションと行の間のシームレスな背景デザインの移行を作成する
パート1：モックコンテンツとして見出しを作成する
背景のデザインを開始する前に、モックコンテンツとして見出しを追加する必要があります。 まず、ページのデフォルトセクションに1列の行を追加します。
次に、テキストモジュールを行に追加します。
ボディコンテンツにH1見出しを追加します。
[デザイン]タブで、見出しテキストのデザインを好きなように更新します。 このデザインでは、見出しテキストのサイズに合わせてVWの長さの単位を追加して、デザインの他の部分とスムーズにスケーリングできるようにするのに役立ちます。
2.セクションの背景を設計する
セクションへのVWパディングの追加
モックの見出しが配置されたら、セクション設定を開き、次のように間隔を更新します。
- パディング：15vw上部、15vw下部
セクションに背景グラデーションを追加する
作業するスペースが増えたので、背景デザインをセクションに追加する準備が整いました。 [グラデーション]タブで、次のグラデーションストップを追加します。
- グラジエントストップ1：＃4f0f75（0％）
- グラジエントストップ2：＃2843c9（25％）
- グラデーションストップ3：＃4ae2e0（50％）
- グラジエントストップ4：＃3881ff（75％）
- グラジエントストップ5：＃4f0f75（100％）
セクションに背景パターンを追加する
[パターン]タブで、以下を更新します。
- パターン：斜めのストライプ
- パターンカラー：rgba（79,15,117,0.23）
- パターン変換：回転
- パターンサイズ：カスタムサイズ
- パターン幅：7vw
- パターンの高さ：5vw
- パターンリピート原点：中央
注：パターンの幅と高さには、必ずVW長さの単位を使用してください。 また、繰り返し原点を「中心」に設定してください。 これにより、後で行に追加する背景パターンと同じ場所に背景パターンが保持されます。
セクションに背景マスクを追加する
[マスク]タブで、以下を追加します。
- 背景マスク：レイヤーブロブ
- マスクの色：rgba（0,0,0,0.7）
- マスクサイズ：100vw
- マスクの位置：中央
注：パターンと同様に、VWの長さの単位を使用してマスクにサイズを指定する必要があります。 また、マスクを中心位置にする必要があります。
3.行の背景を設計する
セクションの背景をコピーして行の背景に貼り付けます
行の背景を設計するプロセスを高速化するには、セクションの背景設定をコピーします。
次に、背景を既存の行に貼り付けます。
この時点で、セクションの背景へのシームレスな遷移として、行の背景パターンとマスクがどのようになっているのかをすでに確認できます。 行の背景は透明に見えますが、実際には同じサイズと位置のセクションで使用されているのと同じパターンとマスクです。
VWを使用して行のサイズとパディングを調整します
次に、VWの長さの単位を使用して行にカスタム幅を指定する必要があります。 以下を更新します。
- 幅：75vw
- 最大幅：75vw
- パディング：上10vw、下10vw、左10vw、右10vw
VW長さ単位での間隔とサイズ設定の概要
これまで、VWの長さの単位を使用して、レイアウトに間隔と位置の値を追加してきました。 これは、現在使用されている値の簡単な図です。
これまでのところ、パターンとマスクの行の背景とセクションの背景の間をシームレスに移行しています。 次に、行の背景のグラデーションを更新して、それもシームレスになるようにします。
行のグラデーションストップを調整する
次に、セクションの背景グラデーションにシームレスに移行するために、行の背景のグラデーションストップを調整する必要があります。 [グラデーション]タブで、セクションの背景から継承された3つの中央のグラデーションストップを保持し、最初と最後のグラデーションストップを削除します。 次に、最初のストップを0％に、3番目のストップを100％に配置します。 完了すると、次のグラデーションが表示されます。
- グラジエントストップ1：＃2843c9（0％）
- グラデーションストップ2：＃4ae2e0（50％）
- グラデーションストップ3：＃3881ff（100％）
ボックスシャドウを行に追加
デザインに少し高さを与え、背景のシームレスな遷移を強調するために、行にボックスシャドウを追加できます。
- ボックスシャドウ：スクリーンショットを参照
- ボックスシャドウの垂直位置：0px
- ボックスシャドウブラーの強さ：4vw
- ボックスシャドウカラー：rgba（0,0,0,0.5）
行の背景パターンの色を調整する
すべての背景要素が適切な場所に配置されたので、より創造的なデザインのために色の調整を開始できます。 行のパターンオプションで、以下を更新します。
- パターンカラー：rgba（255,255,255,0.23）
行の背景マスクの色を調整する
行のマスクカラーを更新して、デザインをポップにすることもできます。 [マスク]タブで、以下を更新します。
- マスクの色：#ffffff
- マスク変換：反転
最終結果
最終結果を確認してみましょう。
より多くの可能性
これは、背景マスクとパターンにいくつかの簡単な変更を加えるだけで可能な、さらにいくつかのデザイン例です。
最終的な考え
Diviでシームレスな背景デザインのトランジションを作成するための鍵は、これらのVWの長さの単位を賢く使用することです。 まず、ブラウザのビューポートの幅（ページの中央の位置から）に合わせて拡大縮小するセクションの背景デザインを作成する必要があります。 完了したら、同じ背景デザインを行に使用できます。 その後、グラデーションと色を少し調整するだけで、すばらしいデザインになります。 うまくいけば、このテクニックは将来のプロジェクトのために別の有用なデザインスキルを追加するでしょう
コメントでお返事をお待ちしております。
乾杯！