如何在WordPress中创建交互式图片

02/26/2023

什么是交互式图片?

交互式图片可以包含热点区域、突出显示、链接、颜色等。这比上传到您的WordPress网站的简单标准图片更具吸引力。交互式图片可以吸引访客的注意力,并显示附加信息。例如,您可能会在访客将鼠标悬停在图表上的特定栏时显示一个弹出窗口。

这种互动可以鼓励访客深入探索您的图片,从而使他们在页面上停留更长时间。它还能创造一种更互动和有趣的体验,可以增加您的页面浏览量并减少WordPress中的跳出率。交互式图片还可以向访客展示他们接下来应该采取的步骤。例如,您可以添加链接到网站的其他部分,或者显示一个行动呼吁按钮。

创建交互式图片的步骤

最简单、最适合初学者的方法是使用Draw Attention插件。这个插件允许您在用户与图片互动时要么显示“更多信息”的弹出窗口,要么打开一个新URL。

首先,您需要安装并激活Draw Attention插件。激活后,进入WordPress仪表盘中的Draw Attention » 编辑图片。这里您可以创建不同的互动,然后将它们添加到图像中作为可点击区域。

添加热点区域

开始,为您的交互式图片输入一个标题。接下来,选择您要使用的图片,可以从媒体库中选择或上传新图片。然后,向下滚动到“热点区域”部分,并点击默认创建的“可点击区域1”以展开该部分。选择您要用于突出显示的形状,然后点击并拖动以突出显示您想要用作热点的区域。

接下来,为这个可点击区域输入一个名称,它会在访客将鼠标悬停在热点上时作为工具提示出现。然后,从“操作”下拉菜单中选择当访客点击该区域时将发生的事情。您可以选择打开一个链接或显示一个“更多信息”框。根据选择的选项,您需要添加相应的信息或链接。

满意后,点击“添加另一个区域”按钮,重复上述步骤添加所有可点击区域。完成后,您可以自定义突出显示和“更多信息”框的样式。选择预设的配色方案,尝试不同的设置直到满意。

当您对交互式图片的外观和行为感到满意时,点击“更新”保存更改。然后,使用“复制短代码”块中的短代码将交互式图片添加到任何页面、帖子或小部件区。

导入和导出交互式图片

有时,您可能想在多个网站上重复使用同一张交互式图片。我们建议使用Draw Attention的导入/导出功能。首先,在您的原始站点和所有其他站点上安装Draw Attention插件。然后在原始站点上进入Draw Attention » 导入/导出,选择您要导出的图片,并点击“生成导出代码”按钮。

在其他站点上登录WordPress并进入Draw Attention » 导入/导出,将导出代码复制到“导入”框中,然后点击“导入”按钮。这样,Draw Attention会导入图像及其所有互动。

我们希望这篇文章能帮助您学习如何在WordPress中创建交互式图片。您可能还想查看我们的指南,了解如何在WordPress中创建自定义Instagram照片反馈,或我们的最佳拖放式WordPress页面构建器推荐。

如果您喜欢这篇文章,请订阅我们的YouTube频道,获取WordPress视频教程。您还可以在Twitter和Facebook上找到我们。



Related Posts

  • 2024-07-27
  • WordPress 插件

您是否希望在 WordPress 中要求文章必須設置精選圖片?如果您正在運營一個多作者的 WordPress 博客,您會希望確保每位作者在發布文章之前都添加精選圖片。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中要求文章設置精選圖片。

閱讀更多
  • 2024-07-26
  • WordPress 插件

WordPress 內建搜尋功能,但其搜尋結果通常不盡人意。幸運的是,您可以自訂搜尋結果頁面,使其更加使用者友好。本文章將向您展示如何無需編寫任何代碼輕鬆自訂 WordPress 搜尋結果頁面。

透過自訂搜尋結果頁面,使用者能更容易找到他們需要的內容,並改善整體使用者體驗,從而提高頁面瀏覽量和轉化率。

閱讀更多
  • 2024-07-24
  • WordPress 插件

您在尋找如何創建影片和圖片的 WordPress Slider 吗?Sliders 是展示內容且吸引網站訪客注意力的絕佳方式。本文將為您提供使用 Soliloquy 簡易創建影片和圖片 Slider 的詳細指南。

首先,您需要安裝一個合適的 WordPress Slider 插件,例如 Soliloquy。這個插件使用簡單,可建立響應式的影片和圖片 Slider,不需要編寫一行代碼。接著,您可以根據需求添加各種媒體內容並調整 Slider 設定。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>