Diviを使用して非表示の行コンテンツをホバーに表示する方法（無料ダウンロード！）
公開: 2019-02-07Webサイトに微妙なインタラクションを追加すると、訪問者の全体的なユーザーエクスペリエンスを大幅に向上させることができます。 使いやすさを尊重しながら、Webサイトをより魅力的に見せるための方法のひとつは、行のコンテンツをホバーに表示することです。 これは、サービス、製品、機能などを紹介するための優れたアプローチです。
このチュートリアルでは、AからZまでの特定のデザインを作成する方法を示しますが、アプローチを取得すると、作業中のあらゆる種類のWebサイトで機能させることができます。 このブログ投稿の最後に、このデザインのJSONファイルも共有します。このファイルは無料でダウンロードして制限なしで使用できます。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
作り始めましょう！
新しいセクションを追加
デフォルトの背景色
新しいセクションを新しいページまたは既存のページに追加して、セクションの背景色を変更することから始めます。
- 背景色：＃e0e0e0
背景色にカーソルを合わせる
ホバー時にこの背景色を変更します。
- 背景色：＃000000
間隔
デザインタブに移動し、いくつかのカスタム間隔値を追加します。 このチュートリアルを機能させるために、ビューポートユニットのみを使用します。 これにより、画面サイズに関係なく、すべてが所定の位置にとどまることが保証されます。
- トップマージン：5vw
- 下マージン：5vw
- 左マージン：3vw
- 右マージン：3vw
- トップパディング：0px
- ボトムパディング：0px
行＃1を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
グラデーションの背景
モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を追加します。
- 色1：＃ff5b79
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：中心
- 開始位置：15％
- 終了位置：15％
サイジング
行のサイズ設定にもいくつか変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
そして、間隔設定にいくつかのカスタムパディング値を追加します。
- トップパディング：9vw
- ボトムパディング：9vw
- 列1の左パディング：5vw
- 列1の右パディング：5vw
- 列2の左パディング：5vw
- 列2の右パディング：5vw
列1にテキストモジュールを追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 必要な最初のモジュールは、列1のテキストモジュールです。H3コンテンツとリンクを追加します。
リンクテキスト設定
次に、リンクテキスト設定に移動し、リンクの外観にいくつかの変更を加えます。
- リンクフォント：Didact Gothic
- リンクフォントスタイル：下線
- リンクの下線スタイル：実線
- リンクテキストの色：#ffffff
- リンクテキストサイズ：20px
見出しテキストの設定
H3テキスト設定も変更します。
- 見出し3フォント：Didact Gothic
- 見出し3のテキストの色：#ffffff
- 見出し3テキストサイズ：50px
可視性
最後になりましたが、デスクトップでモジュールを無効にします。 このモジュールが必要なのは、小さい画面サイズで表示する場合のみです。
Dividerモジュールを列2に追加します
可視性
列1に必要な2番目で最後のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、仕切りの色を変更します。
- 色：#ffffff
間隔
Dividerモジュールにもいくつかのカスタムマージン値を追加します。
- 上マージン：11vw（デスクトップ）、80px（タブレット）、
- 下マージン：50px（タブレットと電話）
テキストモジュール＃1を列2に追加します
コンテンツを追加する
2列目へ！ 選択したH4コンテンツを含むテキストモジュールを追加します。
見出しテキストの設定
次に、H4テキスト設定に移動し、いくつかの変更を加えます。
- 見出し4フォント：Didact Gothic
- 見出し4フォントの太さ：太字
- 見出し4テキストの色：#ffffff
- 見出し4テキストサイズ：2vw（デスクトップ）、40px（タブレット）、30px（電話）
テキストモジュール＃2を列2に追加します
コンテンツを追加する
前のテキストモジュールのすぐ下に、選択した段落コンテンツを含む別のテキストモジュールを追加します。
テキスト設定
次にテキスト設定に移動し、いくつかの変更を加えます。
- テキストフォント：Didact Gothic
- テキストの色：#ffffff
- テキストサイズ：0.9vw（デスクトップ）、18px（タブレットと電話）
- テキスト行の高さ：2em
間隔
いくつかのカスタムマージン値も追加します。
- トップマージン：2vw
- 右マージン：15vw
行＃2を追加
カラム構造
最初の行とそのすべてのモジュールの変更が完了したら、次の列構造を使用して新しい行を追加できます。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定にいくつかの変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
行間隔設定のデフォルトのパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
可視性
大事なことを言い忘れましたが、タブレットと電話でこの行を非表示にします。
列にテキストモジュールを追加
コンテンツを追加する
この行に必要なモジュールはテキストモジュールだけです。 いくつかのH3コンテンツとリンクを追加します。
デフォルトの背景色
次に、背景設定に移動し、テキストモジュールに背景色を追加します。
- 背景色：＃e0e0e0
背景色にカーソルを合わせる
ホバー時にこの背景色を変更します。
- 背景色：rgba（255,255,255,0）
デフォルトのテキスト設定
次に、テキスト設定に移動し、いくつかの変更を加えます。
- リンクフォント：Didact Gothic
- リンクフォントスタイル：下線
- リンクの下線スタイル：実線
- リンクテキストの色：#ffffff
- リンクテキストサイズ：0px
- リンク文字の間隔：-1px
リンクテキスト設定にカーソルを合わせる
ホバー時にリンクテキストのサイズも変更します。
- リンクテキストサイズ：1.7vw
デフォルトの見出しテキスト設定
H3テキスト設定にいくつかの変更を加えて続行します。
- 見出し3フォント：Didact Gothic
- 見出し3フォントの太さ：太字
- 見出し3テキストの色：＃000000
- 見出し3テキストサイズ：12vw
- 見出し3文字の間隔：-0.8vw
見出しのテキスト設定にカーソルを合わせる
ホバー時にH3テキスト設定の一部を変更します。
- 見出し3のテキストの色：#ffffff
- 見出し3テキストサイズ：4vw
- 見出し3文字の間隔：-0.2vw
間隔
次に、間隔設定に移動し、カスタムマージンとパディング値を追加します。
- トップマージン：-34.3vw
- 下マージン：-5vw
- トップパディング：10vw
- ボトムパディング：10vw
- 左パディング：26.5vw
ホバー間隔
ホバー時に間隔の値を変更します。
- トップマージン：-34.1vw
- 下マージン：-5vw
- トップパディング：12vw
- ボトムパディング：12vw
- 左パディング：11.5vw
トランジション
テキストモジュールの移行期間も長くします。
- 移行時間：400ms
クローンセクション
最初のセクションが完了したら、先に進み、セクション全体を必要な回数だけ複製します。 チュートリアルの次のパートでは、各複製に加える必要のある変更を示します。
セクションホバーの背景色を変更する
最初に変更する必要があるのは、セクションホバーの背景色です。
- 背景色：＃ff5b79
行＃1のグラデーションの背景を変更する
行＃1のグラデーションの背景も変更します。
- 色1：＃000000
テキストの色を変更してコピーする
テキストの色とすべてのコピーと一緒に。
- 見出し3のテキストの色：＃ff5b79
テキストモジュールの間隔を変更する
最後になりましたが、行＃2のテキストモジュールの左側のパディングを変更します。 使用する必要のある左パディングの量は、使用しているコンテンツの長さによって異なります。
- 左パディング：21vw
レイアウトを無料でダウンロード
レイアウトに手を置くには、まず下のボタンを使用してレイアウトをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、ホバー時に非表示の行コンテンツを表示する方法を示しました。 私たちが作成した結果は、Diviの組み込みオプションのみを使用して作成されています。 また、チュートリアルの最後にJSONファイルを共有しました。これは、独自の代替デザインの作成にも役立つことを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！