如何在 WordPress 中创建 Flipbox 叠加和悬停
已发表: 2023-05-30在设计一个有吸引力和引人入胜的 WordPress 网站时，添加交互元素可以显着增强用户体验。 Flipbox 就是这样一种元素，它允许您以动态和交互的方式显示内容。
在这篇博文中，我们将探讨 Flipbox 是什么，Flipbox 覆盖和悬停在 WordPress 网站中的作用，并为您提供有关如何在 WordPress 中添加 Flipbox 覆盖和悬停的分步指南。
什么是 Flipbox？
Flipbox 是一种设计功能，允许您将材料作为一个盒子提供，当用户将鼠标悬停在它上面时，该盒子会翻转或旋转。 它通常包括正面和背面两个面，每一面都有不同的内容。
Flipbox Overlays 和 Hovers 在 WordPress 网站中的作用
Flipbox 覆盖和悬停有助于改善 WordPress 网站的用户体验和视觉吸引力。 它们使您能够以动态方式吸引对重要细节的注意、突出显示功能或展示您的照片和视频。 通过包括 Flipbox 覆盖和悬停，您可以使您的网站更具吸引力、激发用户参与度并改善整体设计美感。
将 Flipbox 添加到 WordPress 网站的分步指南
要将 Flipbox 覆盖和悬停添加到您的 WordPress 网站，您需要一个提供此功能的合适插件。 有几个 Flipbox 插件可用，但两个流行的选择是Elementor和ElementsKit Flipbox插件。 这些插件提供易于使用的选项和各种自定义设置，以创建令人惊叹的 Flipbox 效果。 安装和激活插件不是火箭科学。 您可以通过以下几个步骤轻松完成。
现在，让我们回到将 Flipbox 添加到您的站点。 这里有 4 种简单易行的方法 -
第 1 步：启用翻转框小部件
为此，请登录到您的 WordPress 管理仪表板并导航到ElementsKit ⇒ 小部件 ⇒ 翻转框小部件，打开小部件，然后单击保存更改。
第 2 步：拖放小部件
通过选择“使用 Elementor 编辑”选项来编辑页面。 然后，搜索带有 Ekit 图标的翻转框小部件，并将小部件简单地拖放到页面上。
第 3 步：自定义设置
展开翻转框菜单以更改设置：
- 翻转选项：您可以选择翻转动画的外观。 有四个选项：翻转、放大、滑入和 3D。 每一个都有不同的风格。
- 翻转方向：这决定了翻转动画的方向。 根据您选择的翻转类型，您会看到不同的翻转方向选项。
- 翻转触发器：这就是翻转发生的方式。 您可以在三个选项之间进行选择：悬停（当您将鼠标移到它上面时）、框单击（当您单击框时）或按钮单击（当您单击特定按钮时）。
- 翻转框高度：您可以更改翻转框的高度。 在此设置中，有两个选项卡：FRONT 和 BACK。 您可以分别自定义每一侧的内容。
对于翻转框的每一侧，您可以自定义以下内容：
- 媒体类型：选择是否要使用图标、图像或不使用（如果您不想添加任何图片）。
- 图标/选择文件：如果您选择了一个图标或图像，您可以从列表中选择要使用的图标或从您的计算机中选择一个文件。
- 标题：给翻转框的那一侧一个标题或名称。
- 副标题：在标题下方添加较小的文本以提供更多信息。
- 翻转描述：为翻转框的那一侧写下描述或解释。
- 对齐方式：确定您希望内容位于左侧、中间还是右侧。
完成翻转框两侧内容的自定义后，您可以更改样式以使其看起来像您想要的样子。
第 4 步：正式化您的翻转框
现在，转到“样式”选项卡并将每个部分展开到相应的样式选项：
Wrapper：您可以在此处更改包装器下的背景类型、颜色、位置、第二种颜色、位置、类型、角度等。 翻盖盒正面和背面的选项均可定制。
图标：通过展开此选项。 您可以更改常规视图和悬停视图的颜色、背景类型、框阴影、边框类型和其他设置。 翻盖盒前后两端均可自定义图标样式。
标题：从这里你可以 更改翻转框两侧的排版、标题颜色和标题边距。
副标题：修改此选项以自定义翻转框两侧副标题的排版、标题颜色和标题边距。
描述：在这里您可以自定义翻页框两侧描述的字体、描述颜色和边距。
按钮：展开按钮部分以更改文本颜色、背景颜色、边框类型、边框半径、边框框和其他设置。 可以为常规视图和悬停视图设置按钮的样式。
最后，单击发布/更新以保存更改并预览您的 Elementor 翻转框：
易于上手的图表
| 脚步 | 怎么做 |
| 第 1 步：启用 Flipbox 小部件 | ElementsKit ⇒ 小部件 ⇒ 翻转框小部件，打开小部件 ⇒ 保存更改。 |
| 第 2 步：拖放小部件 | 使用 Ekit 图标 ⇒ 搜索翻转框小部件 ⇒ 拖放小部件 |
| 第 3 步：自定义设置 | 自定义翻转方向、触发器、框高度、媒体类型、图标/选择文件、标题、副标题、翻转描述、对齐方式等。 |
| 第 4 步：正式化您的翻转框 | 样式选项卡 ⇒ 展开每个部分 ⇒ 相应地改变 |
适用于 WordPress 的最佳 Flipbox 叠加和悬停插件
这是我并排列出的两个流行的 WordPress Flipbox 叠加和悬停插件的概述。 这些是 Elementor 和 ElementsKit Flipbox 插件。 看一看
Elementor Flipbox 插件
Elementor 是一个广泛使用且备受推崇的 WordPress 页面构建器插件。 它提供了一个 Flipbox 小部件，允许您在您的网站上创建令人惊叹的翻转动画。 使用 Elementor，您可以轻松地为图像、图标、标题和描述添加交互式翻转效果。 该插件提供了一个用户友好的界面，您可以在其中自定义翻转方向、动画样式、触发事件（悬停、单击）和各种设计元素。 Elementor 以其灵活性、广泛的样式选项以及与不同主题的兼容性而闻名。
ElementsKit Flipbox 插件
ElementsKit 是 Elementor 的综合附加包，可增强其功能。 ElementsKit 中有一个专用的 Flipbox 模块。 它为您的 Elementor 支持的网站添加了更多高级 Flipbox 功能和效果。 这个插件提供了一个广泛的预先设计的 Flipbox 模板库。 这使您可以快速创建视觉上吸引人的翻转动画。 ElementsKit Flipbox 插件还提供了额外的自定义选项。 您可以拥有不同的 Flipbox 样式、叠加效果、悬停效果和各种触发事件。 它与 Elementor 无缝集成，为设计迷人的 Flipbox 元素提供无缝的用户体验。
Elementor Flipbox Plugin 和 ElementsKit Flipbox Plugin 都是您的最佳选择。 这些为网站带来了互动和引人入胜的翻转动画。 这些插件具有用户友好的界面和广泛的自定义选项。 此外，这些与 Elementor 页面构建器兼容。 无需编写代码。 因此，这些插件使您可以更轻松地创建具有视觉吸引力和交互性的 Flipbox 元素。
常见问题 (FAQ)
如何在 WordPress 中添加悬停效果？
要在 WordPress 中添加悬停效果，您可以使用 CSS 或提供悬停效果功能的插件。 许多页面构建器和定制器插件提供了向各种元素（包括 Flipboxes）添加悬停效果的选项。
你如何在 WordPress 中创建一个翻转框？
您可以使用专用的 Flipbox 插件（如 ElementsKit）在 WordPress 中创建一个翻转框。 这些插件允许您轻松创建和自定义 Flipbox 元素，而无需编码知识。
如何在 WordPress 中添加悬停图像？
要在 WordPress 中添加悬停图像，您可以使用 CSS 或提供图像悬停效果的插件。 这些插件通常具有指定不同图像或在将鼠标悬停在图像元素上时更改外观的选项。
你如何在 WordPress 中显示悬停内容？
您可以使用各种方法在 WordPress 中悬停显示内容。 一种方法是使用 CSS 在将鼠标悬停在特定元素上时显示隐藏的内容。 或者，Flipbox 插件通常提供选项以在 Flipbox 的正面和背面显示不同的内容，悬停时可见。
包起来
将 Flipbox 覆盖和悬停添加到您的 WordPress 网站可以显着增强用户体验并使您的内容更具吸引力。 按照这篇博文中概述的分步指南并利用 ElementsKit 等流行的 Flipbox 插件，您无需任何编码知识即可轻松创建令人惊叹的 Flipbox 效果。 因此，继续使用 Flipbox 覆盖和悬停来为您的网站增添趣味，并通过互动和视觉上吸引人的内容吸引您的网站访问者。