Diviを使用してホバータブで機能を紹介する方法

Webページで機能や製品を紹介するための新しくクリエイティブな方法をお探しですか？ もしそうなら、この投稿では、Diviの組み込みオプションのみを使用してホバータブに機能を表示する方法を紹介するので、読み続けてください。 このアプローチで得られる可能性は無限であり、Diviをより深いレベルで理解できるようになります。 タブホバー効果は、ホバーに適したデスクトップ環境でのみ発生します。 ホバータブを小さい画面サイズから表示している場合、機能は元の形式で一覧表示されます。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

作り始めましょう！

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

新しいセクションを追加

グラデーションの背景

新しいページを追加するか、既存のページを開いて新しいセクションを追加します。 セクション設定を開き、グラデーションの背景をセクションに追加します。 上の印刷画面でわかるように、グラデーションの背景を使用してホバータブの左側をカバーします。

• 色1：＃f2f2f2
• 色2：#ffffff
• グラデーション方向：87度
• 開始位置：20％
• 終了位置：20％

間隔

次に、両方のオプションに「0px」を追加して、セクションのカスタムの上部と下部のパディングを削除します。

• トップパディング：0px
• ボトムパディング：0px

新しい行を追加

カラム構造

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

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

• 背景色：#ffffff

行の配置

行の配置も変更します。

• 行の配置：左

デフォルトのサイズ

また、サイズ設定も変更してください。

• カスタム幅を使用：はい
• ユニット：PX
• カスタム幅：400px
• カスタムガター幅を使用：はい
• 側溝幅：1

ホバーサイジング

ホバーのサイズ設定で[カスタム幅]オプションを変更します。 これにより、ホバーしたときに行を拡張できます。

• カスタム幅：2000px

間隔

次に、間隔設定に移動し、デフォルトの上部と下部のパディング値を削除します。

• トップパディング：0px
• ボトムパディング：0px

デフォルトの境界線

行の右上隅に「20px」を追加し、行にも左の境界線を追加します。

• 左ボーダー幅：20px
• 左ボーダーの色：＃6d44ff

ホバーボーダー

代わりに「0px」を追加して、ホバーの「20px」右上の丸い角を削除します。

デフォルトのボックスシャドウ

最後になりましたが、微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-10px
• 影の色：rgba（0,0,0,0.11）

ホバーボックスシャドウ

そして、ホバー時に影の色を完全に透明な色に変更します。

• 影の色：rgba（255,255,255,0）

行に宣伝文モジュールを追加する

コンテンツを追加する

すべての行設定の変更が完了したので、先に進んで宣伝文モジュールを列に追加できます。 他のモジュールを自由に使用してください。 モジュールを追加したら、選択したコンテンツをいくつか追加します。

アイコンを選択

次に、お好みのアイコンを選択します。

アイコン設定

そして、アイコン設定でアイコンの外観を変更します。

• アイコンの色：＃5323ff
• アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：54px

デフォルトのタイトルテキスト設定

次に、タイトルテキストの設定を変更します。

• タイトルフォント：ポピンズ
• タイトルテキストの配置：中央
• タイトルテキストの色：＃5323ff
• タイトルテキストサイズ：25px
• タイトル文字の間隔：-1px
• タイトルラインの高さ：1em

タイトルテキスト設定にカーソルを合わせる

そして、ホバー時にタイトル行の高さを変更します。

• タイトルラインの高さ：1.5em

デフォルトの本文テキスト設定

次に、本文の設定に移動して、いくつかの変更を加えます。 これには、テキストサイズを「0px」に変更することも含まれます。 これは、本文テキストをホバーにのみ表示するのに役立ちます。

• ボディフォント：ポピンズ
• ボディフォントの太さ：軽い
• 本文の配置：中央
• 本文の色：＃000000
• 本文のサイズ：0px（デスクトップ）、15px（タブレットと電話）
• ボディラインの高さ：2.2em

本文のテキスト設定にカーソルを合わせる

本文がホバーで表示されるようにするには、ホバーでテキストサイズを変更します。

• 本文サイズ：15px

デフォルトの間隔

モジュールに呼吸するためのスペースを与えるために、モジュールにカスタムの上部と下部のパディングを追加しています。

• トップパディング：80px
• ボトムパディング：80px

ホバー間隔

ホバー時に間隔設定を変更します。 行と宣伝文モジュールの両方にホバーオプションを適用しているため、VisualBuilderを終了する前に最終結果を確認することはできません。

• トップパディング：80px
• ボトムパディング：80px
• 左パディング：20vw
• 右パディング：20vw

行を3回クローンする

最初の行とその宣伝文句の変更が完了したら、先に進んで、必要な回数だけ行のクローンを作成できます。

行と宣伝文のモジュール＃2を変更する

行間隔の変更

最初の複製を開き、カスタムの左マージンを追加します。 これにより、この投稿のプレビューで気付くことができる階段効果を作成できます。

• 左マージン：6vw

行の境界線の色を変更する

行の左側の境界線の色も変更します。

• 左ボーダーの色：＃00ffcc

宣伝文の内容とアイコンを変更する

次に、宣伝文モジュールを開き、アイコンを変更します。

宣伝文モジュールのアイコンの色を変更する

アイコンの色と一緒に。

• アイコンの色：＃00eda6

タイトルのテキストの色を変更する

そして、タイトルのテキストの色。

• タイトルテキストの色：＃00eda6

行と宣伝文のモジュール＃3を変更する

行間隔の変更

2番目の複製にもカスタム左マージンを追加します。

• 左マージン：12vw

行の境界線の色を変更する

左の行の境界線の色を変更します。

• 左ボーダーの色：#afebff

宣伝文の内容とアイコンを変更する

宣伝文のアイコンとコンテンツとともに。

宣伝文モジュールのアイコンの色を変更する

アイコンの色も変更します。

• アイコンの色：＃68d9ff

タイトルのテキストの色を変更する

そして、タイトルのテキストの色も。

• タイトルテキストの色：＃68d9ff

行と宣伝文のモジュール＃4を変更する

行間隔の変更

次の最後の複製に！ 行にカスタムの左マージンを追加します。

• 左マージン：18vw

行の境界線の色を変更する

行の左側の境界線の色も変更します。

• 左ボーダーの色：＃dd87cf

宣伝文の内容とアイコンを変更する

行の宣伝文モジュールを開き、モジュールのアイコンとコンテンツを変更します。

宣伝文モジュールのアイコンの色を変更する

アイコンの色と一緒に。

• アイコンの色：＃dd6aca

タイトルのテキストの色を変更する

また、タイトルのテキストの色も同様です。

• タイトルテキストの色：＃dd6aca

プレビュー

チュートリアルを終えたので、さまざまな画面サイズでの結果を最後に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込みオプションを使用してホバータブを作成する方法を紹介しました。 このアプローチは、機能や製品に関するコンテンツをインタラクティブな方法で共有するのに役立ちます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！