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

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

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

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

この記事では、ElementKit を使用してホットスポット イメージを簡単に作成する方法を説明します。また、インタラクティブなイメージ マップを作成する方法も学習します。この記事を読めば、イメージ マップだけでなく、あらゆるホットスポット イメージも作成できます。

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

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

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

さらに、ユーザーや訪問者は、目を引く情報豊富な写真のおかげで、あなたのサイトにもっと時間を費やしたくなるでしょう。その結果、あなたのサイトは驚くほど改善されます。 直帰率 そして 変換速度 WordPress ホットスポット画像のせいです。 

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

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

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

このような疑問を抱いているのは、あなただけではありません。私も Elementor のホットスポット画像を作成するときに、このような疑問に直面しました。画像ホットスポットの作成に特別な労力を費やす必要がある理由についての質問への回答は次のとおりです。

1. ホットスポットのインタラクティブ画像は次のことに役立ちます。 交流する ユーザーとのつながりを強めましょう。Web サイトで画像を使用することは常に有益ですが、ホットスポット画像を使用するとさらに効果的です。

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 コミュニティ。私たちはあなたの問題を解決するよう努めます。また、このコンテンツが役に立ったかどうかをお知らせください。