Divi行を水平および垂直ホバータブに変換する方法

タブは、重要な情報をWebサイトの簡潔な領域で利用できるようにするのに間違いなく役立ちます。 これにより、ユーザーが長いページのコンテンツをスクロールする必要が少なくなります。 Diviのタブモジュールは使いやすく、クリックするだけでシンプルなコンテンツを切り替えるのに最適です。

ただし、このチュートリアルでは、Divi行全体をホバータブに変換する方法を紹介します。 また、水平タブと垂直タブの両方を作成する方法も示します。 これにより、Diviの能力が解き放たれ、タブのコンテンツ領域ごとに複数のモジュールを備えた完全な行レイアウトが設計されます。 プラグインは必要ありません！

始めましょう。

スニークピーク

これは、このチュートリアルで一緒に作成する水平ホバータブと垂直ホバータブの概要です。

DiviRowsホバータブレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

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

始めるために必要なもの

開始するには、次の設定が必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
3. モックコンテンツに使用する3つの画像

その後、Diviでいくつかのホバータブの作成を開始するための空白のキャンバスが作成されます。

Divi行を使用した水平ホバータブの作成

開始するには、2列の行を持つ新しい通常のセクションを作成します。

行の背景、パディング、およびボックスの影

モジュールを追加する前に、まず行設定を少しカスタマイズしましょう。 タブ機能のために行を配置するには、後で行に戻る必要があります。

行設定を開き、以下を更新します。

背景のグラデーションの左の色：＃284f91
背景のグラデーションの正しい色：＃4646c4

パディング：上50px、下50px、左50px、右50px
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウカラー：rgba（70,70,196,0.66）

行へのコンテンツの追加

次に、いくつかのモックコンテンツを行に追加します。 コンテンツ領域に列とモジュールの任意の組み合わせを追加できることに注意してください。

1列目に、画像モジュールを使用して画像を追加します。 Design Conference LayoutPackの1つを使用しています。

右側の列に、行動モジュールの呼び出しを追加し、以下を更新します。

ボタンリンクURL：＃（今のところボタンを表示するためだけに）
背景色を使用：いいえ

テキストの配置：左
タイトルフォント：ラト
タイトルテキストサイズ：60px（デスクトップ）、50px（電話）

タブの作成

ユーザーがカーソルを合わせてこの行のコンテンツを表示する実際のタブを作成するには、テキストモジュールを作成し、カスタムCSSを使用して右上に配置する必要があります。

先に進み、列1の画像の下に新しいテキストモジュールを追加して、以下を更新します。

内容：「タブワン」

背景色：＃284f91（これは行の左側のグラデーションの色と一致する必要があります）
テキストテキストの配置：中央
テキストテキストの色：#ffffff
幅：100px
高さ：50px
マージン：上-100px、左-50px
パディング：14pxトップ

最後に、次のカスタムcssをメイン要素に追加して、行の一番上に絶対位置を指定します。

position: absolute !important;
top: 0;

このcssと追加したカスタムマージンにより、タブが行の左上に正確に配置されます。 ユーザーが後でその行にカーソルを合わせることができるように、タブが実際に行の上にあることが重要です。

セクションの高さと間隔

残りの行とタブを作成し続ける前に、セクションに上下の余白を追加して、行に少し余裕を持たせましょう。 この設計では、セクションにも設定された高さを与えるため、マージンを使用してセクションの間隔を空けることが重要です。 行がセクションの高さ全体に広がるようにするため、セクションに設定された高さを指定する必要があります。 これは、各行（タブコンテンツ）のセクションの高さが同じになることを意味します。 したがって、各行のコンテンツの量が同程度であることが最善です。そうしないと、一部の行タブに不要なネガティブスペースが表示されます。 これは後でもっと意味があるはずです。

今のところ、セクション設定を開き、以下を更新します。

高さ：500px（デスクトップ）、900px（タブレット）、750px（電話）
マージン：上100px、下100px
パディング：0px上、0px下

行の列がモバイルでスタックする場合、より長いコンテンツスペースを考慮して、セクションの高さを調整する必要があることに注意してください。 したがって、自分のニーズに合わせて、この高さに微調整する必要があります。

次に、設定を保存して、それらの行の追加に戻りましょう。

タブコンテンツの2行目を作成する

2番目の行を作成するには、前に作成した行を複製します。 テキストモジュールを列1に移動し、画像を列2に移動します。次に、画像を新しい画像で更新します。 これは、各タブでさまざまなコンテンツがどのように表示されるかを理解するのに役立ちます。

2行目の設定を開き、背景のプレビュー領域にカーソルを合わせて背景のグラデーションの色を切り替え、小さな「切り替え」アイコンをクリックします。

次に、列1のタブの作成に使用したテキストモジュールの設定を開き、新しい上部のグラデーションに一致する色を付けます。

背景色：＃4646c4

次に、タブを右に移動して、この行が上の行と重なるときに、最初の行のタブの右側にタブが直接表示されるようにする必要があります。

マージン：左50px

2行目に不透明度フィルターのホバー効果を追加する

行には、不透明度フィルターのホバー効果を追加して、タブにカーソルを合わせて行のコンテンツを表示するときに、適切なホバー遷移が発生するようにすることができます。

行設定を開き、次のフィルターを追加します。

不透明度：70％（デフォルト）、100％（ホバー）

次に、不透明度フィルターのホバー効果の遷移時間と速度曲線を追加します。

移行時間：500ms
遷移速度曲線：線形

タブコンテンツの3行目を作成する

これで、タブコンテンツの最後の行を追加できます。 これを行うには、作成した2番目の行を複製します。 次に、テキストモジュールを列1に移動し、画像を列2に移動します。そして、画像モジュールを新しい画像で更新します。

新しい背景グラデーションで行設定を更新します。

背景グラデーションの左の色：＃333333
背景のグラデーションの正しい色：＃4646c4

次に、列1のタブを作成するために使用されるテキストモジュールの設定を開き、色と余白を更新します。

背景色：＃333333
マージン：残り150px

これは、行を互いにオーバーラップするように配置する前のページの外観です。

絶対配置で行をオーバーラップする

行をオーバーラップするには、絶対配置を使用する必要があります。 次に、Zインデックスオプションを使用して、タブにカーソルを合わせたときに各行を最前面に表示します。 ただし、行に絶対位置を指定しているため（親/セクションの高さが設定されているため）、各行に100％の高さを追加して、セクションの高さ全体にまたがるようにすることができます。

これがその方法です。

まず、ワイヤーフレームモードを展開します。 次に、複数選択を使用して3つの行すべてを選択し、そのうちの1つの設定を開いて、要素設定モーダルを展開します。 次に、高さを100％に更新します。

高さ：100％

これにより、3行すべての高さが100％に設定されます。

次に、次のカスタムCSSをメイン要素に追加します。

position: absolute !important;
left: 0;
right: 0;
margin: auto;

次に、デスクトップビューモードを展開して、行がどのようにうまく重なり合っているかを確認し、タブを作成します。

Zインデックスを使用したホバーの行の順序の変更

今、あなたは3番目の行/タブが最前線にあることに気づいたかもしれません。 したがって、別のタブにカーソルを合わせるまで最初のタブが最初に表示されるように、Zインデックスを使用して行を並べ替える必要があります。

これを行うには、ワイヤーフレームビューモードに戻り、作成した最初の行の設定を開きます（タブ1を使用）。 次に、zインデックスを次のように更新します。

Zインデックス：10

次に、複数選択を使用して2番目と3番目の行を選択します。 次に、要素設定モーダルを開き、ホバー時に次のzインデックスを両方の行に追加します。

Zインデックス：11（ホバー）

それでおしまい。 最終結果を確認してみましょう。

最終結果

これが機能する理由は、技術的には、各タブ（テキストモジュール）が行の上下に配置されていても、各行の一部であるためです。 そのため、タブにカーソルを合わせると、タブが含まれている行が表示されます。

そして、これがモバイルでどのように見えるかです。

垂直ホバータブの作成

行に垂直タブを追加する場合、実際に行う必要があるのは、各タブの作成に使用されるテキストモジュールの位置を変更することだけです。 また、タブ用のスペースを確保するために、行のサイズとセクションの間隔を微調整する必要があります。

これが何をすべきかです。

先に進んで、先ほど作成したホバータブを含むセクションを複製して、新しいデザインを使用できるようにします。

次に、セクション設定を開き、以下を更新します。

パディング：左10％、右10％

次に、複数選択を使用して3つの行すべてを選択し、次のように要素設定を更新します。

幅：70％（デスクトップ）、70％（タブレット）、80％（電話）
最大幅：980px

次に、3つの宣伝文すべてのグラデーションの方向を90度に更新して、タブを左側に配置すると、左側のグラデーションの色がタブの背景色と混ざり合うようにします。

グラデーション方向：90度

次に、テキストモジュールのタブを行の左側に配置して、必要な垂直タブを取得します。

最初の行のテキストモジュールタブ設定を開き、以下を更新します。

マージン（デスクトップ）：上-50px、左-150px
マージン（電話）：上-100px、左-50px

電話のマージン設定は、水平タブ表示のためにタブを行の上に戻すことです。

次に、セクション行のテキストモジュールタブの設定を開き、以下を更新します。

マージン（デスクトップ）：上0px、左-150px
マージン（電話）：上-100px、左50px

そして、3行目の最後のタブについて、以下を更新します。

マージン（デスクトップ）：上50px、左-150px
マージン（電話）：上-100px、左150px

最終結果

それでは、最終結果を確認しましょう。

そしてここにそれは1つのタブレットと電話です。

最終的な考え

少し創造的な思考とDiviの力で、Divi行を使用してかなりクールなカスタムホバータブを作成できます。 表示できるものにはいくつかの制限があります。 たとえば、この設定では、すべての行がセクションと同じ高さである必要があります。 しかし、プラグインを使用する必要がないため、これは素晴らしい解決策だと思います。 また、コンテンツにDivi行を使用できるため、次のプロジェクトでこれらのホバータブを使用する方法はたくさんあります。

コメントでお返事をお待ちしております。

乾杯！