什么是交互式图片?
交互式图片可以包含热点区域、突出显示、链接、颜色等。这比上传到您的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上找到我们。