Diviでグリッドレイアウトの拡張ホバー効果を作成する方法
公開: 2018-12-16グリッドレイアウトに拡大ホバー効果を追加することは、ページコンテンツを操作するように視聴者を引き付けるユニークな方法です。 アイデアは、グリッドのコンパクトな表示から始めて、ユーザーがDiviの要素にカーソルを合わせたときに、そのグリッドを拡張してグリッドコンテンツを最前面に表示することです。 これは、画像ギャラリーを拡張して、ホバー時に大きなギャラリー（大きな画像を含む）を表示するのに最適です。 また、宣伝文のクラスターを拡張して、訪問者にサービスを探索してもらうこともできます。
始めましょう。
スニークピーク
これは、このチュートリアルで取り上げるホバー効果の拡大例の概要です。
入門
このチュートリアルでは、本当に必要なのはDiviだけです。 また、DiviBuilder内で利用可能なDesignAgency About Pageの既成のレイアウトを使用して、デザインを開始します。
まず、新しいページを作成し、ページにタイトルを付け、クリックしてDiviBuilderを使用します。 次に、[既成のレイアウトを選択する]オプションを選択します。 [ライブラリからロード]ポップアップから、[デザインエージェンシーレイアウトパック]を選択し、クリックして[デザインエージェンシーの概要]ページを使用します。
レイアウトがページに読み込まれたら、公開します。 このチュートリアルでは、フロントエンドでDiviビルダーを使用します。 これを行うには、バックエンドページエディタの上部にある[フロントエンドでビルド]ボタンをクリックするだけです。
これで、開始する準備が整いました。
ホバーで宣伝文句を展開する
この最初の例では、提供されているサービスを表示しているこのレイアウトの2番目のセクションの宣伝文を展開する方法を示します。
宣伝文モジュールを移動して1行のみを占有する
現在、このセクションは2つの3列の行で構成されており、各列に宣伝文があります。
ホバー効果を1つの行に追加するので、下の行の宣伝文を上の行に移動する必要があります。 一番上の行の各列に2つの宣伝文句があることを確認してください。
次に、空の一番下の行を削除します。
宣伝文モジュールのカスタマイズ
次に、Multiselectを使用して6つの宣伝文をすべて選択し、同じデザインをすべての宣伝文に同時に適用できるようにします。 これを行うには、ctrl（またはcmd）を押しながら、すべてが選択されるまで各宣伝文モジュールをクリックします。 次に、宣伝文の1つにある設定アイコンをクリックして、要素設定モーダルを開きます。
先に進み、コンテンツボックスにあるコンテンツを取り出して、次のようにデザイン設定を更新します。
タイトルテキストサイズ16px
幅：150px
モジュールの配置：中央
カスタムパディング：10px上、デフォルト下、デフォルト左、デフォルト右
モジュールに150pxのカスタム幅を指定すると、行を展開したときにタイトルテキストが所定の位置にロックされたままになります。
変更を保存し、複数選択からクリックします。
センターの宣伝文句をより目立たせる
次に、「ブランドアイデンティティ」というタイトルの2番目の列にある上部の宣伝文の宣伝文モジュール設定を開きます。 次に、以下を更新します。
アイコンフォントサイズ：120px
タイトルテキストサイズ：18px（デフォルト）
これにより、中央の宣伝文句が、他の宣伝文句が外側に広がる中央のピースとしてより目立つようになります。
ホバー時に展開する行のカスタマイズ
ホバー時にモジュールを拡張するために、行のサイズと間隔を調整します。 行設定を開き、以下を更新します。
カスタム幅：750px
側溝幅：4
カスタムパディング（デフォルト）：左150px、右150px
カスタムパディング（ホバー）：0px左、0px右
カスタムパディング（タブレット）：0px左、0px右
ホバーのパディング値の変更は、拡張ホバー効果を作成するものです。 行は右に150ピクセル、左に150ピクセル拡大します。
最終結果を確認してください。
円形グリッドの作成
拡張する円形グリッドレイアウトを作成する場合、必要なのはいくつかの小さな調整だけです。
最初に外側の宣伝文の1つを複製し、2番目の列の大きな宣伝文の上にドラッグします。 次に、大きなアイコンで中央の宣伝文句のタイトルテキストを削除します。
宣伝文を垂直方向に揃えるには、カスタムCSSの小さなスニペットを追加します。 行設定を開き、次のカスタムCSSをメイン要素に追加します。
align-items: center;
結果を確認してください。
グリッドを右に拡張
グリッドを左または右に拡張することもできます。 モジュールを整理してから、行のカスタムパディングを更新するだけです。 たとえば、コンテンツを右に展開する場合は、デフォルトのカスタムパディングを左に0ピクセル、右に300ピクセルに設定します。
モバイルでどのように見えるか
これが、タブレットとスマートフォンでデザインがフォールバックするものです。 拡大するホバー効果は、モバイルでもアクティブになりません。
画像ギャラリーに拡大ホバー効果を追加する
ギャラリーモジュールを使用してホバー時に画像ギャラリーを展開し、より大きな画像でより大きなグリッドレイアウトを表示することもできます。 これを行うには、デザインエージェンシーのページレイアウトタイトル「OurWork」の下部にあるセクションを見つけます。
次に、3つの画像を含む行の下に新しい1列の行を追加します。 行内に、ギャラリーモジュールを追加します。
ギャラリーモジュールの設定を次のように更新します。
同じサイズの4つの画像をギャラリーに追加して、行全体で同じように見えるようにします。
画像番号：4
タイトルとキャプションを表示：いいえ
ページ付けを表示：いいえ
次に、[デザイン]タブに移動し、以下を更新します。
ズームアイコンの色：＃353740
ホバーオーバーレイカラー：rgba（252,210,29,0.92）
幅（デスクトップ）：40％
幅（ホバー）：100％
幅（錠剤）：100％
ホバー時にギャラリーモジュールの幅を変更すると、ホバー効果が拡大します。 タブレットの幅を100％に設定すると、モバイルでホバー効果が発生するのを防ぐこともできます。
これがこれまでの様子です。
機能を少し改善してレイアウトに合わせるために、行設定を更新する必要があります。
行設定を開き、以下を更新します。
カスタム幅：80％
側溝幅：2
列の高さを等しくする：はい
拡大ホバー効果によるコンテンツのページへのプッシュの停止
ページのコンテンツを押し下げずに画像ギャラリーを拡張したい場合は、行に最小の高さを設定することでこれを行うことができます。 これにより、特にギャラリーのすぐ下にあるボタンを使用すると、UXが向上します。
行設定に移動し、メイン要素に次のカスタムCSSを追加します。
min-height: 350px
次に、列のメイン要素に次のカスタムCSSを追加します。
margin: auto;
列の高さを等しくすると、バックエンドで「display：flex」cssプロパティがアクティブになり、「margin：auto」で列のコンテンツを行内の垂直方向の中央に揃えることができます。行の最小の高さは350pxになります。 この概念の詳細については、Diviでコンテンツを垂直方向に配置する方法に関する記事全体をご覧ください。
最終結果を確認してください。
ギャラリーに画像を追加する
ギャラリーにさらに4つの画像を追加し、行の最小の高さを475pxに増やして、次の結果を得ることができます。
モバイルでどのように見えるか
ギャラリーがモバイルでどのように表示されるかを次に示します。 拡大ホバー効果はアクティブではありません。
最終的な考え
示されている例は、Diviを使用してグリッドコンテンツ全体に拡張ホバー効果を作成するいくつかの方法です。 しかし、他の無数のユースケースに使用できると確信しています。 ポートフォリオモジュール、ショップモジュール、さらにはブログモジュールを拡張できます。 だから、創造的になって、自分で可能性を探求して楽しんでください。
以下のコメントであなたからの連絡を楽しみにしています。
乾杯！