Elementor ウェブサイトにツールチップを追加する方法

Elementor Web サイトにツールチップを追加する方法をお探しですか? その場合は、適切なページにたどり着きました。

ツールヒントは、イメージまたは特定のテキストの上にカーソルを合わせると表示されるテキストのスニペットを示す、スクリーン ヒントまたは情報ヒントとも呼ばれます。 これらのツールチップは、代替テキスト、ラベル、またはタイトル テキストとして、インターネット上またはデスクトップ上のどこにでもあります。

インターネットを開くと、画像、アイコン、または見出しが表示されることがあります。 これらのフィールドにマウス ポインターを合わせると、ツールヒントであるテキスト ラベルが表示されます。

同様に、ツールチップ機能を使用して、Web サイトでも同じことができます。

この記事では、ツールチップを追加し、Elementor および PowerPack アドオンを使用してその外観をカスタマイズする方法について説明します。

それでは、これ以上苦労せずに先に進みましょう。

ツールチップとは何ですか?

ツールチップは基本的に、ユーザーがインターネット ブラウザー、アプリ、デスクトップ画面などを使用しているときに表示される小さな UI 要素です。

ツールチップをその名前自体で理解してみましょう。

ほら、名前自体が示すように、それはそのツールヒントを与えるトリガーがあるときはいつでも、要素またはフィールドについてユーザーに伝えます。 このトリガーは、コーディング中に構造化されているように、ホバーまたはクリックのいずれかです。

これらのツールチップは、特定の要素、フィールド、またはツールを示す簡単な説明またはタイトルを含む小さなテキスト ボックスです。 たとえば、デスクトップ画面を参照して、ツールバーまたは Windows のスタート メニューのアイコンを見てください。

ご覧のとおり、' Windows スタート メニュー' のアプリには、そのアプリケーションに関する情報を示す小さなテキスト ボックスが表示されます。 これは、システムや Web サイトのどこにでも表示されるツールチップです。

したがって、これらのツールチップを Web サイト全体に表示したい場合は、それらを追加する必要があります。

ツールチップが Web サイトのユーザー エクスペリエンスを向上させる方法

これらのツールチップが Web サイトのユーザー エクスペリエンスの向上にどのように役立つかを見てみましょう。

ツールチップは、Web サイトの次のような領域に追加できます。

• 画像、アイコンなどのクリック可能な要素。
• タイトルは、テキストまたはクリック可能なリンクの上に表示されます。
• 画像ホットスポット。
• e コマース製品 (WooCommerce ウェブサイトを運営している場合)

わかりました、考えてみてください。これらのツールチップを Web サイトのこれらすべての領域で使用すると、Web サイトをツアーするすべてのユーザーにとってどれほど簡単で役立つでしょうか。

はい、消費者は便利だと思います。これは、これらのツールチップが Web サイトのどこに配置されていても、関連するテキストを示すことでユーザーを支援し、ユーザー エクスペリエンスを向上させるためです。

PowerPack を使用して Elementor にツールチップを追加する方法は?

ツールチップの助けを借りて、重要なメッセージをテキストでユーザーに表示し、ユーザー エクスペリエンスを向上させることができます。

ウェブサイトにツールチップを追加するには、Elementor および PowerPack アドオンをインストールしてアクティブ化する必要があります。

Elementor 用の PowerPack アドオンには、80 を超える便利でクリエイティブなウィジェット、300 を超える事前に設計されたテンプレート、および Web サイトの全体的なルック アンド フィールを向上させる便利な拡張機能があります。 これらの拡張機能の 1 つは、Web サイトにツールヒント テキストを表示するために使用できるツールヒントです。

それでは、Elementor と PowerPack を使用して Web サイトにツールチップを追加する方法を見てみましょう。

ツールチップ拡張機能を有効にする

ツールチップを Web サイトに追加するには、まずツールチップ拡張機能を有効にします。

次に、WordPress ダッシュボードに移動し、Elementor に移動して、[ PowerPack] をクリックします。

次に、[拡張機能] セクションに移動し、ツールヒント機能を有効にします。

完了したら、[変更を保存] ボタンをクリックします。

Elementor でツールチップ機能を有効にする

Elementor Web サイトの特定のウィジェット/セクションにツールチップを追加するには、Elementor エディターでページを開きます。 ツールチップを表示する要素を選択し、[詳細] タブ > [PowerPack ] に移動します。 「ツールチップ」機能を有効にします。

最後に、ツールチップ機能が正常に有効になり、Web サイト ページに表示されます。

ツールチップ機能をカスタマイズする

ツールチップ機能を有効にしたので、魅力的なツールチップ テキストを表示するためにカスタマイズできる機能を見てみましょう。

ツールチップ機能を有効にすると、全体的な外観を向上させるために使用できるすべてのカスタマイズ オプションが表示されます。

この機能で得られるすべてのツールチップ設定を見てみましょう:

• ツールチップ コンテンツ: ツールチップに表示するコンテンツを追加します。
• ターゲット:このオプションを使用すると、ターゲットを現在の要素またはカスタム セレクターとして選択できます。
• トリガー: hoverやclickなど、使用可能なオプションから必要なトリガーを選択します。
• ツールチップの位置:ツールチップの位置をtop 、 bottom 、 left 、またはrightから選択します。
• 矢印を表示:矢印を表示するかどうかのオプションを選択します。
• アニメーション:この機能を使用すると、フェード、フォール、グロー、スライド、スイングなどの利用可能なオプションからツールチップにアニメーションを適用できます。
• 距離:このオプションは、ホットスポットとツールチップの間の距離を調整できます。
• Z-Index:このオプションを使用すると、ツールチップの Z-index 値を調整できます。

すべてのツールチップ設定をカスタマイズしたので、次のステップに進みましょう。

ツールチップ機能で使用できるすべてのスタイル オプションを見てみましょう。

• 背景色:このオプションを使用して、ツールチップの背景色をカスタマイズします。
• テキストの色:この機能を使用して、ツールチップのテキストの色をカスタマイズできます。
• タイポグラフィ:ツールチップのタイポグラフィ テキストは、このオプションを使用してカスタマイズできます。
• ボックス シャドウ:このオプションでボックス シャドウ機能を有効にして、外観を向上させることができます。
• 境界線の種類:ツールチップに境界線を追加する場合は、このオプションを使用できます。 実線、点線、破線、二重、溝などの使用可能なオプションから境界線のタイプを選択します。
• 境界線の半径:ツールチップに境界線を適用した場合、このオプションを使用してその半径を調整できます。
• パディング:ツールチップのパディングを調整できます。 これにより、ツールチップ テキストと境界線の間のスペースが確保されます。
• 幅:このオプションでツールチップの幅を調整することもできます。

これらすべての機能をカスタマイズすると、作成したツールチップは次のようになります。

まとめ！

これまで説明してきたように、PowerPack アドオンを使用して Elementor Web サイトにツールチップを追加するプロセス全体. ただし、これはコーディングを介して行うこともできます。 あなたがプロのコーダーなら。

このチュートリアルが、Elementor Web サイトにツールチップを追加するのに役立つことを願っています。 ここをクリックして PowerPack Elementor アドオンを入手し、Elementor Web サイトに素晴らしいツールチップやその他の多くのセクションを作成してください。

Elementor ページをデザインしていて、カスタム フォントを追加する方法を探している場合は、Elementor Web サイトにカスタム フォントを追加する方法の記事が参考になります。

問題が発生した場合は、コメント セクションに質問を投稿してください。

Twitter、Facebook、YouTube に参加してください。