Diviで抽象的なホバー効果のために複数の要素を変換する方法

すでにご存知のように、Diviには、Divi要素（セクション、行、またはモジュール）に固有のホバー効果を作成できる多数のデザイン設定があります。 通常、ホバー効果は1つの要素に限定されます。 たとえば、ホバー時にモジュールに変換回転プロパティを追加すると、モジュールにホバーするとその回転がアクティブになります。 ただし、モジュールを含む行にホバーエフェクトを追加すると、モジュールにカーソルを合わせたときにホバーエフェクトの別のレイヤーが追加されます。 これにより、独自の抽象的なホバー効果への扉が開かれます。

このチュートリアルでは、Diviの組み込み設定を使用して、抽象的なホバー効果のために複数の要素を変換する方法について説明します。 また、このデザインでは行の使用方法が少し異なるため、行のグリッドレイアウトを作成して、ギャラリーでこれらのホバー効果を紹介できるようにする方法を説明します（必要な場合）。

始めましょう。

スニークピーク

ホバーレイアウト上の複数の要素の変換を無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

入門

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

このチュートリアルでは、次のものが必要になります。

1. Diviテーマがインストールされ、アクティブになっています
2. いくつかの画像。 DiviBuilder内からアクセスできる既成のレイアウトの画像を使用しています

準備ができたら、WordPressダッシュボードに移動します。 次に、新しいページを作成し（[ページ]> [新規追加]）、ページにタイトルを付けて、DiviBuilderをデプロイします。 「最初から構築」オプションを選択します。

今、あなたの空白のキャンバスが待っています！

画像の抽象的なホバー効果

この最初のデザインでは、行と画像モジュールのスキュー変換ホバー効果を組み合わせて、ホバー時の画像に扇形効果を作成します。 この効果は、見た目がかっこいいだけでなく、画像をクリックすることでより多くの画像が表示されることをユーザーに知らせる便利なUIインタラクションとしても機能します。 したがって、必要に応じて、画像をギャラリーページへのリンクとして使用できます。

これがその方法です。

まず、1列の行を持つ新しい通常のセクションを作成します。

次に、画像モジュールを行に追加します。

次に、モジュールに画像のアップロードを追加します。

画像モジュールのホバー効果を追加する

これで、画像にいくつかの変換ホバー効果を追加して、画像を拡大縮小して回転させたり、歪ませたりすることができます。 これを行うには、変換オプションに移動し、以下を更新します。

変換スケールのX軸とY軸：110％

変換回転Z軸：9度

スキューのX軸とY軸の変換：3度

それでおしまい！ ものすごく単純。 次に、行をカスタマイズして、要素にカーソルを合わせたときにアクティブになる別のホバー効果を追加する必要があります。

行設定

このデザインが機能するためには、ホバー領域が両方で同じになるように、行がその中の画像と同じサイズである必要があります。 これにより、モジュールと、モジュール（またはこの場合は画像）にカーソルを合わせたときにアクティブになる行の両方に異なるホバー効果を追加できます。 これが機能するのは、行内のモジュールにカーソルを合わせると、行にカーソルを合わせた場合と同じようにホバー効果がアクティブになるためです。 また、モジュールには異なるホバー効果があるため、モジュールにホバーすると両方のホバー効果がアクティブになります。 これにより、ボックスシャドウを使用した抽象的なホバー効果、スキューの変換、および行とモジュールの両方への回転の変換を組み合わせて使用​​できます。

画像のモジュールホバー効果はすでに配置されているので、行のサイズを調整する必要があります。 画像のサイズに応じて、モジュールはすでに行の幅全体に及ぶ必要があるため、技術的には行の幅を調整する必要はありません。 ただし、この例では、ホバー効果のためのスペースを確保するために行を縮小します。

次のように行設定を更新します。

最大幅：400px

行の高さをその中の画像と一致させたいので、デフォルトの上下のパディングを取り除く必要があります。

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

次に、行の列に背景画像を追加する必要があります。 この背景画像は、画像モジュールの変換ホバー効果が歪んで回転するたびに表示されます。

列1の背景画像：[画像を入力]

次のように、ホバー時にボックスシャドウで行を更新し続けます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px（デフォルト）、-30px（ホバー）
ボックスシャドウの垂直位置：0px（デフォルト）、-15px（ホバー）
影の色：＃002f66

このボックスシャドウは、行の背景画像の後ろに表示される別の画像の効果を追加します。これは、背景画像を回転および傾斜させて表示する変換ホバー効果を追加すると表示されます。

最後に、スキュー変換プロパティを追加して、行にホバー効果を追加する準備ができました。

スキューのX軸とY軸の変換：-3度

最終結果

これが最終結果です。

また、モバイルでも適切に拡張できます。

召喚状の抽象的なホバー効果（例1）

行設定

1列の行を持つ新しい通常のセクションを作成します。

次に、次のように行設定を更新します。

列1の背景グラデーションの左の色：rgba（34,43,58,0.71）
列1の背景グラデーションの右の色：＃222b3a
背景画像：[画像を挿入]
最大幅：400px
カスタムパディング：0px上、0px下

行の設定に戻って、抽象的なホバー効果を少し完成させますが、とりあえず、アクションモジュールの呼び出しを行に追加しましょう。

召喚状モジュールの設定

召喚モジュールの設定を開き、次のようにコンテンツを更新します。

タイトル：ポイント付き旅行
ボタンテキスト：ここをクリック
内容：期間限定
ボタンリンクURL：＃（今のところボタンをアクティブにするためだけに）
背景色を使用：いいえ

次に、モジュールのテキストと間隔のデザイン設定を更新します。

タイトルフォント：Gilda Display
ボタンのテキストサイズ：16px
ボタンのテキストの色：＃ffb238
ボタンの背景色：rgba（0,0,0,0）
ボタンの境界線の幅：0px

カスタムパディング：上20％、下20％

次に、モジュールに境界線を追加します。

ボーダー幅：2px
ボーダーカラー：＃222b3a

これでデフォルトのデザインが処理されます。 さあ、楽しい部分の時間です。 行とモジュールは基本的に同じサイズ（高さと幅）であるため、ホバー領域は両方で同じになることに注意してください。 つまり、行とモジュールに追加したホバー効果は、要素にカーソルを合わせると両方ともアクティブになります。 これにより、ボックスシャドウを使用した抽象的なホバー効果、スキューの変換、および行とモジュールの両方への回転の変換を組み合わせて使用​​できます。

行ホバー効果から始めましょう。

行ホバー効果

まず、ホバー時にボックスシャドウを行に追加できます。 行設定を開き、以下を更新します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px（デフォルト）、90px（ホバー）
ボックスシャドウの垂直位置：0px（デフォルト）、80px（ホバー）
ボックスシャドウの広がりの強さ：0px（デフォルト）、-40px（ホバー）

影の色：＃ffb238

ボックスシャドウは、次に追加する変換オプションも継承することに注意してください。

次に、ホバー時に回転と傾斜の変換プロパティを追加しましょう。

変換回転X軸（ホバー）：10度
スキューX軸の変換（ホバー）：-4度
スキューY軸の変換（ホバー）：-4度

これにより、行のホバー効果が処理されます。 次に、デザインを完成させるCall toActionモジュールにホバー効果を追加する必要があります。

召喚モジュールのホバー効果

召喚状モジュールの設定を開き、次のようにボックスシャドウホバー効果を与えます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：0px（デフォルト）、30px（ホバー）
影の色：#ffffff

最後に、次のように、ホバー時にスケール、回転、およびスキュー変換プロパティを追加します。
変換スケールのX軸とY軸（ホバー）：115％
変換回転Z軸（ホバー）：9度
スキューX軸の変換（ホバー）：3度
スキューY軸の変換（ホバー）：3度

スケールオンホバーを使用してモジュールのサイズを大きくすると、ユーザーがモジュールではなく行要素だけにホバーする可能性を最小限に抑えることができます。

最終結果

これが抽象的なホバー効果の最終結果です。 行ホバー効果とモジュールホバー効果の両方がホバーでアクティブになり、抽象的なデザインの要素を歪めることに注意してください。

モバイルでのホバー効果は次のようになります。 ただし、ほとんどのモバイルブラウザではホバー効果をアクティブにするためにタップが必要なため、モジュールをリンクとして使用している場合にユーザーがダブルタップする必要がないように、モバイルでホバー効果を無効にすることをお勧めします。

召喚状の抽象的なホバー効果（例2）

この次の抽象的なホバー効果のデザインをジャンプスタートするために、最初の例を含むセクションを複製しましょう。 今、私たちがする必要があるのは、ユニークなデザインのためにデザインとホバー効果にいくつかの小さな調整を加えることです。

行設定を更新する

まず、次のように行設定を更新します。

変換回転Z軸：-5度
スキューのX軸とY軸の変換：-4度

召喚状モジュールの設定を更新する

次に、モジュール設定を次のように微調整しましょう。

まず、国境を取ります…

ボーダー幅：0px

次に、ボックスの影を次のように更新します。

ボックスシャドウ水平位置：0px
ボックスシャドウの垂直位置：110px
（複製した前のデザインから継承されたホバー効果を必ず無効にしてください）
影の色：＃ffb238

これで、変換プロパティのホバー効果を更新できます。 ここでは、基本的にスケールを少し減らし、以前の回転およびスキュー変換プロパティに負の値を追加して、ホバー時に要素を反対方向に移動します。

次の変換オプションを更新します。

変換スケールのX軸とY軸（ホバー）：110％
変換回転Z軸（ホバー）：-9度
スキューX軸の変換（ホバー）：-3度
スキューY軸の変換（ホバー）：-3度

行のグリッドレイアウトを作成する

このデザインでは、親行がモジュールをラップし、同じ高さと幅を持つ必要があるため、通常のように列レイアウトを作成することはできませんが、flexプロパティを使用して行を整列させることができます。グリッドレイアウトで水平方向。

これを行うには、最初にモジュールを含む行を数回複製して、1つのセクションに3つの行があるようにします。

次に、各行にカスタムマージンを追加します。

カスタムマージン：上50px、下50px

次に、セクション設定を開き、次のカスタムCSSをメイン要素に追加するだけです。

display: flex;
flex-wrap: wrap;

これで、ブラウザのサイズに応じて応答する3列の行ができました。

最終的な考え

ホバーで複数の要素を変換すると、探索できる別のレベルの創造性が得られます。 このチュートリアルの例は、何が可能かを示すことを目的としていますが、独自のプロジェクトの設計を自由に調整してください。 ご想像のとおり、必要に応じてかなり奇抜になります。 ただし、このチュートリアルの画像モジュールの例のように、微妙なインタラクションデザイン要素を作成することも少し保守的にすることができます。

コメントでお返事をお待ちしております。

乾杯！