Diviでホバーの列コンテンツを明らかにする方法（無料ダウンロード！）

最新のDivi投稿の1つで、非表示の行コンテンツをホバーに表示する方法を示しました。 今日は、同じタイプのアプローチを使用して、代わりに列のコンテンツを表示する方法を示します。 私たちが扱うアプローチは似ており、デスクトップで素晴らしいホバー効果を持つあらゆる種類のデザインを作成できますが、ホバーオプションがなくても小さな画面サイズでもうまく機能します。

このチュートリアルが、作成するWebサイトのあらゆる種類のインタラクティブなデザインを作成するきっかけになることを願っています。 投稿の最後に、JSONファイルをダウンロードして、必要に応じて微調整することができます。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

下のGIFでわかるように、ホバーがスムーズに移行し、ホバー時に列の内容が表示されます。

モバイル

一方、小さい画面サイズでは、列の内容はホバーする必要なしにすでに表示されます。

再作成を始めましょう！

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

新しい通常のセクションを追加する

間隔

新規または既存のページを開き、通常のセクションを追加します。 セクション設定を開き、間隔設定に上部と下部のカスタムパディングを追加します。

• トップパディング：10vw
• ボトムパディング：15vw

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定にいくつかの変更を加えます。 これらの設定により、行が画面の幅全体を占めるようになり、列間のすべてのスペースを削除するのにも役立ちます。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

次に、行の間隔設定に移動します。 ここでは、前の手順で削除したスペースを、カスタムのパディング値を追加して置き換えます。

• 左パディング：8vw
• 右パディング：8vw
• 列1の右パディング：2vw
• 列2の左パディング：1vw
• 列2の右パディング：1vw
• 列3の左パディング：2vw

テキストモジュール＃1を列1に追加します

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 列1のテキストモジュールから始めます。選択したH3コンテンツをいくつか追加します。

H3テキスト設定

次に、見出しのテキスト設定に移動し、H3コンテンツの外観にいくつかの変更を加えます。

• 見出し3フォント：Didact Gothic
• 見出し3フォントの太さ：太字
• 見出し3テキストの配置：中央
• 見出し3テキストの色：＃3567ff
• 見出し3テキストサイズ：1.2vw（デスクトップ）、20px（タブレットと電話）

間隔

次に、いくつかのカスタム間隔値をテキストモジュールに追加します。

• 下マージン：4vw
• トップパディング：4vw
• ボトムパディング：4vw

ボックスシャドウ

そして、モジュールに微妙なボックスシャドウを与えます。

• ボックスシャドウの垂直位置：36px
• ボックスシャドウブラー強度：60px
• 影の色：rgba（0,0,0,0.06）

テキストモジュール＃2を列1に追加します

コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加して続行します。 選択した段落の内容をいくつか追加します。

テキスト設定

次に、[デザイン]タブに移動し、テキスト設定にいくつかの変更を加えます。

• テキストフォント：Open Sans
• テキストサイズ：0.8vw（デスクトップ）、14px（タブレットと電話）
• テキスト文字の間隔：-0.05vw
• テキスト行の高さ：2.2em
• テキストの向き：正当化
• テキストの色：暗い

間隔

間隔設定でもカスタムマージンとパディング値を試してみてください。

• 下マージン：3vw
• トップパディング：2vw
• ボトムパディング：2vw
• 左パディング：4vw
• 右パディング：4vw

国境

そして、次の設定を使用して、モジュールに左右の境界線を追加します。

• 右ボーダー幅：1px
• 右の境界線の色：＃e5e5e5

ボタンモジュールを列1に追加

コピーを追加

最初の列で必要な次のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

配置

次に、[デザイン]タブに移動し、ボタンの配置を中央に変更します。

• ボタンの配置：中央

ボタンの設定

続けてボタンの設定を開き、ボタンの外観を変更して、私たちが達成しようとしている全体的なデザインと一致させます。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、15px（タブレットと電話）
• ボタンのテキストの色：＃000000
• ボタンの境界線の幅：1px
• ボタンの境界線の色：#dddddd
• ボタンの境界線半径：0px
• ボタンの文字間隔：-0.05vw
• フォントの太さ：太字
• フォントスタイル：大文字

間隔

ボタンモジュールの間隔の値も試してみてください。

• 下マージン：100px（タブレットと電話）
• トップパディング：0.8vw（デスクトップ）、10px（タブレットと電話）
• ボトムパディング：0.8vw（デスクトップ）、10px（タブレットと電話）
• 左パディング：3.5vw（デスクトップ）、50px（タブレットと電話）
• 右パディング：3.5vw（デスクトップ）、50px（タブレットと電話）

列1のモジュールのクローンを作成し、残りの列に複製を2回配置します

3つの異なるモジュールを列1に追加し終えたら、先に進んで、各モジュールのクローンを2回作成できます。 残りの2つの列に複製を配置して、各列で同じデザインを実現します。

列2のテキストモジュール＃1のテキストの色を変更します

列2の最初のテキストモジュールを開き、テキストの色を変更します。

• 見出し3テキストの色：＃6d28c1

列3のテキストモジュール＃1のテキストの色を変更します

3番目の列の最初のテキストモジュールに対しても同じことを行います。

• 見出し3テキストの色：＃15668e

オーバーレイテキストモジュールを列1に追加

コンテンツを追加する

必要なすべての列コンテンツが揃ったので、ホバーする前にコンテンツを非表示にする重複要素を追加できます。 これを実現するために、別のテキストモジュールを使用します。 先に進み、最初の列にもう1つ追加します。 これが列の最後のモジュールであることを確認してください。 お好みのコンテンツを追加してください。

グラデーションの背景

モジュールにグラデーションの背景を追加して続行します。

• 色1：＃6a30ff
• カラー2：＃3567ff
• グラデーション方向：124度

テキスト設定

次にテキスト設定を変更します。

• テキストフォント：Didact Gothic
• テキストの色：#ffffff
• テキストサイズ：2vw
• テキストの向き：中央

間隔

そして、いくつかのカスタムパディング値を追加して、モジュールからシェイプを作成します。 また、このモジュールと列のコンテンツの間にオーバーラップを作成するために、負の上部マージンを追加しています。 テキストモジュールの背後に非表示にしたコンテンツはクリックできなくなります。 そのため、この例のボタンなど、アクションの呼び出しをホバーせずに表示しておくことが重要です。

• トップマージン：-38vw
• トップパディング：15vw
• ボトムパディング：15vw

国境

次に、テキストモジュールにいくつかの丸い角を追加します。

ボックスシャドウ

微妙なボックスシャドウと一緒に。

• ボックスシャドウブラー強度：40px
• 影の色：rgba（0,0,0,0.16）

デフォルトのフィルター

次に、フィルター設定に移動し、不透明度がデフォルトで「100％」であることを確認します。

• 不透明度：100％

ホバーフィルター

ホバー時の不透明度を「0％」に変更します。 これにより、モジュールが非表示になり、代わりにすべての列コンテンツが表示されるようになります。

• 不透明度：0％

カスタムCSS

テキストモジュールがすべての列コンテンツの上に表示されるようにするには、テキストモジュールの[詳細設定]タブに2行のCSSコードを追加します。

z-index: 99;
position: relative

可視性

そして、タブレットと電話でモジュール全体を非表示にします。 この投稿の冒頭で述べたように、訪問者のユーザーエクスペリエンスが良好であることを確認するために、すべての列コンテンツを小さい画面サイズで表示しています。

クローンオーバーレイテキストモジュールを2回作成し、残りの列に複製を配置します

オーバーレイテキストモジュールの変更が完了したら、先に進んで2回クローンを作成します。 複製のそれぞれを残りの2つの列に配置します。

列2のオーバーレイテキストモジュールのグラデーションの背景を変更します

最初の複製のグラデーションの背景色を変更します。

• 色1：＃d530ff
• 色2：＃6d28c1

列3のオーバーレイテキストモジュールのグラデーションの背景を変更します

また、2番目の複製についても同じようにします。

• カラー1：＃41ff30
• カラー2：＃15668e

セクションを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

プレビュー

デスクトップ

モバイル

最終的な考え

この投稿では、ホバー時に列の内容を表示する方法を示しました。 このアプローチは、作成するあらゆる種類のWebサイトに使用して、相互作用のレベルをさらに高めることができます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！