如何在WordPress中创建Flipbox叠加和悬停

想要向您的WordPress网站添加翻转盒叠加层和图像悬停效果吗？

即使您使用的是高质量WordPress主题，您也可能会受到自定义选项的限制。翻转盒和图像悬停功能可为您的网站添加醒目的动画效果。

在本文中，我们将向您展示如何向您的WordPress网站添加翻转框覆盖和图像悬停。

什么是Flipbox？

翻转框是将鼠标移到上方时翻转的框。您可以将此悬停动画效果添加到网站的特定部分，包括文本框和图像。

该术语来自于鼠标悬停在图像上方时发生的独特“翻转”功能。您可以控制图像的翻转方式，以及图像两面的信息和设计。

如果您的网站是相对静态的，则可以使用翻页盒效果使其更具交互性。

例如，您可以将图像悬停翻转框添加到产品定价页面。这样，当用户将鼠标悬停在您的定价层上时，价格就会显示出来。

或者，如果您是自由职业者，则可以添加与该翻转一起使用过的公司的徽标，并链接到每个项目。

这些动画效果可以增强您网站的用户体验，但不要过分重要。

将翻转盒效果想像成一餐调味料。在那里是为了增强现有的风味和食材，但是太多了会毁了这道菜。

话虽这么说，让我们看一下如何向您的WordPress博客或网站添加翻转框覆盖和图像悬停效果。

如何在WordPress中创建Flipbox叠加和悬停效果

您可以使用许多方法（例如Elementor页面构建器或添加自定义CSS）将翻转框和悬停效果添加到WordPress网站。

但是，我们建议的方法是使用Flipbox – Awesomes Flip Boxes图像叠加插件。该插件灵活且易于使用。这是最好的Flipbox和图像悬停WordPress插件。

该插件的免费版本为您提供速度和简便性。安装插件后，您可以快速将美观的翻转框添加到您的站点。

如果需要更多自定义选项，则可能需要升级到该插件的高级版本。这使您可以控制翻盖的颜色并添加自定义CSS。

您可能会发现现有模板在添加到您的站点时已经看起来不错，在这种情况下，无需升级。

您需要做的第一件事是安装并激活Flipbox – Awesomes Flip Boxes图像叠加插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

插件安装并激活后，您可以转到Flip Box»创建新内容来创建第一个Flipbox 。

这将显示整个模板选择。

如果这些还不够，那么您可以单击“导入模板”菜单选项，以获得更多可以使用的模板。

使用该插件的免费版本，有5种不同的模板可供选择，另外还有10种您可以导入的模板。

要导入新的可定制模板，请单击“样式”编号旁边的“导入”按钮。

现在，是时候选择并开始自定义模板了。

您需要单击“创建样式”以加载您的第一个翻盖设计。

这将弹出一个弹出菜单，您可以在其中命名您的翻转框，并选择要自定义的布局。

第1，第2，第3个“布局”选项与布局中的各个翻转框匹配。做出选择后，点击“保存”。

值得一提的是，您的最终设计将与Flipbox模板紧密匹配，因此最好选择一个与您希望它在网站上显示的外观类似的模板。

您将使用三个主要标签来更改翻转框的外观：“常规”，“前”和“后端”。

在这些选项卡的每个选项卡上，您都可以更改字体，填充和边距。但是，我们认为默认选项看起来不错。

接下来，我们将在翻转框的两侧更改文本。

将鼠标悬停在屏幕底部的翻转框上，然后点击“修改”。

这将弹出一个弹出窗口，让您更改正面文本，背面文本和背景图像。

要更改标题，如果要显示其他图标，请编辑“前标题”文本框和“字体图标：”框。

如果要添加背景图像，请单击“前图像”选项右侧的“上传图像”。

接下来，上传新图像或从现有媒体库中选择图像。

之后，您将在“后端设置”下的翻转框的背面执行相同的一系列步骤。

您可以在此处更改卡片翻转时显示的标题和文本。

您还可以更改“后端按钮文本”和“链接”字段。

这些更改按钮文本以及单击按钮后用户的位置。

最后，点击“立即上传”以更改翻页盒背面的背景图片。

与上述相同，您可以上传图像，也可以从媒体库中选择一个。

完成编辑后，请确保单击“提交”按钮以保存您的更改。

您会注意到您的新更改将立即显示在“预览”窗口中。

如果要创建整行的翻转框，请单击“添加新翻转框”元框中的“ +”图标。

这将弹出一个类似于上面的弹出框，您可以自定义第二个翻转框。

到目前为止，您已经创建并自定义了翻转框，是时候将其添加到WordPress站点了。

最简单的方法是使用包含的shortcode。在屏幕的右侧，有一个标记为“ Shortcode”的元框，复制类似于下图的短代码。

接下来，导航至您要添加翻页框并粘贴您的简码的页面或帖子。

然后，如果您的帖子已经发布，请单击“发布”或“更新”。

现在，您的新翻转箱将在您的网站上生效。

请注意，在调整浏览器窗口的大小时，由于翻转框具有100％的响应能力，因此它们也会随之调整。

该插件还包括一个翻转盒窗口小部件，您可以将其添加到主题支持的任何窗口小部件区域。

为此，导航至“外观»小部件”，然后找到名为“ Flipbox – Awesomes Flip Boxes Image Overlay”的小部件。

然后，您可以将小部件拖放到您的首选位置。

最后，输入样式ID（可在Flipbox插件主菜单中找到），然后单击“保存”。

我们希望本文能帮助您学习如何向您的WordPress网站添加翻转框覆盖和悬停。