Elementor 图像热点教程：让图片变得更有信息感

複雑な概念を説明するには、千の言葉よりも写真が効果的です。画像を拡大すれば、商品やアイテムの細部まで見ることができます。また、画像に情報のホットスポットを追加することで、商品画像をより鮮明で興味深いものにすることができます。

画像ホットスポットは情報を提示する方法です。ユーザーの注意を製品に引きつけ、クリックや購入を促します。エレメンタイメージホットスポットウィジェットを使えば、この効果を簡単に得ることができる。

この記事ではエレメンタなホットスポット画像ホットスポットを作成するウィジェット。始める前に、画像ホットスポットが何であるかを理解してください。

画像ホットスポットとは何ですか？

画像のホットスポットは、画像に追加されたクリック可能な領域で、ユーザーがクリックすると追加情報やアクションプロンプトが表示されます。画像にボタンや図形を重ねたり、正確な位置を設定することができます。

ホットスポットをクリックすると、コンテンツが表示されます。下の画像のように、画像にはプラスマークが付いています。商品の説明や価格、ジャンプリンクなどのコンテンツを表示することができます。

Happy Addonsのホットスポット・ウィジェットで画像にホットスポットを作成する

あなたのウェブサイトがワードプレス Elementorによって構築されたこの機能は、とても簡単に実装できます。Elementorと、何百ものウィジェットと何十もの便利な機能を備えたElementorの強力な拡張機能であるHappyAddonsプラグインをインストールするだけです。

ステップ1：ElementorとHappyAddonsプラグインをインストールする

ハッピーアドオン HotspotsはHappyAddonsのプレミアムウィジェットなので、以下のプラグインがインストールされていることを確認してください：

エレメンタ
ハッピーアドオン
HappyAddons Pro

ヒント：HappyAddons Proを使用した後は、必ずしもエレメンタル・プロ.

ステップ2：ホットスポットウィジェットをElementorの編集エリアにドラッグ＆ドロップします。

あるエレメンタパネルでHappyAddonsのホットスポットウィジェットを見つけ、ページの適切な場所にドラッグ＆ドロップします。

ステップ 3: ホットスポットを追加する画像を選択します。

画像アップロードエリアをクリックして、既存の画像を選択するか、新しい画像をアップロードします。

ステップ4：画像にホットスポットを追加する

画像を追加すると、画像上にデフォルトのホットスポットが表示されます。次に、ElementorパネルのContentタブでSpotオプションを見つけます。最初のホットスポットはデフォルトでアイテム#1という名前になっています。

さらにホットスポットを追加するには、"+ Add Item "ボタンをクリックします。

各ホットスポットを1つずつカスタマイズし、テキストやアイコンを追加したり、画像を挿入することもできます。詳細は背景画像によって異なります。

X位置とY位置の設定を使用して、ホットスポットの位置を正確に移動します。

次に、"ツールチップ "オプションにホットスポット情報を入力します。段落ボックスにテキストを入力し、太字、斜体、下線、またはリンクを追加して書式を設定します。

残りのホットスポットについても同じ操作を繰り返します。

ステップ5：ホットスポットのスタイルを調整する

各ホットスポットは個別にスタイリングできる。ホットスポットのエレメンタ以下は「スタイル」タブの「スタイル」で調整できる：

幅
こうど
インナーマージン
フレーム
カラー
テキストカラー
キューボックスの背景色

ページのビジュアル・ニーズに合わせて自由に設定できる。

ヒントボックスのスタイルを変更する必要がある場合は、ツールチップオプションをクリックし、適切なエフェクトが表示されるまで関連するパラメータを調整し続けます。

ステップ 6: 詳細オプションを使用して拡張機能を追加する

追加するアニメ背景またはレスポンシブ設定は何ですか？詳細オプションボタンをクリックして、さらに詳しく調べてみましょう。"Advanced "はElementorのデフォルト設定です。これらの機能の使い方についてはドキュメントをお読みください。

ヒント：画像ホットスポットの数に制限はありません。

Elementorのレスポンシブ・モードでは、異なるデバイスで画像が適切に表示されるかをチェックすることも可能です。

画像ホットスポットの使用の文脈と意味

百聞は一見にしかず」ということわざはよく知られている。しかし、画像ですべての情報をカバーすることはできません。画像ホットスポットはこの問題を解決することができます。画像に追加コンテンツを提供することで、よりインタラクティブで表現力豊かな画像になります。

画像とテキストの組み合わせは、より良いフィードバックにつながることが多い。以下は典型的な使用例である：

インフォグラフィック・ショーケース

インフォグラフィックは、チュートリアル、統計、プロセス、その他のコンテンツによく使用され、視覚的なプレゼンテーションに最適です。

ホットスポットを追加することで、ユーザーは元のタイポグラフィを崩すことなく、クリックしながらより多くの説明情報を得ることができる。

教育的応用

ホットスポットの画像は、特に次のようなタイプのコースでの指導シナリオに最適です：

バイオ： 人体の構造について学習する際、理解や記憶を助けるために、臓器や部位ごとにホットスポットを表示することができる。

ジオグラフィー 国名や地名を覚えるのが苦手ですか？地図上にホットスポットを設定すれば、ボタンをクリックするだけで正確な場所と地名がわかります。

歴史学： 歴史的な出来事を説明するとき、生徒が物語の背景を覚えやすいように、絵の中の登場人物を特定することができる。

よくある質問

画像ホットスポットとは何ですか？

画像ホットスポットとは、画像上の特定の領域をクリックすると、ポップアップウィンドウが表示され、その中にヒントメッセージ、テキスト、ビデオ、リンクなどのコンテンツが表示されるものです。

画像ホットスポットの種類は？

現在入手可能な一般的なタイプは以下の通り：

画像コンテンツ表示
ジグソーパズルのレイアウト
ドラッグ＆ドロップ・ホットスポット
静止画ホットスポット
スライド画像ホットスポット

ホットスポットの形状にはどのようなスタイルを設定できますか？

一般的な形状は以下の通り：

長方形
かんじょう
多角形

イメージ・インタラクティブ・ホットスポットの設定方法は？

クリッカブルなインタラクティブ効果を持つ画像を作りたい場合は、ホットスポット機能を使用する必要があります。ユーザーがクリックすると、グラフィック、画像、ビデオコンテンツがポップアップします。

設定できる項目は以下の通り：

ホットスポットの数
各ホットスポットの位置
各ホットスポットの表示スタイル

これが画像ホットスポットを作成する完全なプロセスです。ページのコンテンツをより魅力的にしたいなら、手を汚してこのデザインアプローチを試してみてください。ほんの数ステップで、非常にインタラクティブなグラフィック表示が実現できます。

概要

レバレッジエレメンタ Happy Addonsのホットスポットウィジェットを使えば、画像は単なる静的な表示ではなく、より多くの情報を伝えることができるインタラクティブな媒体となります。簡単なドラッグ＆ドロップ操作で、画像に複数のクリック可能エリアを追加し、テキストやアイコンを表示することができます、リンクなどのコンテンツで、より表現力豊かなページに仕上げる。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み