Diviのコーナータブを拡張してホバーでコンテンツを表示する方法（無料ダウンロード）

独自のホバー効果を使用して、ユーザーをコンテンツに引き込むための新しく創造的な方法を見つけることは常に楽しいことです。 これを行うための1つの優れた方法は、展開するコーナータブを使用してホバーでコンテンツを表示することです。 これにより、ユーザーは列または画像の隅にあるタブにカーソルを合わせると、ユーザーにとって役立つコンテンツが追加されたオーバーレイを展開できます。

このチュートリアルでは、展開するコーナータブを使用して、ホバー時にコンテンツを表示する完全にユニークなDiviレイアウトを作成します。 実際、Diviの列の4つのコーナーすべてに拡張コーナータブを設計する方法を示します。

始めましょう！

スニークピーク

これは、一緒に構築する拡張コーナータブレイアウトの概要です。 ホバー効果とコンテンツが美しく対称的であることに注目してください。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

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

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

拡張コンテンツオーバーレイレイアウトを最初から作成する

パート1：右下の位置から拡張コーナータブを作成する

まず、通常のセクションに2列（1/2）の行を追加します。

モジュールを追加する前に、次のようにカスタムガター幅で行設定を更新します。

• 側溝幅：4

この最初の注目アイテムでは、列の右下にコーナータブ（宣伝文句モジュールを使用）があり、ホバー時に列/画像全体を展開してオーバーレイする列の背景画像を作成します。

宣伝文のモジュールを追加することから始めましょう。

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

列1に宣伝文モジュールを追加します。

まだスタイルを設定するつもりはありません。 基本的に、宣伝文を含む列のスタイルを設定できるように、いくつかのコンテンツが必要でした。

列1の設定

宣伝文を配置した状態で、行の設定を開き、クリックして列1の設定を編集します。 次に、以下を更新します。

• 背景画像[画像を挿入]
• 背景画像サイズ：実際のサイズ

注：私の例では、Brewery LayoutPackから取得した透明な背景のビール画像を使用しています。 それらは128pxx 359pxであるため、画像の実際のサイズを使用しています。

列1の境界線

• 丸みを帯びた角：10px右下
• 右ボーダー幅：2px
• 右の境界線の色：＃e94558
• 下の境界線の幅：2px
• 下の境界線の色：＃e94558

カスタムCSSとオーバーフロー

[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。

height: 400px;

以下を更新します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

このカスタムの高さは、宣伝文モジュール（コーナータブ）が列の高さ全体を拡張するために必要です。 そして、ホバー状態になるまで、ほとんどの宣伝文句モジュールを列の外側に隠すことができるように、隠されたオーバーフローが必要です。

宣伝文モジュールコンテンツの追加

これで、列1内の宣伝文モジュールのカスタマイズを開始する準備が整いました。宣伝文の設定を開き、以下を更新します。

• タイトル：マンゴーIPA
• 体：

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• 画像：列の背景に使用したものと同じ画像を追加します

宣伝文モジュールの設計

次のように、ホバー時に宣伝文に背景色を付けます。

• 背景色（デスクトップ）：透明
• 背景色（ホバー）：rgba（255,255,255,0.9）

[デザイン]タブで、以下を更新します。

• 画像/アイコンの配置：左
• タイトルフォント：Oswald
• タイトルフォントスタイル：TT
• タイトルテキストサイズ：40px
• ボディフォントの太さ：セミボールド
• 本文の色（デスクトップ）：透明
• 本文の色（ホバー）：＃121212

• 画像の幅：100px（デスクトップ）、64px（電話）
• コンテンツの幅：100％
• 高さ：100％
• パディング（デスクトップ）：上15％、下15％、左8％、右8％
• パディング（ホバー）：上8％、下8％、左8％、右8％

• 丸みを帯びた角（デフォルト）：左上20px
• 丸みを帯びた角（ホバー）：10px左上
• 上枠の幅：4px（デスクトップ）、2px（ホバー）
• 上枠の色：＃e94558
• 左の境界線の幅：4px（デスクトップ）、2px（ホバー）
• 左ボーダーの色：＃e94558

変換オプション（デスクトップ）

• 変換スケールY軸：50％
• 変換スケールX軸：50％
• 変換変換Y軸：50％
• 変換変換X軸：30％
• 変換の原点：右下

変換オプション（ホバー）

• 変換スケールY軸（ホバー）：100％
• 変換スケールX軸（ホバー）：100％
• 変換変換Y軸（ホバー）：0％
• 変換変換X軸（ホバー）：0％

宣伝文の画像を右側に反転するには、次のカスタムCSSを宣伝文のコンテンツボックスに追加します。

direction: rtl

注：方向「rtl」は「右から左」を表し、コンテンツのデフォルトの順序（左から右）を切り替えます。

結果

右下の位置から拡張コーナータブの最終結果を確認してみましょう。 ホバーすると列全体に表示されるように展開されます。

パート2：左下の位置から拡張コーナータブを作成する

列を複製する

左下の位置から拡張コーナータブを作成するには、列全体を複製してデザインをジャンプスタートします。 行設定を開き、列1を複製します。次に、余分な列を削除して、正確に2つだけ複製するようにします。

列2の設定を更新する

次に、列2の設定を開き、以下を更新します。

• 丸みを帯びた角：左下10px
• 右ボーダー幅：0px
• 左ボーダー幅：2px
• 左ボーダーの色：＃e94558

宣伝文の設定を更新する

次に、宣伝文の設定を次のように更新します。

• テキストの配置：右
• 丸みを帯びた角（デスクトップ）：右上20px
• 丸みを帯びた角（ホバー）：10px右上
• 左ボーダー幅：0px
• 右の境界線の幅：4px（デスクトップ）、2px（ホバー）
• 右の境界線の色：＃e94558

• 変換変換X軸（デスクトップ）：-30％
• 原点の変換（デスクトップ）：左下

次に、[宣伝文]ボックスのカスタムCSSを必ず削除してください。

結果

結果は次のとおりです。 これが最初のものと対称であり、列の左下の位置から拡張していることに注目してください。

パート3：右上の位置から拡張コーナータブを作成する

これで、最後の2つの拡張コーナータブデザインを開始する準備が整いました。 有利なスタートを切るために、すでに設計した宣伝文を含む行全体を複製しましょう。

列1の設定を更新する

次に、重複する行の設定を開き、次に列1の設定を開いて、以下を更新します。

• 丸みを帯びた角10px右上
• 下の境界線の幅：0px
• 上枠幅：2px
• 上枠の色：＃e94558

宣伝文モジュールの設定を更新する

次に、宣伝文モジュールの設定を開き、以下を更新します。

• 丸みを帯びた角（デスクトップ）：左下20px
• 丸みを帯びた角（ホバー）：左下10px
• 上枠幅：0px
• 下の境界線の幅：4px（デスクトップ）、2px（ホバー）
• 下の境界線の色：＃e94558
• 変換変換Y軸（デスクトップ）：-50％
• 変換の原点：右上

カスタムCSSを宣伝する

現在、上の行の他の2つの宣伝文のように、タイトルが表示されていない宣伝文モジュールの左下の部分しか表示されていません。 タブ内にタイトルを表示するには、カスタムCSSを使用してタイトルを宣伝文の左下に再配置する必要があります。

次のカスタムCSSを[宣伝文のタイトル]ボックスに追加します。

position: absolute;
bottom: 0;
left: 15px;

次に、次のCSSを宣伝文コンテンツボックスに追加します。

direction: rtl;
height: 100%;

パート4：左上の位置から拡張コーナータブを作成する

4番目で最後の拡張コーナータブホバー効果では、それを左上隅に配置して、グリッドレイアウト全体の対称的なデザインを完成させます。

列2の設定を更新する

行設定の下で、列2の設定を開き、以下を更新します。

• 丸みを帯びた角：左上10px
• 下の境界線の幅：0px
• 上枠幅：2px
• 上枠の色：＃e94558

宣伝文の設定を更新する

次に、列2の宣伝文の設定を開き、以下を更新します。

• 丸みを帯びた角（デスクトップ）：右下20px
• 丸みを帯びた角（ホバー）：10px右下
• 上枠幅：0px
• 下の境界線の幅：4px（デスクトップ）、2px（ホバー）
• 下の境界線の色：＃e94558

次に、変換オプションを更新します。

• 変換変換X軸（デスクトップ）：-30％
• 変換の原点：左上

カスタムCSSを宣伝する

次に、次のカスタムCSSを[宣伝文のタイトル]ボックスに追加します。

position: absolute;
bottom: 0%;
right: 0%;

次に、次のCSSを[宣伝文]ボックスに追加します。

height: 100%;

パート4：レイアウトのデザインの仕上げ

セクションの背景色

次のようにセクションの背景色を追加します。

• 背景色：#efefef

タイトルの追加

タイトルを作成するには、2つの行の中央に行を追加し、1つの列の行にテキストモジュールを追加します。

コンテンツを追加します：「季節限定」。

次に、次の設定を更新します。

• 見出し2フォント：Merriweather
• 見出し2フォントの太さ：太字
• 見出し2フォントスタイル：TT
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃999999
• 見出し2テキストサイズ：50px（デスクトップ）、30px（タブレット）、24px（電話）
• 見出し2文字の間隔：1em
• パディング：左50px（デスクトップ）、左30px（タブレット）、左24px（電話）

最終結果

コーナータブを拡張して、レイアウトの最終結果を確認してください。

そして、これがモバイルでのデザインです。

最終的な考え

このレイアウトデザインで紹介されている拡張コーナータブは、DiviWebサイトで紹介したいすべての種類のコンテンツで確実に機能します。 四隅すべてを使用する必要もありません。 たとえば、右上隅のタブのみを使用して画像のグリッドレイアウトを作成し、ホバーするとコンテンツを表示できます。 設計能力はこれで豊富です。 楽しむ。

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

乾杯！