什么是翻转框？
翻转框是一种当你将鼠标悬停在其上时会翻转的盒子。你可以将这种悬浮效果添加到像图片和文本框这样的内容中。类似于其他动画内容（如GIF和响应式滑块），翻转框效果可以使网站更加互动和吸引人。例如，你可以展示作者的照片和名字，并且在读者悬停时使用翻转框动画展示他们的简介。作为WordPress自由职业者，你可以展示你客户的标志，并使用翻转动画显示每个项目的链接。
虽然这些动画效果可以提升你网站的用户体验，但重要的是不要过度使用。大量的动画效果可能会显得繁杂和混乱，甚至影响你网站的性能。话虽如此，让我们来看看如何向你的网站添加翻转框覆盖和图片悬浮效果。
如何在WordPress中创建翻转框覆盖和悬浮效果
有很多种向WordPress添加动画效果的方法，包括使用SeedProd页面构建器或编写自定义代码。然而，最好的方法是使用“翻转框 – Awesomes翻转盒子图片覆盖”插件。这个免费插件提供了多种不同的翻转框样式，包括图片、文本和行动按钮的组合。
创建一个新的翻转框
首先，你需要安装并激活“翻转框 – Awesomes翻转盒子图片覆盖”插件。有关详细信息，请参见我们的分步指南如何安装WordPress插件。插件安装并激活后，你可以通过转到Flip Box » Create New来创建你的第一个翻转框。
这会显示所有你可以使用的不同模板。如果你不想使用这些设计，那么单击‘Import Templates’。
如果看到你想要使用的模板，那就继续点击‘Import’将其添加到你的WordPress博客或网站。选择设计后，你需要点击其‘Create Style’按钮。
在出现的弹出窗口中，输入翻转框设计的名称。这仅供你参考，所以可以使用任何你想要的名称。你还可以通过点击1st、2nd或3rd选择要使用的布局。完成后点击‘Save’。
向你的翻转框添加内容
你可以通过使用General、Front和Backend选项卡来更改翻转框的外观。你可以更改字体、填充和边距。大多数这些设置都是不言自明的，所以值得通读一遍，看看可以创建哪些不同的效果。对显示结果满意后，可以添加一些内容。简单地向下滚动到屏幕底部的翻转框预览，并将鼠标悬停在其上。当出现时，点击‘Edit’按钮。
若要更改前翻转框显示的标题，可以将其键入‘Front Title’字段。接着，你可以通过点击‘Font Icon’字段更改前图标，并选择弹出窗口中出现的新图像。
接下来你可以添加图像到前翻转框。简单点击‘Upload Image’，然后从媒体库中选择文件或从你的计算机上传新图像。如果你还没有想要使用的图像，可以使用Canva等网页设计软件创建一个图像。
对前翻转框满意后，就可以设计背面。开始时，将你想要显示的内容键入‘Backend Info’框。通常，你将使用行动呼吁来把访问者引导到相关页面，例如热门产品的列表、价格信息或其他某些内容。
若要更改行动按钮上显示的文本，只需键入‘Backend Button Text’。然后，可以将目标URL添加到‘Link’字段。最后，点击‘Upload Now’更改背景图像。当你对翻转框背面的设置满意时，就可以点击‘Submit’。预览将显示你的所有更改。
创建多个翻转框
此时，你可能想要通过点击‘+’按钮在‘Add New Flip Boxes’部分添加更多盒子。这样你可以创建多个具有相同风格的翻转框，然后将它们组织成列和行。
你现在可以按照上述步骤创建更多翻转框。例如，你可以为每个价格计划创建一个翻转框。
将翻转框添加到你的WordPress网站
当你对翻转框满意后，可以使用插件自动提供的简码将其添加到你的WordPress网站。只需复制屏幕右侧‘Shortcode’框中的值。
现在可以使用简码将翻转框添加到任何页面、帖子或支持小工具的区域。有关如何放置简码的分步说明，请参见我们如何在WordPress中添加简码的指南。插件还有一个翻转框小工具，你可以将其添加到WordPress主题的任何小工具支持区域。若你创建了多个翻转框动画，你将需要知道ID。若要获取此信息，可以转到Flip Box » Flip Box并查看‘ID’列。
当你有了这个信息后，转到Appearance » Widgets。这里，你需要点击‘+’按钮。然后输入‘Flipbox’。当看到合适的小工具时，只需将其拖放到侧边栏、页脚或类似部分。默认情况下，Flipbox小工具将显示你的一个动画。若要显示其他翻转框，只需在字段中键入其ID。
当你对小工具的外观满意时，点击‘Update’。有关更多信息，请参见我们如何在WordPress中添加和使用小工具的指南。我们希望这篇文章帮助你学习如何向你的WordPress网站添加翻转框覆盖和悬浮效果。你还可能想查看我们的如何创建图像库指南，或查看我们专家推荐的最佳WordPress滑块插件的列表。如你喜欢这篇文章，请订阅我们的YouTube频道获取WordPress视频教程。你也可以在Twitter和Facebook上找到我们。
