の新しいサイズ オプション Divi がリリースされているため、ホバー リビールの作成方法を示すチュートリアルがいくつかあります。 これらのチュートリアルでは、 コンテンツ マスクは垂直に配置されました。 ただし、場合によっては、水平方向のリビールを作成したい場合もあります。 このチュートリアルでは、ホバー グリッドとオーバーフロー オプションを使用して画像を表示する方法を説明します。 Divi. この作業を行うには、少し異なるアプローチが必要です。 XNUMX 列の行を使用し、すべてのモジュールを上下に配置します。 ホバーすると、列が水平グリッドに変わります。 JSONファイルも無料でダウンロードできます！
行こう。
概要
チュートリアルに入る前に、さまざまな画面サイズでどのように行ったかを簡単に見てみましょう。
作り直しましょう！
新しいセクションを追加する
作業中のページに新しい通常のセクションを追加することから始めます。
新しい行を追加
カラム構造
次の列構造を使用して新しい行を追加し続けます。
デフォルトのグラデーション背景
モジュールを追加せずに、ラインパラメータを開き、次のグラデーション背景を追加します。
- 1色：#b1ffc4
- 2カラー：#ffffff
- 勾配タイプ：放射状
- 放射方向：中心
- 開始位置：28％
- 終了位置：28％
グラデーションの背景の上を飛んで
ホバリングしてグラデーションの背景を変更します。
- 1色：#b1ffc4
- 2カラー：#ffffff
- 勾配タイプ：放射状
- 半径方向：左
- 開始位置：5％
- 終了位置：5％
スペーシング
間隔の設定に移動し、パディングとマージンの値を変更します。
- 上部パディング：0px
- 下部のパディング：0px
- 上余白：50px
- 下マージン：50px
デフォルトの境界線
右上隅と右下隅に50ピクセルの境界線半径を追加します。
ホバーボーダー
「0px」ホバリングにコーナーをもたらします。
デフォルトの影
次に、次のパラメーターを使用して微妙なボックスシャドウを追加します。
- ボックスシャドーブラーフォース：50px
- 影の色：rgba（0,0,0,0.09）
ホバーボックスシャドウ
飛行中にボックスから影を取り除き、影の色を完全に透明な色に置き換えます。
- 影の色：rgba（0,0,0,0）
テキストモジュールを列に追加する
H2コンテンツを追加
テキスト モジュールから始めて、モジュールの追加を開始します。 を入力 コンテンツ H2はお好みで。
H2テキスト設定
[デザイン]タブに切り替えて、それに応じてH2テキスト設定を変更します。
- タイトル2フォント：Acme
- タイトル2フォントスタイル：下線
- タイトル2下線の色：#00ff3f
- タイトル2テキストの色：#000000
- タイトル2テキストサイズ：3vw
スペーシング
次に、カスタム塗りつぶし値を追加します。
- 最適なパディング：6vw
- 下部のパディング：7vw
- 左パディング：2vw
画像モジュールを列に追加
画像をアップロード
この列で必要なXNUMX番目のモジュールはイメージモジュールです。 お好みの風景画像をアップロードしてください。
ライトボックス
次に、リンク設定でライトボックスオプションをアクティブにします。
- ビューアーで開く：はい
サイズ剤
そして、サイズ設定で画像に全幅を強制します。 これにより、すべての画面サイズで画像の感度が維持されます。
- 全幅を強制：はい
イメージモジュールを2回複製
最初のイメージモジュールが完成したら、それを2回コピーできます。
画像を変更する
XNUMXつの複製の画像を変更します。 アップロードする画像が最初の画像と同じサイズであることを確認してください。
行にロールオーバー効果を追加します
サイズ剤
基本的な行とmodの設定が完了したので、ホバー効果を作成します。 行の高さと幅を変更することから始め、オーバーフローを非表示にします。 行サイズ設定を開き、次の変更を行います。
- カスタムのガター幅を使用：はい
- 側溝幅：1
- 幅：20％
- 最大幅：100％
- 身長：15.9vw
ホバー
ホバリング中に幅を「100％」に減らします。 これにより、行にカーソルを合わせた後に画像を表示できます。
- 幅：100％
可視
次の高度なタブに切り替えて、オーバーフローを非表示にします。 これにより、画像がマスクされる前に確実にマスクされます。 訪問者 テキスト モジュールにカーソルを合わせる (デスクトップ) か、クリック (タブレット/モバイル) します。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
トランジション
また、遷移パラメーターで遷移の期間を変更しています。
- 移行期間：0ms
メイン列のロールオーバー要素
ホバーグリッドを作成するには、列の設定を開き、[詳細オプション]タブに移動して、メインのホバー要素に次のCSSコード行を配置します。
ディスプレイ：グリッド。 grid-template-columns：20％25％25％25％; グリッドギャップ：10px;
行を2回複製する
最初の行が完成したら、何度でもクローンを作成できます。 この特定の設計例では、行をXNUMX回複製します。
行1のグラデーション背景を変更します
2行目のグラデーション背景の最初のグラデーションの色を変更します。
- 1色：＃ffdc96
行2のグラデーション背景を変更する
3番目の行についても同じことを行います。
- 1色：＃b7c7ff
テキストモジュールのコピーと2つの複製の下線の色を変更する
コピーでテキストモジュールの複製の下線の色を変更して続行し、完了です！
- 下線付きの色＃1：＃ffaa00
- 下線付きの色＃2：＃0037ff
最終的な考え
このチュートリアルでは、オーバーフロー オプションを使用して水平ホバー グリッドに画像を表示する方法を説明しました。 Divi. デスクトップ上にカーソルを置き、タブレット/携帯電話をクリックすると、画像が表示されました。 画像を公開しましたが、 コンテンツ ジェネレーターのパラメーターを変更して選択します。 このチュートリアルが、独自の代替ホバー グリッド デザインを作成するきっかけとなることを願っています。 ご質問やご提案がございましたら、下のコメントセクションに必ずコメントを残してください。
