Diviの魅力的なツールチップで背景画像にラベルを付ける方法
公開: 2018-11-11背景画像にラベルを付けるためのツールチップを追加することは、訪問者をあなたの製品やサービスに関する貴重な情報に引き付けるための創造的な方法です。 基本的な考え方は、画像上の特定の場所にアイコン（またはテキスト）を配置することです（ピンポイントのあるグーグルマップのように）。 また、Diviのホバー効果を利用すると、アイコンにカーソルを合わせたときに追加のテキストを表示して、魅力的なツールチップを作成できます。
このチュートリアルでは、製品に関する有益なツールチップとして役立つ宣伝文で背景画像にラベルを付ける方法を紹介します。 これを行うには、Fitness Gym Landingページを使用して、高品質のフィットネスに関する情報で背景画像にラベルを付けます。
始めましょう。
スニークピーク
これが、このチュートリアルで構築するデザインのスニークピークです。
何が必要
このチュートリアルでは、次のものが必要になります。
- ディビのテーマ
- Fitness Gym LayoutPackのFitnessGym Landingページ（Divi Builderから入手可能）
- 背景画像に使用する画像で、正確に320px x507pxです。 これをデスクトップにドラッグして、このチュートリアルに使用してください。
既成のレイアウトの準備
開始するには、新しいページを作成し、タイトルを追加してから、VisualBuilderを展開します。 次に、「既成のレイアウトを選択」を選択します。 ライブラリからの読み込みポップアップから、Fitness Gym Landing Pageレイアウトを選択し、[Use ThisLayout]をクリックします。
レイアウトがページに読み込まれたら、右側の列に「注目のプログラム」というタイトルの2列の行がある4番目のセクションまでスクロールダウンします。 この行の左側の列にツールチップを使用して背景画像を追加します。
インラインエディタを使用して、右側の列のタイトルテキストを「SmartFitness」に変更します。
背景画像の追加と行設定のカスタマイズ
この設計では、サイズと間隔が重要であり、正確である必要があります。 そして、それはすべて私たちの背景画像のサイズから始まります。 前に述べたように、背景に使用する画像は320px x507pxである必要があります。 320pxの幅はモバイルの出発点として適しているため、画像のサイズを変更することなく、デザインをモバイルフレンドリーにすることができます。
行設定を開き、背景画像を列1に追加します。次に、以下を更新します。
列1の背景画像サイズ：実際のサイズ
列1の背景画像の位置：中央左
列1の背景画像の繰り返し：繰り返しなし
次に、行にカスタム幅を追加し、上下の間隔を削除する必要があります。
カスタム幅：700px
カスタムパディング：0px上、0px下
幅を700pxに設定すると、タブレットのブレークポイントの前に小さい画面サイズで行が小さくならないようになります。
この時点で、先に進んで、列1の特定の高さを背景画像の高さと同じに設定することをお勧めします。 このようにして、列のコンテンツが画像全体を公開していなくても、画像が表示されたままになることがわかります。 これを行うには、[詳細設定]タブに移動し、次のカスタムCSSを列1のメイン要素に追加します。
height: 507px;
これで、列の高さは画像の高さと等しくなり、行に追加するコンテンツ（またはモジュール）に依存しなくなります。
宣伝文を使用して背景画像にツールチップラベルを追加する
背景画像を配置したら、ツールチップとして機能するように配置およびスタイル設定される宣伝文を追加し始めることができます。 先に進み、列1に宣伝文モジュールを追加して次の宣伝文句設定を更新します。
タイトル：「フォーカス」
内容：「成功への鍵！」
アイコンを使用：はい
アイコン：スクリーンショットを参照
宣伝文全体を背景画像内に収めることができるようにするため、タイトルとコンテンツを数語に抑えることが重要です。
次に、デザイン設定を更新します。 これは宣伝文のより高度なデザインであるため、ホバー時に宣伝文の内容を明らかにするいくつかのホバー効果とともに、変更するオプションがたくさんあります。 次の宣伝文のデザイン設定を更新します。
アイコンの色：＃edf000
円のアイコン：はい
円の色：rgba（0,0,0,0）
円の境界線を表示：はい
円の境界線の色（デフォルト）：rgba（0,0,0,0）
円の境界線の色（ホバー）：＃edf000
画像/アイコンの配置：左
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：40px
次のように設計設定を調整し続けます。
タイトルフォントの太さ：太字
タイトルテキストの色（デフォルト）：rgba（0,0,0,0）
タイトルテキストの色（デフォルト）：＃edf000
本文の色（デフォルト）：rgba（0,0,0,0）
本文の色（デフォルト）：＃ffffff
（デフォルトのテキストの色は、宣伝文にカーソルを合わせるまで非表示にするために完全に透明であることに注意してください。）
カスタムマージン：上15px、下0px、左90px
カスタムパディング：上5px、下5px、右5px
（カスタムマージンは、画像上の特定の場所に宣伝文句アイコンを配置する方法です。）
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：-154px
ボックスシャドウの垂直位置：0px
影の色（デフォルト）：rgba（0,0,0,0）
影の色（ホバー）：＃1e2441
（ボックスシャドウは、宣伝文のコンテンツの背後に背景色を追加するための独創的な方法です。デフォルトでは、ボックスシャドウは完全に透明ですが、ホバーすると素敵な青色で表示されます。）
次に、最初の宣伝文の最終結果をチェックして、ホバー効果とデザインが正しいことを確認します。
次に、blurbモジュールを複製して、2番目のツールチップラベルを作成できます。 宣伝文を複製した後、コンテンツを好きなテキストに更新できます（短くしてください）。 次に、次のように別のカスタムマージンを使用してツールチップを配置するだけです。
カスタムマージン：上0px、下0px、左15px
3番目の宣伝文を作成するには、2番目の宣伝文を複製します。
この3番目の宣伝文句では、画像の右側のスペースが不足するため、コンテンツ用のスペースがあまりありません。 負のマージンを使用して宣伝文を画像の外側に拡張することもできますが、これはモバイルの320pxの画面サイズを超えて拡張することにもなります。 そこで、アイコンが右側に、テキストが左側になるように、宣伝文句のコンテンツを反転させる小さなコードスニペットをいくつか紹介します。 これを行うには、宣伝文の設定を開き、[詳細設定]タブで次のカスタムCSSを追加します。
主な要素のCSS：
direction: rtl;
宣伝文の画像CSS：
padding-left: 15px;
気づかなかった場合は、アイコンが右側に表示されます。 これで、次のカスタムマージンを使用して宣伝文を配置するだけです。
カスタムマージン：上35px、下0px、左0px
また、次のように、ボックスの影が右ではなく左から来るように調整する必要があります。
ボックスシャドウの水平位置：150px
次に、ライブサイトで逆のツールチップを確認します。
最後の宣伝文については、列の上部にある最初の宣伝文をコピーして、3番目の宣伝文の下に貼り付けます。
次に、マージンを次のように更新します。
カスタムマージン：上0px、左100px
デザインの最終結果をチェックしてください！
そして、それらのツールチップホバー効果をチェックしてください！
レスポンシブですか？
このデザインは、最初からモバイルを念頭に置いて構築されました。 画像の幅は320pxで、これはほとんどの小型スマートフォンの幅です。 また、すべてをピクセル長の単位を使用してサイズ設定および配置したため、ブラウザーのサイズを調整しても、デザイン（ツールチップを含む）は動きません。
ただし、小さな電話画面で画像の幅を確認して最大化するために、もう1つ行う必要がある場合があります。 デフォルトでは、モバイルでは行の幅が80％になるため、これを100％にするために、次のように行のメイン要素にカスタムCSSとして追加できます。
width: 100%;
700pxのカスタム幅は、デスクトップでは引き続き最大幅として機能しますが、モバイルでは100％になります。
最終的な考え
このようなツールチップとホバー効果で背景画像にラベルを付けると、視聴者を有用な情報で引き付けるプロフェッショナルなデザインの要素を追加できます。 そして、この概念を他のユースケースに使用する方法は複数あると確信しています。 ただし、モバイルでもデザインを維持することを計画している場合は、課題が伴います。 秘訣は、モバイルファーストで考え、前もって計画することです。 これが今後のプロジェクトのインスピレーションになることを願っています。 どちらかといえば、少なくともあなたはアイコンまたは右で宣伝文句を作成する方法を知っています:)。
以下のコメントであなたからの連絡を楽しみにしています。
乾杯！