Diviでシャッターホバー効果を使用してコンテンツを表示する方法

ホバーでモジュールの内容を明らかにすると、いくつかの有益な利点があります。 1）最初にWebページのデザインをよりコンパクトまたはエレガントにするのに最適な方法です。 2）スペースを節約します。 3）それはあなたのページと相互作用するようにユーザーを誘惑することができます。 4）かっこいいですね:)。 基本的な考え方は、モジュールのコンテンツの一部（ティーザーなど）のみを表示することです。これにより、訪問者はカーソルを合わせて詳細を見ることができます。 モジュールにカーソルを合わせると、シャッターのように開閉するスムーズなホバー効果でコンテンツ全体が表示されます。

このチュートリアルでは、Diviビルダーを使用してシャッタースタイルのホバー効果でモジュールコンテンツを表示する方法を紹介します。

スニークピーク

これが私たちが一緒に構築するものの簡単な見方です。

入門

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

開始するには、新しいページを作成し、ページにタイトルを付けてから、DiviBuilderをデプロイしてフロントエンドでビルドします。 「既成のレイアウトを選択」オプションを選択します。 次に、Divi Libraryポップアップから、Day Spa Layoutパックを選択し、クリックしてランディングページレイアウトを使用します。

レイアウトがページに読み込まれると、開始する準備が整います。

宣伝文の上部と下部に仕切りを追加する

ページを下にスクロールして、4つの宣伝文が記載された「LuxurySpaExperiences」というタイトルのセクションに移動します。 4つの宣伝文のある行を使用して、デザインを開始します。

最初の分周器の追加

最初のステップは、宣伝文の内容を背後に隠すために、宣伝文モジュールの上下に仕切りを追加することです。 これらの仕切りは、ホバーすると開閉する窓のシャッターと考えることができます。

最初の列の宣伝文の上に仕切りモジュールを追加し、以下を更新します。

背景色：#ffffff
（仕切りの）色：#ffffff
仕切りの重量：100px
高さ：100px
カスタムマージン：0px下

白い背景は、見たくないのでセクションの背景と一致します。 仕切りの重量と高さが同じであることを確認してください。

2番目の（オレンジ色の）仕切りを追加する

次に、作成した仕切りのすぐ下に別の仕切りを作成し、以下を更新します。

色：＃ff7a6b
仕切りの重量：2px
高さ：2px
カスタムマージン：0px下

次に、[コンテンツ]タブにジャンプして、仕切りに管理ラベル「オレンジの仕切り」を付けます。 これは、ワイヤーフレームモードを使用して仕切りをコピーして他の列に貼り付けるときに、仕切りを前の（白い）仕切りと区別するのに役立ちます。

ページを保存します。

宣伝文句の周りの仕切りをコピーして貼り付ける

これで、各列の各宣伝文の上下に仕切りをコピーして貼り付ける準備ができました。 このプロセスを少し簡単にするには、ページの下部にある設定メニューを開き、ワイヤーフレームアイコンをクリックして、ワイヤーフレームモードを展開します。 （またはshft + wを使用）

ワイヤーフレームモードで、作成した宣伝文と仕切りを含む行を見つけます。 次に、各宣伝文の上下に仕切りとオレンジ色の仕切りをコピーして貼り付け、最終結果が次のようになるようにします。

次に、デスクトップビュー（shft + w）に戻って、デザインを完成させます。 ページは次のようになります。

宣伝文モジュールのカスタマイズ

すべての仕切りが配置されたので、シャッタースタイルのホバー効果を作成するためのカスタムマージンを含むいくつかのスタイル調整を使用して、宣伝文句モジュールを編集します。

まず、multiselectを使用して、4つの宣伝文モジュールすべてを選択します。 これを行うには、ctrl（またはcmd）を押しながら各モジュールをクリックするだけです。 次に、モジュールの1つの設定を開いて、要素設定モーダルを展開します。

[コンテンツ]タブで、モックコンテンツを数行追加します。

次に、画像ボックスの影を完全に無効にします。

シャッターホバー効果を作成するには、デフォルトで仕切りの後ろにコンテンツを非表示にするために、負の上下マージンを追加する必要があります。 次に、余白を0pxに設定して、ホバーしたコンテンツを表示します。 これを行うには、次の間隔を追加します。

カスタムマージン（デフォルト）：上-100px、下-65px
カスタムマージン（ホバー）：0px上、0px下

カスタムパディング（ホバー）：10px上、10px下

コンテンツの量によっては、負のマージン値を調整する必要がある場合があります。 たとえば、長いテキストコンテンツには、より多くの負のマージンが必要になる場合があります。

これまでの結果を確認してください。

各モジュールの上部と下部は、それらにカーソルを合わせるまで仕切りの後ろに隠れていることに注意してください。

シャッターホバー効果のクリーンアップ

モジュールを垂直方向に中央揃え

現在、シャッターホバー効果は、ホバーするたびに残りのコンテンツをページの下に押し下げます。 これにより、気が散る可能性のあるページ移動が発生します。 さらに、ホバーアクションは下方向にのみ移動しますが、これは真のシャッター効果ではありません。 コンテンツを中央から上向きと下向きの両方に開いてほしい。 これを実現するには、次のことを行う必要があります。

行設定を開き、列の高さを等しくします。

次に、[詳細設定]タブに移動し、[メイン要素]の下に次のカスタムCSSを入力します。

align-items: center;

これにより、モジュールがカラム内の垂直方向の中央に留まり、上下のシャッター効果が得られます。

行に固定の高さを与える

ホバー効果が下のページコンテンツを押し下げるのを防ぐには、ホバーするたびに行の高さが大きくなるのを防ぐ必要があります。 これを行うには、デスクトップの行に固定の高さを設定する必要があります。 高さは固定されるため、行の高さは、ホバー状態の宣伝文句コンテンツの高さに対応するのに十分な高さであることを確認する必要があります。 ただし、モジュールの上下に余白が多すぎるため、高くしすぎないようにしてください。 この例では、行の高さを600pxに設定します。 ただし、デスクトップでのみ固定の高さを設定する必要があるため、メディアクエリを使用してページ設定にCSSを追加する必要があります。

これがあなたがする必要があることです。

まず、行の設定で、行にCSSIDを指定します。

CSS ID：固定高さ

次に、ページ設定を開き（[詳細設定]タブの下）、次のカスタムCSSを追加します。

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

これにより、デスクトップで行の高さが600ピクセルに固定され、ホバー効果によってページコンテンツの残りの部分が下に押し出されるのを防ぎます。

それでおしまい！

最終結果

最終的なデザインをチェックしてください。

そして、これがシャッターホバー効果です。

モバイルでホバー効果を無効にすることをお勧めします。 これを行うには、次のように各宣伝文モジュールのカスタムマージンを設定するだけです。

カスタムマージン（タブレット）：0px上、0px下

最終的な考え

このシャッターホバー効果は、さまざまなサービスに関する詳細情報を探すように視聴者をからかうための創造的な方法です。 そして、Diviの魔法とCSSのいくつかのスニペットを使用すると、最終的な結果は非常にエレガントになります。 どんなモジュールでも使えるので、このシャッターホバー効果にはもっとたくさんの用途があると思います。 あなた自身のいくつかのエキサイティングな新しいデザインを自由に探索してください、そしてそれらを私たちと共有することを躊躇しないでください。 コメントでお返事をお待ちしております。

乾杯！