首頁 » 如何在 WordPress 中新增圖片熱點(簡單方法)

如何在 WordPress 中新增圖片熱點(簡單方法)

有時,僅添加圖像和圖像不足以吸引訪客的注意。

這就是影像熱點可以發揮作用的地方。這些可點擊區域可以將簡單的圖像變成為訪客提供資訊豐富且引人入勝的體驗。我們自己已經嘗試過用它們來突出顯示地圖上的點、在照片中標記團隊成員以及突出顯示產品的特徵。

如果您想知道如何做同樣的事情,那麼您來對地方了。本指南將向您展示 2 種無需任何程式碼即可為 WordPress 網站建立圖片熱點的簡單方法。

何時在 WordPress 中為圖片添加熱點

圖像熱點是可點擊的點,可以將簡單的圖像轉變為訪客可以探索的互動式內容。但是您什麼時候應該考慮在圖像上添加熱點呢?

使用熱點的好時機是當您想要顯示產品圖像的不同部分時。

假設您要出售一部新手機。您可以新增熱點來突出顯示相機、螢幕和其他功能。這有助於客戶了解產品,而無需閱讀冗長的描述。

許多家居裝飾網站也使用圖像熱點來突出顯示照片中顯示的產品細節。

熱點也非常適合使資訊圖表和數據視覺化更具吸引力。您可以將其他詳細資訊隱藏在熱點後面,而不是將所有資訊塞進單一圖像中。當人們點擊資訊圖表的不同部分時,他們可以看到更多的事實和數據。

如果您經營電子學習網站,熱點可以改善使用者體驗並使課程更具互動性。例如,您可以將熱點新增到地圖中,讓學生點擊即可了解不同的國家或地標。

考慮到這一點,讓我們看看如何輕鬆地將圖像熱點添加到您的WordPress 網站。我們提出了兩種方法,您可以使用下面的快速連結來瀏覽本文:

  • 方法 1:使用 SeedProd 新增影像熱點(適用於登陸頁面/自訂主題)
  • 方法二:使用圖片熱點外掛程式新增圖片熱點(免費但有限制)
  • 為您的 WordPress 網站發現更多令人興奮的設計功能

專家提示:沒有時間或意願設計自己的網站?考慮我們專業的 WordPress 設計服務。我們的專業設計師可以以實惠的價格創建令人驚嘆的網站,讓您的下一個項目變為現實!

方法 1:使用 SeedProd 新增影像熱點(用於自訂登陸頁面/主題)

第一種方法是使用SeedProd(一種拖放頁面建立器)將圖片熱點新增至您的 WordPress 網站。如果您要建立自訂登入頁面或自訂 WordPress 主題並希望使用具有圖像熱點區塊的平台,我們建議您使用此方法。

我們喜歡 SeedProd 的一點是,它為不同行業類別提供了超過 350 個登陸頁面模板和主題套件,從線上精品店到清潔服務再到 SaaS 公司。因此,每種類型的網站都有一個選擇。

需要考慮的一件事是,如果您只是想要一個用於創建圖像熱點的免費解決方案,那麼此方法可能不適合您。事實上,SeedProd 熱點阻止僅在 SeedProd 的付費版本中可用。這種情況,建議採用方法2。

有關該插件的功能和定價的更多信息,請查看我們的SeedProd 評論。

購買 SeedProd 方案後,您可以在管理區域下載並安裝 WordPress 外掛程式。接下來,前往SeedProd“ 設定”並輸入您的許可證密鑰。此資訊可在您的 SeedProd 帳戶頁面上找到。

完成後,只需按一下“驗證金鑰”。

接下來,前往SeedProd” 登陸頁面

然後,點選「新增登陸頁面」。

現在您將看到 SeedProd 提供的所有模板。有病毒式候補登入頁面、Google 廣告登入頁面、「即將推出」頁面等選項。

請務必捲動選項並一一預覽它們,以便您可以選擇最適合您需求的選項。

一旦您決定了模板,只需將滑鼠懸停在所選內容上即可。

然後,按一下橘色複選標記按鈕。

此時,將出現一個新的彈出窗口,要求 傳真列表 您為頁面命名並輸入其 URL slug。

完成此操作後,按一下「儲存並開始編輯頁面」。

SeedProd 拖放編輯器將會開啟

它的工作原理與WordPress 區塊編輯器類似,您可以將區塊拖放到頁面上,然後按一下它們以根據需要自訂它們。

若要建立影像熱點,您可以在左側邊欄中找到「熱點」區塊。

然後,只需將其直接拖放到頁面上即可。

接下來,您需要上傳要新增熱點的 WordPress 映像。

您可以透過點擊“熱點”區塊並選擇“使用您自己的圖像”或“使用庫存圖像”來選擇圖像來完成此操作。

 

上傳圖像後,您可以插入替代文字來為搜尋引擎和螢幕閱讀器描述圖像。

您也可以自訂圖像的大小和對齊方式。

之後,您可以向下捲動以開始新增熱點

您可以透過點擊“+ 新增熱點”按鈕來完成此操作。

影像上會出現一個橘色點。您可以拖曳水平和 我應該聘請行銷公司嗎? 垂直方向欄來調整其位置。

此外,您也可以輸入當使用者的遊標經過熱點時應顯示的文字。

在 SeedProd 中自訂圖像熱點設置

透過向下移動,您可以變更熱點的顏色。

只需點擊“顏色”設定即可選擇最適合您的品牌和網站設計的顏色。

如果繼續向下捲動,您可以啟動“進階設定”開關。

您可以在此處添加指向熱點文字的鏈接,這會將用戶重定向到所需的頁面。

此外,您可以選擇自訂圖示來取代預設的圓形形狀。

為此,只需單擊“選擇圖標”按鈕即可。

將出現一個彈出窗口,您可以在其中從 SeedProd 的庫中選擇各種圖示。如果您想要更多選項,您也可以從 Font Awesome 中選擇圖示。

要使用圖標,只需單擊它即可。

選擇圖示後,您可以拖曳「圖示大 小」欄以使形狀變小或變大,具體取決於您的喜好。

您可以重複這些步驟來創建更具互動性的圖像熱點。

 

 

返回頂端