ホットスポットブロックを使用すると、静止画像の上にホットスポットマーカーを直接配置することで、あらゆる静止画像をインタラクティブでクリック可能な体験に変えることができます。訪問者がホットスポットにカーソルを合わせたりクリックしたりすると、カスタムコンテンツを含むツールチップが表示されます。これにより、製品の機能を強調したり、図に注釈を付けたり、部屋のデザインを展示したり、訪問者を視覚的なものを通してガイドしたりするための強力な方法となります。
各ホットスポットは、独自のアイコン、色、位置、ツールチップコンテンツ、リンクで完全にカスタマイズ可能です。必要な数のホットスポットを追加し、マーカーとそのツールチップポップアップの両方の表示アニメーションを制御できます。
ホットスポットブロックをページに追加する
SeedProdページにホットスポットブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、ホットスポットブロックを目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、ホットスポットブロックをクリックして設定を開きます。コンテンツタブは、画像、ホットスポット、ツールチップの3つのセクションに分かれています。
画像:
- 画像: ホットスポットを配置する背景画像を選択またはアップロードします。
- 代替テキスト: アクセシビリティとSEOを向上させるために、画像の説明的な代替テキストを入力します。
- 画像サイズ: 画像の幅と高さをピクセル（px）またはパーセント（%）で設定します。
- 配置: セクション内のホットスポットブロックの水平方向の配置を設定します — 左、中央、右。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
ホットスポット:
ホットスポットセクションには、画像に追加されたすべてのホットスポットマーカーが表示されます。各ホットスポット行には、アイコンとツールチップコンテンツのプレビューが表示されます。ホットスポットをドラッグして並べ替えたり、複製したり、削除したりできます。ホットスポット行をクリックすると、個々の設定を展開できます：
- 水平方向: 画像上のホットスポットマーカーの水平位置を0〜100％で設定します。
- 垂直方向: 画像上のホットスポットマーカーの垂直位置を0〜100％で設定します。
- ツールチップコンテンツ: ホットスポットがトリガーされたときにツールチップポップアップ内に表示されるコンテンツを入力します。太字、斜体、リンク、インラインカラーなどのリッチテキストフォーマットに対応しています。
- 色: ホットスポットアイコンマーカーの色を設定します。
- 詳細設定: トグルをオンにすると、ラベル、リンク（新しいウィンドウで開く、ノーフォローオプション付き）、アイコン位置（左または右）、アイコンピッカー、カスタムアイコンサイズトグル、アイコンサイズスライダー（10〜150px、カスタムアイコンサイズが有効な場合に表示）を含む、ホットスポットごとの追加オプションが表示されます。
画像に新しいホットスポットマーカーを追加するには、リストの下部にある+ ホットスポットを追加をクリックします。
ホットスポットリストの下にあるホットスポットアニメーションドロップダウンで、すべてのホットスポットマーカーに適用される連続アニメーションスタイルを設定します — なし、ソフトビート、または展開から選択します。
ツールチップ:
- 位置: ホットスポットマーカーに対するツールチップの表示位置を選択します — 上、右、下、または左。
- トリガー: ツールチップを開くアクションを設定します — なし、ホバー、またはクリック。
- アニメーション: ツールチップが表示される際のアニメーションスタイルを選択します — フェード、グロー、スイング、スライド、またはフォール。
- 期間: ツールチップの開閉アニメーションの長さをミリ秒単位で設定します（0〜10,000ミリ秒）。
- 矢印を表示: ツールチップの吹き出しにある小さな方向矢印をオンまたはオフにします。
- 最大幅: ツールチップポップアップの最大幅をピクセル単位で設定します（0〜1000px）。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、画像スタイルとホットスポットブロックの間隔をカスタマイズできます。
スタイル:
- 画像シャドウ: 画像の後ろにドロップシャドウを追加します。なし、ヘアライン、小、中、大、特大、超特大から選択します。
- 画像境界線: 画像の周りに境界線を追加します。境界線のスタイル（実線、点線、破線）、境界線の色、境界線の幅（上、右、下、左）、および境界線の半径を設定して角を丸めます。
間隔：
- マージン: ホットスポットブロックの外側の間隔を制御します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
- パディング: ホットスポットブロックの内側の間隔を調整します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID: SeedProdによってカスタムスタイリングまたはJavaScriptターゲティングのために自動生成された、ホットスポットブロックの一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でホットスポットブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでホットスポットブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでホットスポットブロックを非表示にします。
ステップ4：変更を保存
ホットスポットブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
ページにホットスポットブロックを正常に追加しました！静的な画像をインタラクティブな体験に変えることで、訪問者の注意を誘導し、重要な詳細を強調し、エンゲージメントを高めることができます。さまざまなホットスポットアニメーション、ツールチップの位置、アイコンスタイルを試して、ブランドに合った、訪問者がコンテンツを探索し続けるような体験を作成してください。