设计变奏和翻转动画
设计变化 设置正面布局:默认和正面图标附带小部件、正面图像和对角线需求 Pro。 动画风格 设置卡片的转动方式。包括:flip Horizontal、Flip Vertical、Fade、Flip Box、Flip Box Fade 和 Fade Up。Pro 添加了四个立方体方向、Fade Hideback、Fade Up Hideback、四个幻灯片方向、两个对角线幻灯片、Fade In Out、Nananana、Rollover 和 3D Flip,它们有自己的方向设置。
- 共有 22 部动画:6 部包含,16 部包含 Pro。
- 翻转可在桌面悬停和触摸屏点击上运行。
- 每个部分使用一个动画,这样一排卡片就感觉一致。
双面内容生成器
的 前盒 並 后箱 default、堆叠或框视图以及圆形或方形形状的每个都有自己的图标,标题、描述、对齐和标题标签保持前面的短,就像服务名称一样,并使用后面的解释。在样式选项卡中,每个面都有自己的背景、标题和描述颜色、排版、图标颜色和边框。
- 为每张脸单独提供内容和造型。
- 两张面上的标题 HTML 标签,因此卡片网格可以保持干净的标题顺序。
- 甲 翻盖盒高度 general 中的设置使两个面保持相同的大小。
CTA 按钮带悬停
的 动作按钮 背面显示按钮文本和链接。将其设置为普通和悬停,带有文本颜色、背景、边框、边框半径和填充,以及排版。该按钮是小部件内部的唯一链接。要使整张卡片可点击,请添加 包装链接 小部件的扩展。
- 当链接到达时,请使用特定标签,例如“查看定价”。
- 跳过纯信息卡上的按钮。
- 如果您使用包装链接,请将按钮指向同一页面。
翻盖盒一目了然
该表列出了小部件今天所做的事情,从版本 3.2。6 的插件源读取。
| 物品 | 翻转框 |
|---|---|
| 设计变化 | 4:包含默认和前图标;正面图像和对角线与专业版 |
| 动画 | 22:包括6(翻转水平,翻转垂直,淡入淡出,翻转盒,翻转盒淡入淡出)和16与Pro(四个立方体方向,两个隐藏式淡入淡出,四个幻灯片,两个对角线幻灯片,淡入淡出,Nananana,翻转,3D翻转) |
| 前后内容 | 图标或图像(带有 Pro Front Image 设计的图像)、带有自己的 HTML 标签的标题、每个面上的描述和对齐 |
| 图标风格 | 默认,堆叠或框架,具有圆形或方形形状 |
| 触发 | Hover 在桌面上,先点按触摸屏。无点击触发 |
| 整箱链接 | No。后退按钮携带链接;包装链接扩展使整张卡可点击 |
| 高度控制 | 是的,翻盖式高度,一般 |
| 旋转木马模式 | 否 |
| 3D翻转方向 | Pro 3D Flip 动画上的 4 个方向 |
| 需求 | Elementor 和 Master Addons。 Pro 适用于两个额外的设计和 16 个额外的动画 |
Elementor Pro 翻转框与主插件翻转框
Elementor Pro有自己的翻盖盒小部件,如果你已经付钱了,你可能不需要另一个,下面是两者相比。
| 特点 | Elementor Pro 翻盖盒 | 主插件 Flipbox |
|---|---|---|
| 价格 | 需要 Elementor Pro | 主插件; Pro 中的更多设计和动画 |
| 翻转效果 | 翻转、滑动、推入、放大、缩小和淡入,具有方向和 3D 深度 | 6部包括动画,22部与Pro合作,包括立方体,翻滚和3D翻转 |
| 触发 | 悬停 | 悬停;首先点击触摸屏 |
| 正面图形 | 无,图像或图标 | 图标,或采用 Pro Front Image 设计的图像 |
| 整张卡链接 | 打开链接:仅限整箱或按钮 | 仅按钮,或带有包装链接扩展的整张卡 |
| 按钮 | 是的 | 是的,具有普通和悬停造型 |
Elementor Pro 想要内置一个整盒链接就更简单了,Master Addons 在没有 Pro 的 Elementor 上工作,并用自己的 Pro 给出了更多的动画选择,对于没有隐藏任何内容的静态卡,请使用 信息框 小部件。
翻转卡 CSS 还是翻转盒小部件?
翻转卡与翻转盒是一样的:旋转到背面的正面,您可以使用透视、变换风格:保留-3d和背面-可见性:隐藏的手写一张大约有40行CSS的,然后将其放入HTML小部件中。对于您控制的页面上的一张卡,该路线很好。
CSS 版本有三个反复出现的问题,触摸屏没有悬停,所以除非添加轻按处理程序,否则卡片永远不会翻转,两个面都需要固定高度或卡片在转动时跳转。并且每次更改颜色、文本或图标都意味着再次编辑代码,通常在需要 Elementor Pro 的自定义 CSS 字段内。Flipbox 小部件从编辑器面板处理轻按、高度和造型,并且它为您提供背面按钮、22 个动画和每张卡片的设计变化,无需触摸代码。
翻转框的想法和技巧
翻转盒可以保持网格清洁,同时仍然携带细节,因为描述位于卡片后面而不是下面。它非常适合服务网格、正面有照片的团队卡片和背面的简介,具有翻转到数字含义的图块和统计卡。
- 设置翻盖盒高度。 如果没有它,较长的背面会在卡片转动和行跳跃时调整卡片的大小。
- 让脸看起来不一样。 正面有色调,背面有品牌颜色,翻转明显。
- 电话计划。 Touch screen没有悬停,所以点按翻牌,按键需要二次点按,在真实手机上测试。
- 将基本细节保留在正面。 价格、电话号码和预订链接不应仅靠背面显示。
- 限制运动。 每页一两行翻转框读数优于六种不同的动画。
如何在 Elementor 中添加翻转框
您需要 WordPress。org 中的 Elementor 和 Master Addons 插件。
- 检查 Flipbox 是否已打开 主插件、小部件.
- 在 Elementor 编辑器中,搜索 翻转框 并将其拖入容器中。
- 选择设计变体和动画风格,然后悬停卡片以预览它。
- 填写前框和后框:图标、标题、描述和标题标签。
- 添加操作按钮文本和链接。
- 风格,一般,设置 翻盖盒高度 因此,该卡不会调整中翻转的大小,然后为每个面部设计样式。
3D效果,请阅读 3D元素人翻盖盒动画的制作方法。每个设置都在 翻转框小部件设置.
Flipbox 与其他一些主插件小部件配对: 信息框 为永不翻转的卡片, 创意按钮 对于网格下风格化的行动号召, 图像悬停效果 为一张显示标题而不是背面的照片, 团队成员 对于具有社交链接的人卡,以及 切换内容 当必须通过点击而不是悬停来显示时。
Flipbox 常见问题解答
翻盖盒在手机上如何工作?
Touch screen没有悬停,所以卡片在轻触时翻转,背面按钮在翻转后需要自己轻触,正面必看信息保留,在真实设备上测试。
我可以使用图像而不是正面的图标吗?
是的,带有正面图像设计变体,这是 Master Addons Pro 选项。否则,请在正面使用图标或在"样式"选项卡中为面部设置背景图像。
我需要 Flipbox 小部件的 Master Addons Pro 吗?
No。Flipbox 附带 Master Addons 插件,其中包含默认图标和前图标设计以及 6 个动画。Master Addons Pro 又添加了 2 个设计,又添加了 16 个动画。
翻转卡与翻转盒相同吗?
是的。翻转卡是相同效果的 CSS 教程名称:旋转到背面的正面。Flipbox 小部件从编辑器面板构建翻转卡,高度、触摸屏上的点击和背面按钮为您处理。
Elementor 有翻转框小部件吗?
Elementor Pro 只有一个。没有 Pro 的 Elementor 没有。因此您需要一个插件,例如此 Flipbox 小部件。
我可以将整个翻转框链接到没有单独按钮的页面吗?
小部件仅链接按钮。要使整张卡可点击,请打开 包装链接 扩展并将链接添加到 Flipbox 小部件。
有多少个翻转动画?
22共。翻转水平, 翻转垂直, 淡入淡出, 翻转盒, 翻转盒淡入淡出上附赠小部件, 其他16包括立方体, 翻转和3D翻转, 需要大师插件Pro。
我可以在旋转木马中放置翻盖盒吗?
Not 内置设置,小部件没有转盘模式,保存一个翻转框作为模板,在 中显示 图片旋转木马 或者是循环网格,或者将卡片放在包装容器中。
Elementor Pro 翻盖盒有什么区别?
Elementor Pro有六个效果,方向和3D深度,一个整箱链接选项,需要一个Elementor Pro计划,Flipbox在没有Pro的Elementor上工作,有6个包含的动画和22个带有Master Addons Pro,两个图标或图像设计,并通过Wrapper链接扩展链接整张卡。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
