WordPress ウェブサイトで画像ホットスポットを作成して使用する方法

画像とビデオは常にウェブサイトをより魅力的なものにします。ただし、WordPress Web サイト内のホットスポット画像は、通常の画像を使用したこれまでの記録をすべて破る可能性があります。ホットスポット画像には、サイト訪問者に詳細情報を提供するクリック可能な領域が含まれています。以前は、イメージのホットスポットを作成するのはそれほど簡単ではありませんでした。 

幸いなことに、素晴らしい WordPress アドオンのおかげで、画像ホットスポットの作成が非常に簡単になりました。のおかげで、さらに簡単になりました。 ElementsKit アドオン。

ElementsKit のオールインワンアドオンです エレメンター それは提供します 85+ ウィジェット、 500+ ブロック、 25+ 既製のホームページなど。さらに、無料のウィジェット、プロのウィジェット、およびサイトのカスタマイズを想像できないレベルに引き上げる高度なモジュールも提供します。インタラクティブなホットスポット画像も数分で作成できます。

この記事では、ElementsKit を使用してホットスポット画像をいかに簡単に作成できるかを公開します。インタラクティブなイメージ マップを作成する方法も学習します。この記事を読んだ後は、イメージ マップだけでなく、任意のホットスポット イメージを作成することができます。

WordPress Web サイトのインタラクティブ画像ホットスポットとは何ですか?

ホットスポット画像は インタラクティブな画像 画像上にホットスポット アイコンが含まれているもの。これらのホットスポット アイコンには、テキスト、画像、リンクなどを含むポップアップ ウィンドウまたはツールヒントが含まれています。 

インタラクティブな画像を作成すると、 より詳しい情報 クリック可能な領域を通じて。 WordPress ホットスポット画像にホットスポット アイコンを追加するだけで、訪問者の注意を引くことができます。 

さらに、ユーザーや訪問者は、目を引く有益な写真のおかげで、サイトでより多くの時間を過ごしたいと思うでしょう。その結果、あなたのパフォーマンスが大幅に向上することがわかります。 直帰率 そして 変換速度 WordPress ホットスポット画像のせいです。 

インタラクティブなホットスポット画像を作成する必要があるのはなぜですか?

WordPress サイト内のインタラクティブなホットスポット画像は訪問者の注意を引き、 直帰率。これらの画像でも、ビデオよりも効果的である可能性があります。高性能ホットスポット画像の例も多数あります。

ただし、これらの画像からどのようなメリットが得られるのかを正確に知りたいはずです。これらの画像の作成に特別な労力を費やす必要があるのはなぜでしょうか? 

こうした疑問を抱いているのは、あなただけではありません。私も Elementor ホットスポット イメージを作成しているときに、これらの質問に直面しました。画像ホットスポットの作成になぜ特別な労力を費やす必要があるのかについての質問に対する答えは次のとおりです。

1. ホットスポットのインタラクティブ画像は次のことに役立ちます。 交流する ユーザーともっと一緒に。ウェブサイトで画像を使用することは常に有益です。ただし、ホットスポット画像を使用するとさらに多くなります。

2. 提供するのに役立ちます より詳しい情報 あなたの訪問者に。ホットスポット画像には、ツールチップまたはウィンドウを含むクリック可能な領域が含まれるためです。これらのウィンドウには、追加情報を提供する写真、テキスト、リンクなどが含まれています。

3. ホットスポット画像は モバイル対応. 

2021年に スタティスタ ある調査によると、「Web サイト訪問者の 47 パーセント以上がモバイル デバイスを使用して米国のサイトにアクセスしている」ことがわかりました。 

したがって、モバイル対応画像の必要性を無視することはできません。

4. ユーザーとより多くの対話ができるようになったら、WordPress サイト上でユーザーを保持することもできます。その結果、 直帰率 サイトの面積も減少します。
5. ホットスポットを追加してインタラクティブな画像を作成すると、ユーザー エクスペリエンスが向上し、 変換速度 あなたのサイトの。ホットスポット画像の追加に関して目に見える改善が見られるでしょう。

これらの利点をすべて理解した後、疑問が生じるかもしれません。 

ホットスポットイメージを作成するにはどうすればよいですか?サイトに画像ホットスポットを作成する最も簡単な方法は何ですか? 

右？

解決策を得るために読み続けてください。 

ElementsKit を使用して WordPress Web サイトにインタラクティブなホットスポット画像を作成する

ホットスポット画像を Web サイトに追加すると、これまで以上に訪問者との関わりが強化されます。さらに、顧客は Web サイトのコンテンツに飽きることがありません。 

幸いなことに、ElementsKit を使用して、多くの時間を無駄にすることなく、WordPress ウェブサイト用のインタラクティブな画像を作成できるようになりました。画像ホットスポット以外にも、次のものを作成できます。 Elementor のオフキャンバス メニュー, WordPressの画像交換効果, コーディングなしなど。

ElementsKit についてさらに詳しく知りたいですか?

それから読んでください ElementsKit: Elementor に最適なアドオン 記事。

ElementsKit ウィジェットを使用すると、8 つの簡単な手順でインタラクティブな画像ホットスポットを作成できます。これをどのように実現できるかに興奮していますか? 

飛び込んでみましょう。

ステップ 1: Elementor を使用して新しいページを編集し、インタラクティブな画像を作成します。

まず、ElementsKit をインストールしてアクティブ化する必要があります。次に、WordPress ダッシュボードに移動し、ページ >> 新規追加にアクセスして、インタラクティブな画像ホットスポットを作成します。

その後、「Elementorで編集」ボタンをクリックして、新しいホットスポット画像を作成します。

ステップ 2: ホットスポット ウィジェットを検索して選択します。

このステップでは、ウィジェット検索ボックスでホットスポット ウィジェットを検索する必要があります。

次に、ホットスポット ウィジェットをドラッグし、図のように新しいセクションに追加します。

ステップ 3: 画像ホットスポットのコンテンツを編集します。

ホットスポット ウィジェットを追加したら、ウィジェットのコンテンツを編集します。そのためには、WordPress メディア ライブラリまたはコンピューターからスタイルと背景画像を選択します。ここではGoogleマップの画像を使用しています。今すぐアップロードしてください。

ElementsKit ホットスポット ウィジェットを使用して次のものを編集することもできます。

• グローを表示: ポインタの周囲に表示されるグローを表示または非表示にすることができます。
• クリックまたはホバー: このオプションは、クリックまたはホバー時にツールチップを表示するかどうかを決定するのに役立ちます。ホバーを選択した場合、ツールチップはホバー時に表示されるか、ユーザーがホットスポットをクリックしたときに表示されます。
• アクティブかどうか: このオプションを使用すると、すべてのツールチップを表示または非表示にすることもできます。

上記のものを編集した後、ホットスポット イメージ マップのツールチップを追加します。これを行うには、画像内でマークされているボックスをクリックします。

次に、ツールチップのタイトルと説明を追加する必要があります。これを行うには、ツールチップのタイトルと説明を挿入します。 

その後、ツールチップに適切な画像を追加します。どのようなイメージでもかまいません。 

次に、ツールチップの位置を調整する必要があります。次のオプションを使用して、ポインタを左から右または上から下に移動できます。ポインタを設定します。 [項目の追加] ボタンをクリックして、さらにホットスポットを追加することもできます。

ステップ 4: 画像ホットスポット WordPress のコンテンツのスタイルをカスタマイズします。

このステップでは、ホットスポット コンテンツのスタイルを編集する必要があります。適切な背景色と画像を選択して、Elementor ホットスポット画像のデフォルトのコンテンツ スタイルを変更します。ここで、デフォルトのコンテンツのパディング、幅、配置を設定します。

ステップ 5: ポインタのスタイルをカスタマイズして、インタラクティブな画像を作成します。

このステップでは、ポインターをカスタマイズする必要があります。ここでは、次の領域をカスタマイズできます。

• 背景色: ポインターの背景色を選択します。
• ポインターのサイズ: ポインタのサイズを設定します。円を右にドラッグすると大きくすることができます。
• 境界線の半径: このオプションを使用すると、必要に応じてポインタの半径を変更できます。
• ボックスの影: このオプションを使用すると、ポインターを使用して影を追加できます。
• 枠線の種類: ポインターに使用する境界線の種類を選択します。
• ポイントカラー: ポインター内にあるポイントの色をカスタマイズします。
• グローカラー: 必要に応じて、ポインターの周囲に表示されるデフォルトのグローの色を変更します。

ステップ 6: タイトルのスタイルを変更する ホットスポット画像の。

タイトルのスタイルについては、タイトルに適したタイポグラフィを選択する必要があります。タイポグラフィセクションでは、次の領域を変更できます。

• 家族。
• サイズ。
• 重さ。
• 変身。
• スタイル。
• 装飾。
• 行の高さ。
• 文字間隔。

また、テキストの色を選択し、タイトルに必要な余白を設定する必要があります。

ステップ 7: 説明と画像のスタイルをカスタマイズします。

ここでは、ツールチップの内容の説明を編集する必要があります。タイトルのカスタマイズと同じになります。次に、ツールチップに表示する画像の位置を設定します。 

最後に、希望に応じて画像の余白と幅を変更します。

ステップ 8: 加えた変更を公開する ホットスポット画像に.

すべての変更を加えた後、いよいよ公開します。公開ボタンをクリックすると、ホットスポット画像の準備が完了します。

ホットスポット インタラクティブ イメージ マップの出力は次のとおりです。

注記：
ホットスポット イメージに対して高度なカスタマイズを行うこともできます。たとえば、ホットスポット画像の一部をスティッキーにすることができます。画像の条件や効果を設定することもできます。さらに、高度なツールチップを追加することもできます。応答ボタンをクリックして変更を監視することもできます。応答ボタンをクリックすると、編集内容が新しいタブに表示されます。

まだ混乱していますか？

ホットスポット ウィジェットの使用方法については、デモ ビデオをご覧ください。

インタラクティブなホットスポット画像を作成するために ElementsKit を選択する理由は何ですか?

WordPress には、ホットスポット画像を作成するホットスポット ウィジェットを提供するアドオンが多数あります。 

しかし、なぜ他のすべてのアドオンを避けなければならないのでしょうか?高品質のインタラクティブなホットスポット画像を作成するには、ElementsKit だけを選択する必要があるのはなぜですか?

Elementor にとって優れたツールであると考えられるのはなぜですか?

ElementsKit プロバージョン ホットスポットウィジェットを提供します。したがって、これらの質問を持つのは正常なことです。無料版のプラグインを使用する場合、人々はあまり気にしません。ただし、有料版を使用する場合はそうなります。なぜなら、人はお金を払ってから最高の製品を買いたいと思うからです。あなたも違いはありません。

他のアドオンではなく ElementsKit を使用する必要がある理由は次のとおりです。

• ElementsKit が提供するのは、 優れたサポート。サポート チームは、このアドオンの使用中に発生する問題に対する解決策を常に提供します。さらに、どんな質問に対しても最速の応答が得られます。他のアドオンではこのサポートを受けることはほとんどありません。
• そのせいで 使いやすい 初心者でも操作に困ることはありません。 

• 必要に応じてホットスポット イメージを作成できます。高度なカスタマイズも可能です。ホットスポット画像だけでなく、カスタマイズした画像も作成できます ヘッダ, フッター、ドロップダウン メニューなど ElementsKit を使用します。

• ElementsKit は、優れたユーザー エクスペリエンスを提供することにとどまりませんでした。要件を満たすために継続的に更新されます。さらに、それは 完全に互換性のある エレメンターと一緒に。ただし、他のアドオンやプラグインをインストールまたは使用する場合は、このユーザー エクスペリエンスは得られません。

• あなたがの所有者であるかどうか 大規模なサイトでも小規模なサイトでも、このアドオンは問題なく使用できます。ただし、一部のアドオンは要件を満たさない場合があります。
• 一部のアドオンはサイトを破壊する可能性があります。 ElementsKit のユーザーになると、この問題に直面することはありません。

これらは、インストールして使用するよう促す最も重要な理由です。 ElementsKit アドオン。上記の利点のため、多くのユーザーは他のアドオンをやめて ElementsKit を選択します。このブログの執筆時点では、ElementsKit の 1 週間あたりのダウンロードは 117,238+。これはユーザーが ElementsKit を愛していることを証明しています。

ElementsKit の歴史についてもっと知りたいですか?それから読んでください ElementsKit の歩み: Elementor 用のオールインワン アドオン.

ホットスポット イメージを使ってみましょう

WordPress サイトで画像を使用することは、訪問者と感情的につながる最も効果的な方法です。ただし、WordPress サイトのホットスポット画像を使用すると、別のレベルに引き上げることができます。幸いなことに、これで、ホットスポット イメージを数分で作成する方法がわかりました。 ElementsKit. 

ホットスポット画像の作成についてまだ混乱している場合は、コメント欄でお知らせいただくか、質問を投稿してください。 Wpmet コミュニティ。私たちはあなたの問題を解決するよう努めます。また、このコンテンツが役に立ったかどうかをお知らせください。