如何在WordPress中創建交互式圖像


您是否要為WordPress博客創建交互式圖像? 交互式圖像使您可以突出顯示,鏈接和設置圖像的某些區域的動畫。 在本文中,我們將向您展示如何在WordPress中創建交互式圖像。

在WordPress中創建交互式圖像

什麼是互動圖片?

交互式圖像具有熱點區域,突出顯示,鏈接,顏色等。 它與您在WordPress中上傳的簡單圖片不同。 交互式圖像引人注目,吸引了用戶查看圖像的細節。 您可以在圖像的不同部分添加描述,添加頁面鏈接,突出顯示部分等等。

交互式圖像的描述演示

在此圖像中,您可以看到鼠標懸停在不同條形上的水果描述。 您可以使用這些交互式圖像來提高用戶參與度和現場花費的時間。

讓我們來看看如何通過交互式圖像吸引訪客的注意。

在WordPress中創建交互式圖像

您需要做的第一件事是安裝並激活Draw Attention插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您將在WordPress管理區域中看到新的自定義帖子類型。 你需要去 吸引註意»添加新 頁面以創建交互式圖像。

新增圖片

首先為這個新的交互式圖像添加標題,以便您輕鬆記住它。 在此頁面上,您可以在新的或先前上傳的圖像上創建交互式設計。 您可以通過單擊上載圖像圖標來添加新圖像,也可以從WordPress媒體庫中選擇一個圖像。

上載或選擇圖像

接下來,您需要點擊 發布 按鈕。

發布後,該插件可讓您編輯圖像並突出顯示特定區域,添加顏色,鏈接,繪製熱點區域等等。 您可以向下滾動到 熱點地區 部分並展開可點擊區域以預覽圖像。

只需移動鼠標並在圖像上繪製可點擊區域。 您可以輕鬆選擇熱點區域並展開它們以創建選擇區域。

繪製熱點區域

繪製熱點區域後,您需要向下滾動到 行動 下拉菜單,然後為圖像上的選定區域選擇一個操作。 如果選擇顯示更多信息,則只需添加說明以解釋圖像上的熱點區域。 您也可以使用“轉到URL”選項在所選區域上添加鏈接。

添加動作

您還可以管理常規設置並突出顯示操作鏈接,操作文本,信息背景等的樣式。 這些設置有助於使圖像更具交互性。

常規設置

接下來,您需要點擊 更新資料 按鈕並複制簡碼以將其添加到您的WordPress帖子或頁面中。

複製簡碼

該插件可讓您使用以前上傳的圖像或新圖像創建所需數量的交互式圖像。

可點擊的互動圖片

導入和導出交互式圖像

如果您在多個站點上工作,並且想要導入/導出交互式圖像,則在兩個站點上都需要相同的Draw Attention插件。

在第一個站點上,您需要訪問 提請注意»導入/導出 頁並選中要導出的圖像。 接下來,點擊 生成導出代碼 按鈕並複制代碼。

導出代碼交互式圖像

之後,您需要轉到下一個網站,並確保已激活Draw Attention插件。 接下來,您需要轉到 提請注意»導入/導出 來自WordPress管理員的頁面,並將代碼粘貼到導入字段中。

粘貼代碼交互式圖像

繼續並點擊 進口 按鈕,您的圖像將被導入,並且您之前添加的所有互動細節都將被導入。

這些交互式圖像非常適合WordPress SEO,並在您的網站上吸引了更多訪問者。 但是,建議在上載圖像之前先對其進行壓縮,以提高站點性能。

我們希望本文能幫助您學習如何在WordPress中創建交互式圖像。 您可能還需要查看有關如何在WordPress中延遲加載圖像的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。