有時，僅添加圖片和視覺效果還不足以吸引訪問者的注意力。
這時，圖片熱點就能幫上忙。 這些可點擊區域可以將一張簡單的圖片轉化為有吸引力的網站元素。 我們可以用它們來展示地圖上的位置，標記照片中的團隊成員，以及突出產品功能。
本指南將向你展示兩種簡單的方法，無需任何代碼即可為你的 WordPress 網站創建圖片熱點。
什麼時候需要在 WordPress 中為圖片添加熱點
圖片熱點是一種可點擊的點，它可以將簡單的圖片轉化為訪客可以探索的互動內容。 但是，什麼時候應該考慮在圖片中添加熱點呢？
當您希望展示產品圖片的不同部分時，就可以使用熱點。
比方說，您正在銷售一款新手機。 您可以添加熱點，指出其攝像頭、螢幕和其他功能。 這有助於客戶了解產品，而無需閱讀冗長的說明。
許多家居用品網站還使用圖片熱點來突出顯示照片中展示的產品細節。
熱點還可以使資訊圖表和數據更加吸引人。 您可以在熱點後面隱藏額外的細節，而不是將所有資訊都塞進一張圖片中。 當人們點擊信息圖表的不同部分時，他們可以看到更多的數據資訊。
如果您運行的是在線學習網站，那麼熱點可以改善用戶體驗，使您的課程更具互動性。 例如，您可以在地圖上添加熱點，讓學生點擊瞭解不同的國家或地標。
有鑒於此，讓我們來看看如何在WordPress網站中輕鬆添加圖片熱點。 我們提出了兩種方法：
- 方法 1：使用 SeedProd 新增圖片熱點（適用於著陸頁/自訂主題）
- 方法 2：使用圖片外掛程式添加圖片熱點（適用於著陸頁/自定義主題）
方法 1：使用 SeedProd 新增圖片熱點（用於著陸頁/自訂主題）
第一種方法使用SeedProd（一種拖放式頁面生成器）為您的 WordPress 網站添加圖片熱點。 如果您正在創建自定義登陸頁面或自定義 WordPress 主題，並希望使用帶有圖片熱點塊的平臺，我們建議您使用這種方法。
我們喜歡 SeedProd 的原因在於它為不同的行業類別提供了 350 多個著陸頁 範本和主題套件，從在線精品店和清潔服務到 SaaS 公司。 因此，每種類型的網站都有自己的選擇。
你需要考慮的一點是，如果你只想用免費的解決方案來創建圖片熱點，那麼這個方法可能不適合你。 因為只有付費的 SeedProd 版本才有熱點區塊。 在這種情況下，我們建議使用方法 2。
購買 SeedProd 計劃後，您可以在管理區下載並安裝 WordPress 外掛程式。 然後，進入SeedProd“設置並輸入您的許可證密鑰。 您可以在 SeedProd 帳戶頁面找到此資訊。
完成後，只需按兩下驗證金鑰。
然後，導航至 SeedProd 》 Landing Pages。
然後，按兩下 「Add New Landing Page」。
現在您將看到 SeedProd 提供的所有範本。
請確保滾動瀏覽這些選項並逐一預覽，以便選擇最適合您需求的頁面。
確定範本后，只需將滑鼠懸停在所選範本上。
然後，點擊橙色複選標記按鈕。
現在會出現一個新的彈出視窗，要求你為頁面命名並設置url。
完成後，點擊 「Save and Start Editing the Page」。。
這將打開 SeedProd 拖放編輯器。
它的工作原理類似於 WordPress 區塊編輯器，你可以將區塊拖放到頁面上，然後點擊它們，隨心所欲地進行定製。
要創建圖片熱點，您可以在左側邊欄找到 『Hotspot』 塊。
然後，只需將其拖放到頁面上即可。
接下來，你需要上傳要添加熱點的 WordPress 圖片。
您可以點擊 「熱點 」塊，然後選擇 「使用自己的圖片 」或 「使用庫存圖片 」來選擇圖片。
第一個選項將打開媒體庫，你可以選擇一張現有圖片或上傳一張新圖片。
上傳圖片后，您可以輸入一些 alt 文字，以便為搜尋引擎和螢幕閱讀工具描述圖片。
您還可以自定義圖片大小和對齊方式。
然後，你可以向下滾動，開始添加熱點。
點擊 「+ Add Hotspot」 按鈕即可。
這時，圖像上會出現一個橙色的點。 您可以通過拖動水平和垂直方向條來調整其位置。
此外，您還可以插入使用者游標懸停在熱點上時應出現的文本。
向下移動，您可以更改熱點的顏色。
只需點擊 「Color 」設置，即可選擇適合您的品牌和網站設計的顏色。
如果繼續向下滾動，就可以啟用 「Advanced Settings」切換。
在這裡，你可以在熱點的工具提示文本中添加一個鏈接，這樣使用者就可以被重定向到你想要的頁面。
除此之外，你還可以選擇一個自定義圖示來替換預設的圓形。
為此，只需點擊 「Choose Icon」按鈕。
這時會彈出一個視窗，您可以從 SeedProd 庫中選擇各種圖示。 如果您需要更多選項，也可以從Font Awesome中選擇圖示。
要使用圖示，只需按下該圖示即可。
選擇圖示后，可以拖動 「Icon Size 」欄，根據自己的喜好將形狀變小或變大。
然後，您可以重複上述步驟，創建更多互動圖像熱點。
下面，您可以為圖像熱點添加動畫效果。 有 2 個選項： Soft Beat和 Expand。
現在，讓我們向下移動到 「Tooltip」部分。
在這裡，你可以更改提示的位置（熱點的右側、左側、上方或下方）並更改觸發方式。
如果選擇 「Click」，意味著當用戶點擊熱點時將顯示工示。 “Hover ”意味著當游標懸停在熱點，提示就會出現。
接下來，您可以更改提示的持續時間。
這隻是指當使用者懸停或點擊熱點后，工提示需要多長時間才會出現。 如果你想讓文本立即顯示，那麼將其設置為 0 即可。
你也可以根據自己的喜好禁用提示的箭頭。
現在，如果您切換到 「高級 」選項卡，您可以對圖片的外觀進行更多自定義。
例如，您可以添加框陰影或調整邊距和邊距。
完成後，只需點擊右上角的 「Save』 」按鈕。
然後，點擊 “Publish”，使頁面生效。
就這樣！ 請確保您在手機、台式機和平板電腦上查看頁面，看看它在所有設備上是否都很美觀。
以下是我們的互動式圖片熱點的外觀：
方法 2：使用圖片熱點外掛程式添加圖片熱點（免費但有限制）
如果使用頁面生成器和切換主題聽起來有點太多，那麼您可以使用免費的 WordPress圖像熱點外掛程式來代替。 該外掛程式是方法 1 的最佳替代品，但需要注意的是，免費版本最多只能在單張圖片上添加 6 個熱點。
要使用圖片熱點，您可以在管理區安裝並啟動 WordPress 外掛程式。 然後，轉到 Image Map Hotspot “ All Image Map Hotspot 並點擊 ”Add New “按鈕。
現在，請為您的新圖片熱點命名。 然後，選擇其中一種提示顯示類型。 您可以通過懸停或點擊來顯示熱點的示。
完成後，點擊 「Save」。
完成上述步驟后，讓我們來添加圖片。
為此，只需點擊 「Upload Image 」按鈕。
這將打開媒體庫，您可以上傳新圖片或選擇現有圖片。
接下來，您可以在圖像地圖中添加熱點。 只需點擊 「Add Point」 按鈕即可。
現在會彈出一個視窗，供您配置互動圖像熱點。
首先，導航到 「標記 」選項卡。 在這裡你可以自定義熱點圖像的外觀。 要更改圖示，可以按兩下 「圖示 」和/或 「懸停圖示 」字段旁邊的 「+」號。
圖示 「是指沒有點擊或懸停時的預設熱點符號。 同時，「懸停圖示 」是指用戶點擊或懸停熱點時出現的符號。
現在，請選擇一個圖示來替換當前的預設選項。 外掛程式有很多選擇。
選擇好后，點擊 「關閉 」按鈕即可。
設置好熱點圖像后，您可以更改圖示的顏色。
該外掛程式可讓您將預設熱點圖示的顏色與圖示懸停的顏色區分開來。 這樣，用戶在點擊或懸停熱點時，就能輕鬆判斷熱點是否處於活動狀態。
要更改顏色，只需點擊方形顏色選擇按鈕，然後選擇您想使用的顏色。
然後，你可以點擊頁面上的任意位置，進入其他設置。
你還可以在桌面上自定義熱點圖示的大小。 數位越大，圖示就越大。
對圖標的外觀滿意后，點擊 「保存」。
現在，向上滾動並切換到 「內容 」選項卡。 在這裡您可以自訂工具提示的文字和外觀。
該外掛程式提供 4 種範本供您選擇，因此您可以挑選最適合自己網站設計的範本。
除此之外，請確保將預設標題內容替換為您自己的文本。
根據您的網站設計，您可能需要增大字體大小並更改文字顏色，以提高可讀性。
當您對設置感到滿意時，只需按兩下 「保存 」 即可。
最後一個選項卡是 「連結」。 在這裡，您可以選擇使工具提示文字超連結，以便將使用者重定向到不同的頁面。
如果您想這樣做，請在 「是否連結標題 」設置中選擇 “ 是”
然後，在適當的欄位中插入標題連結 URL，並選擇是否要在新標籤頁中打開連結。
最後點擊 「保存」。
現在，圖像上應該會出現一個新的熱點，您可以將其拖動到所需的位置。
您還可以重複之前的步驟，創建更多的圖像熱點。
配置好圖片地圖后，可以再次點擊 「保存 」按鈕。
要將圖片熱點添加到任何頁面、文章和/或 widgets 中，您可以複製圖片上方的簡碼。
然後，只需在塊編輯器中將簡碼粘貼到部件、頁面或文章的簡碼塊中即可。 您可以在我們的如何在 WordPress 中添加和使用簡碼分步指南中瞭解更多相關信息。
下面是我們的互動式圖片熱點：
