Diviを使用してホバーでポップアウトサービスの説明を作成する

ホバー時にポップアウトサービスの説明を作成することは、ユーザーに追加情報を通知して関与させる効果的な方法です。 ツールチップと同じように、これらのポップアウトの説明により、ホバー時にサービスに関する詳細情報が表示されます。 しかし、Diviを使用すると、Divi Builderで利用できるデザインツールの完全なスイートを使用して、追加のカスタムCSSなしで見事なポップアウトデザインを作成できます。

このチュートリアルでは、DiviWebサイトでポップアウトサービスの説明を作成するのがいかに簡単かを示します。 秘訣は、ホバー時に行の幅を調整するたびにモジュールが互いに後ろにスライドして飛び出すようにモジュールを配置することです。

始めましょう！

スニークピーク

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

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

始めるために必要なもの

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

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

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

Diviを使用してホバーでポップアウトサービスの説明を作成する

セクションと行を作成します

まず、1列の行を持つ新しい通常のセクションを作成します。

モジュールを追加する前に、次のように行設定を更新します。

暗い背景画像または暗い背景色を追加します。 Investment Company LayoutPackの抽象的な背景画像を使用しています。 ただし、それを使用したくない場合は、＃161c29の背景色を追加するだけです。

• 側溝幅：1
• 幅：100％
• 高さ：320px（デスクトップ）、自動（タブレットと電話）\
• パディング：0px上、0px下

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

次に、宣伝文モジュールを行に追加します。

そして、次のように宣伝文モジュールの設定を更新します。

• タイトル：サービス
• アイコン：スクリーンショットを参照

デフォルトの本文コンテンツも削除します。

• 背景画像：約320px x215pxの画像を追加します
• 背景画像サイズ：フィット
• 背景画像の位置：上部中央

• 背景グラデーションの左の色：rgba（31,72,192,0.61）
• 背景グラデーション右の色：＃161c29
• 開始位置：34％
• 終了位置：71％
• 背景画像の上にグラデーションを配置：はい

• アイコンの色：#ffffff
• テキストの配置：中央
• タイトルフォント：Archivo
• タイトルテキストの色：#ffffff
• タイトルテキストサイズ：38px
• タイトル文字間隔：4px
• 最大幅：320px
• モジュールの配置：中央
• 高さ：320px

• パディング：68pxトップ
• 丸みを帯びた角：10px
• Zインデックス：1

zインデックス1の値を追加することは、宣伝文句モジュールが最終的にその背後にスタックされる他のモジュールの上に留まるようにするために重要です。

召喚状モジュールを追加する

次に、宣伝文句モジュールの左側に配置されるアクションモジュールへの呼び出しを追加する必要があります。

これは、最終的にホバーするとポップアップする2つのコンテンツ領域の最初のものになります。

次に、デフォルトの背景色を取り出して、次のようにデザイン設定を更新する必要があります。

• テキストの配置：左
• タイトルフォント：Archivo
• タイトルテキストサイズ：22px
• 幅：320px
• モジュールの配置：左（デスクトップ）、中央（タブレットと電話）
• 高さ：320px（デスクトップ）、自動（タブレットと電話）
• マージン：-320px（デスクトップ）、0px（タブレットと電話）
• パディング：上40px、左40px、右40px

召喚状モジュールを複製し、右揃えにします

宣伝文の右側に表示されるコンテンツの2番目のブロックを作成するために、ワイヤーフレームビューモードを展開し、召喚状モジュールを複製することができます。 次に、複製の設定を開き、モジュールの配置を右側に更新します。

これまでのデザインは次のようになります。

ボタンの作成

デザインに追加する必要がある最後の要素はボタンです。 必要に応じて、いずれかの召喚状モジュール内にボタンを追加できます。 しかし、このデザインでは、行の下部に表示されたままのボタンを追加する方がよいと思いました。

ボタンを作成するには、ワイヤーフレームビューモジュールを展開し、アクションモジュールの2番目の呼び出しのすぐ下にボタンモジュールを追加して、行/列の最後のモジュールにします。

ボタンモジュールの設定を開き、デスクトップビューモードを切り替えて、ボタンを視覚的に編集できるようにします。

ボタンテキスト「詳細」を追加します。

次に、ボタンのスタイルを次のように更新します。

• ボタンの配置：中央
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃1f48c0
• ボタンの境界線の幅：0px
• ボタンの境界線半径：10px
• ボタンの文字間隔：4px
• ボタンフォント：Archivo

今、私たちがする必要があるのは、ボタンを配置することだけです。

• マージン（デスクトップ）：-25pxトップ
• マージン（タブレットと電話）：上25px、下50px
• Zインデックス：2

zインデックス値が2の場合、ボタンが宣伝文句モジュール（azインデックスが1）の上に留まるようになります。

ポップアウトホバー効果の作成

ポップアウトサービスの説明を実行するために必要な主なホバー効果には、ホバー時に行の幅を変更することが含まれます。 これを行うには、デフォルトで行に狭い幅を指定する必要があります。 これにより、モジュールは互いにスタックし、宣伝文句モジュールの背後に隠れたままになります。 次に、ホバー時に行の幅を拡大して、アクションモジュールへの2つの非表示の呼び出しを公開します。

行設定を開き、次のように幅を更新します。

• 最大幅（デスクトップ）：320px
• 最大幅（ホバー）：1080px
• 最大幅（タブレットと電話）1080px

次に、最後の仕上げとして、行に境界線の半径を追加し、可視性オーバーフローオプションを可視に更新して、ボタンが非表示にならないようにします。

• 丸みを帯びた角：10px
• 水平オーバーフロー：表示
• 垂直オーバーフロー：表示

最終結果

これまでのポップアウトサービスの説明を確認してください。

そして、ここではタブレットと電話のディスプレイにあります。

試すべきその他の設計オプション

基本的なセットアップが整ったので、より多くのデザインオプションを試すのはいつでも楽しいことです。 ポップアウトサービスの説明のために試すことができるいくつかの提案があります。

セクションの背景色の追加

必要に応じて、行の背景色/画像に一致するセクションに背景色を追加して、独自のポップアウトデザインを作成できます。

行設定に移動し、以下を更新します。

• 背景色：＃161c29

次に、結果を確認します。

2つのモジュールのみを使用する

2つのモジュールのみを使用してよりコンパクトなポップアウトが必要な場合は、アクション呼び出しモジュールの1つを削除してから、宣伝文句モジュールを左に揃えて、ホバー時に2つが表示されるようにします。

これを行うには、ワイヤフレームビューモードを展開します。 次に、blurbモジュールのすぐ下にある最初のアクションモジュールの呼び出しを削除します。

その後、左側のモジュール配置で宣伝文句モジュールを更新します。

• モジュールの配置：左（デスクトップ）、中央（タブレット）

最後に、ホバー時に行の最大幅を減らして、よりコンパクトにします。 行設定を開き、以下を更新します。

• 最大幅（ホバー）：700px
• 最大幅（タブレット）：700px

これが最終結果です。

そして、ここでは白い背景にあります。

最終的な考え

ホバー時にポップアウトサービスの説明を作成することは、訪問者をコンテンツに引き付けるユニークな方法です。 この機能は、Diviのすべての設計機能が満載された豪華で有益なツールチップのように機能します。 そして、それはとても簡単です。 モジュールのサイズと配置が決まったら、ホバー時に行の幅を調整するだけです。 さらに多くのアプリケーションについて、さまざまなモジュールやコンテンツを自由に試してみてください。 どちらかといえば、これがDiviでより多くのことをするためのもう少しのインスピレーションをあなたに与えることを願っています。

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

乾杯！