如何在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-12-14
  • WordPress 插件

在WordPress中嵌入Google幻灯片演示是分享互动且视觉上吸引人内容的好方法。您可以展示详细的产品展示或最新报告的幻灯片,从而帮助您向听众传达信息或说服他们。我们经过研究发现了一些可靠的方法来完成这项工作,而且您无需成为技术专家即可实现。本文将向您展示两种轻松的方法来将Google幻灯片演示文稿添加到您的WordPress网站。

閱讀更多
  • 2024-11-16
  • WordPress 插件

在保护您的WordPress网站免受攻击时,使用正确的防火墙插件是至关重要的。在多年的发展中,我们的需求也在不断增长。因此,我们转向使用Cloudflare以提供更强的保护。本文详细比较了六个优秀的WordPress防火墙插件,以帮助您选择最适合的解决方案。

閱讀更多
  • 2024-11-15
  • WordPress 插件

您不希望访客单击其他网站的链接后就此离开您的网站。这就是为什么在新窗口或标签中打开外部链接对于提供流畅用户体验至关重要。在WPressize Me,我们认真对待读者的参与度。我们确保网站上的所有外部链接都在新标签页中打开,这样读者可以在不丢失原位的情况下浏览内容。这篇初学者指南将教您如何轻松在WordPress中设置外部链接在新标签中打开,从而提升用户参与度并令读者满意。

閱讀更多

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