翻转盒是一张有两张面的卡片,正面带有图标和简短标题,悬停在上面,卡片旋转到背面,上面握着描述和按钮,Elementor Pro 运送一张,你不需要 Pro 即可获得一张。
的免费 主插件 Flipbox 小部件 将 1 加到常规元素数上,超过 30 翻转动画、两张脸独立造型,还有一个按钮,可以链接到任何你想要的地方。本指南涵盖了构建、修复大多数翻转问题的设置以及人们发布后赶出去的移动行为。
翻转盒实际上是什么
盒(flip box)是一张双面卡片,在悬停或轻按时交换面孔,正面显示带有标题的图标或图像,背面显示较长的描述,通常还有一个按钮,它保持网格干净,同时仍然携带细节,因为描述位于卡片后面而不是下面。
你先展示一个可扫描的行,然后让任何有兴趣的人自己拉细节,没有人必须阅读一面复印墙才能找到他们来的一项服务。这就是到达一项的原因。
它处理得很好的四种模式:
- 服务网格。 前面命名服务,后面解释它并链接到服务页面。
- 团队卡。 Fang面照片和名字,背面生物和链接,如果没有什么需要隐藏,Yi个平原 团队成员部分 是更简单的构建。
- 特色瓷砖。 前面是图标,后面是规格。
- 状态卡。 前面的一个大数字,可以翻转到这个数字的含义。
Elementor 有翻转框小部件吗?
Elementor Pro有一个。免费Elementor没有。那种区别很重要,因为大量的教程模糊了它,然后人们去寻找一个不在他们面板中的小部件。
因此,有四种诚实的路线可以到达翻转箱,并且每种路线都要求不同的东西:
| 路线 | 成本 | 它让你付出什么代价 |
|---|---|---|
| Elementor Pro 翻盖盒 | 付费许可证 | Needs Pro 在你构建的每个站点。涵盖基本的翻转, 滑动和缩放效果。 |
| 手动编码的 CSS 3D 变换 | 免费的 | No visual editing。fine 直到客户要求更改副本并且您又回到了样式表中。 |
| 主插件 Flipbox | 免费的 | One more plugin。两个面孔都是在普通编辑器中设计的,预设和三十多个动画。 |
| 其他免费插件 | 免费的 | Fancy Elementor Flipbox 和 HappyAddons 都这样做。无论哪种方式,您都采用另一个插件的更新周期。 |
Elementor Pro 已经付费的话,使用它的 Flip Box,跳过额外的插件,安装不需要的东西没有奖品,如果你在免费 Elementor 上,这份指南的其余部分就是你的路线。
在开始之前
- WordPress 已安装并处于活动状态。
- Elementor 的主插件已安装并处于活动状态,它在 WordPress。org 上免费,可在 30,000 多个站点上运行。
- 2个面孔的图标、复制和目标链接,首先对这些进行排序,在你发明复制的时候设计一张卡片,就是你在实时页面上得到“Lorem ipsum”的方式。
逐步构建翻转框
第 1 步:启用 Flipbox 小部件
Master Addons 将每个小部件都放在一个切换后面,这样您不使用的小部件就永远不会加载。转到 主插件 → 设置,打开 元素 tab,找到翻转框,打开它,保存。
No toggle?更新插件。Elements选项卡在版本和旧版本之间有所增长,构建以不同的方式分组事物。
2步:在页面上掉落小部件
Elementor编辑任何页面,在小部件搜索中键入“翻转框”, 拖入容器中, 它在两面上加载样本内容, 已经翻转。
Hover it 在你改变一个东西之前在预览中,你想要一种默认动画速度的感觉,因为那是人们最常独自离开的设置,然后想知道为什么卡片会感觉迟钝。
第 3 步:选择设计变体
内容选项卡在 a 上打开 样式预设 持有两个控制装置的部分: 设计变化 並 动画风格。在那些坐的前盒子,后盒子和动作按钮下方。
Design Variation 改变正面面部排列方式 实际决定是图标还是照片承载您的信息 图标主导的变体适合服务网格和功能行 图像主导的变体适合团队成员、产品组合图块和产品卡,其中面部或照片的工作量比任何图标都多。
4步:选择动画
Animation Style 下拉功能携带三十多种效果。它们分为四组:
- 水平翻转/垂直翻转。 每个轴上的经典卡牌旋转。可读,以及当您没有理由选择其他任何东西时的安全默认值。
- 立方体(上下、下上、左、右)。 3D立方体在面部之间旋转。戏剧性。将其用于英雄,而不是在八个网格上。
- 3d翻转, 淡入淡出, 淡出,翻转。 对于其他地方已经有动议的页面,显示得更柔和。
- 滑动方向和对角线。 背面从一侧或角落推入。这些在移动设备上读数很好,旋转会感觉很重。
Pick one跨区承诺,六张翻六种不同方式看起来不俏皮,看起来破裂,唯一好的混搭理由是当两段需要有刻意分开的感觉。
想要在承诺之前并排看到动作风格吗? 元素动画效果指南 预览常见的,以及 3D翻转盒演练 cube 和 3d Flip 选项背后的透视设置更深入。
5步:写出正面
打开 前盒。这是必须赢得悬停的面孔,所以它获得的副本比你想象的要少,而不是更多。
- 图标样式和图标。 从图标库中拉出或切换到图像。主插件会附加出货 图标库 超越字体 如果您需要的话,真棒。
- 标题。 3到5个字。它必须在平板电脑宽度的一行上生存。
- 描述。 1行。标题和描述字段都有一个 AI来写 如果卡住面板,则内置选项。
- 对齐和标题 HTML 标签。 H1 到 H6。正确设置这个。一个网格,其中有六个翻转框,其中有一个部分内有 H2 标题,该部分已经有一个 H2,在页面上为您提供了七个 H2,并有一个审核工具,可以标记它。同样小心适用于 a 中的任何重复块 自定义元素器布局.
6步:写出背面
相同的领域,不同的工作。 后箱 take its own icon, title, description, alignation and heading tag, so the two face don’t have to match at all。
保持本节有用的规则: 前面做出了承诺,后面保留了它。如果正面说“网页设计”, 背面说实际包含的内容和页面的链接。有人因为正面抓住了他们而盘旋。用信息来回报这一点,而不是用另一个口号来回报。
2、3句话。长一点,牌感觉局促平板宽,牌窄一点,文字却没有缩。
7步:添加操作按钮
的 动作按钮 section 设置标签和链接,按钮仅在背面渲染。将文本设置为下一页实际交付的内容。“了解更多”没问题。“查看定价”更好, 当链接转到定价时。
完全跳过纯信息网格上的按钮,翻转到描述并停止的卡片是完美的卡片,当该部分进行转换工作时添加它。
修复大多数翻转框投诉的设置
切换到 风格 选项卡并打开 一般的。有一个控制叫 翻盖盒高度.
设置它。
Leave it unset 和每张卡片大小本身到哪个面孔有更多的内容,所以卡片大小中悬停随着较长的背面翻转进去。行跳转。应该匹配的卡片最终在不同的高度,因为一个服务描述比其他服务描述运行两行长。Flipbox 文档将此列为其第一个工作提示,并且它是最常单独留下的设置。
200px是明智的楼层,350px适合大多数的特色网格,集装箱级别设置一次,行中每张卡片都匹配。
General的时候,动画时长保持在400ms到700ms之间,更快的读取为故障,更慢,光标在翻转完成之前已经继续移动。
造型两张脸
一般情况下,你会分开 前盒 並 后箱 面板,每个面板都有自己的背景颜色或图像、标题和描述颜色、排版和图标颜色。
使两张脸真正不同,浅灰色前翻转到稍浅灰色的背部看起来像渲染故障而不是暴露。大多数设计都落在前面的柔和色调和背面的品牌颜色上,这使得从房间的另一边看翻转很明显。
Style按钮的正常状态和悬停状态,以匹配网站其他地方的按钮,一个看起来与其他CTA完全不一样的翻转框按钮读作嵌入式广告。
使整张卡片可点击
By madequate 链接坐在按钮上,而不是卡片,人们尝试点击卡身,什么都没发生,他们就离开了,这只是一件小事,需要真正的点击。
修复程序不在 Flipbox 小部件中。是的 包装链接 扩展、主插件设置下启用的一个单独的模块,它将任何元素包裹在一个链接中,打开它,然后将其应用到翻转盒容器中。
One cautiful: 如果整张卡片链接到某个地方,按钮链接到其他地方,那么访问者首先击中的哪一张获胜,而另一张则永远不会被使用。将它们指向同一目的地,或者丢弃按钮。
移动:吸引人们的部分
Phone没有悬停,翻转改为点按开火,先点按将卡片翻转到后面,第二次点按将其翻转回家,一旦背面显示,按钮需要自己点按。
2次轻点,然后任何人都才能达到你的行动号召,在桌面上,背面需要光标移动,在移动上,它需要刻意的努力,而有意义的访问者份额永远不会花掉它。
2次轻按也是东西破裂的地方,一个向前翻转但不会向后翻转的翻转盒的报告在Elementor社区线程中会定期出现,编辑器预览版无法足够可靠地再现触摸行为,无法在您发货前在真实的手机上进行测试,因为编辑器中的响应模式不会向您显示这一点。
这导致的规则比这里的任何造型选择都重要:
切勿将重要信息仅放在背面。 如果移动访问者必须拥有它,正面或卡片之外的某个地方会出现价格、电话号码、地址或预订链接。将背面视为额外细节的地方,而不是页面所依赖的任何内容。
卡缩放并包裹断点,高度响应灵敏,因此您可以在 Elementor 响应模式下将其收紧以供移动使用。如果网格以您未计划的宽度断裂,请检查 标准元素断点 首先,然后添加 自定义断点 如果您需要尺寸,elementor 不会发货。
老实说,无障碍
翻转框将其一半内容隐藏在键盘用户和屏幕阅读器无法执行鼠标用户操作的交互后面。值得在部分上线之前进行整理,而不是在部分上线之后进行整理。
有两件事使其具有防御性:
- 添加可见焦点状态 因此,键盘用户通过该页面选项卡可以看到并触发该卡。
- 使返回的内容以另一种方式到达、附近一节、链接页面、可折叠块,如果你的服务描述的唯一路径是悬停,那么有些访客就没有路径。
Search engines索引背面文字,由于它坐在DOM中而不是按需加载,所以将副本隐藏在翻转后面就爬行而言不会将其从页面中删除,一个人是否能到达它是一个单独的问题,也是首先回答的问题。
何时跳过翻盖框
不同的小部件可以更好地为您服务的三种情况。
背面的文字对每个读者都很重要。 如果每个人都需要描述,不要让他们为此徘徊。安 信息框 显示一个图标、一个标题和一行副本,没有任何隐藏内容,也没有交互可以在四台设备上进行测试。
你想要的是动作,而不是第二张脸。 如果吸引力是光滑的悬停效果并且您没有真正的背面内容,则 转换扩展 3D运动添加到任何元素,而无需发明副本来填补没人要求的面孔。
页面已经移动。 Parallax, scroll reveals, 一个动画英雄, 现在是一个翻转卡片的网格, 经过一定数量的移动访问者停止注册任何一个, 每个效果对浏览器来说都更有效, 计算页面上已经有的内容, 然后再添加更多内容, 如果它正在缓慢加载, 固定速度 在添加另一个动画之前。
And值得尊敬的软帽:一页六八个以上的翻盖盒子, 提示成噱头, 一两个版块是甜蜜点。
免费与专业版
Flipbox小部件在免费插件中,每一个设计变体,每一个动画,两张脸独立造型,无限站点,Pro不解锁翻转盒,它解锁周围的其他东西。
| 特点 | 免费的 | 专业人士 |
|---|---|---|
| Flipbox 小部件,所有设计变化 | 是的 | 是的 |
| 30多个翻转动画的所有 | 是的 | 是的 |
| 两张脸的单独造型 | 是的 | 是的 |
| 翻盖盒高度和响应式控制 | 是的 | 是的 |
| 包装链接扩展 | 是的 | 是的 |
| 完整的 80 多个小部件库 | 部分 | 是的 |
| 小部件生成器和模板套件 | 否 | 是的 |
| 优先支持 | 社区 | 是的 |
如果翻转框是你来找的,那么免费就是整个答案。如果您正在跨客户端站点重建相同的卡布局,则 小部件生成器 将其保存一次作为可重用小部件,并且它位于付费层上。完整细分 定价页面并且更广泛地了解我们还有什么可用 元素加元的综述.
常见问题
Elementor 中的翻转框是什么?
盒(flip box)是一张双面卡片,正面显示带有标题的图标或图像,在悬停或轻按时它会旋转到带有较长描述的背面,通常还会使用按钮,用于服务网格、团队卡、功能图块和统计卡,只要干净的前视图加上可选的细节可以击败一块文本。
Elementor 中的翻转框小部件免费吗?
Elementor 自己的 Flip Box 小部件是 Elementor Pro 的一部分,因此它不是免费的。Master Addons Flipbox 小部件包含在 WordPress。org 上的免费插件中,并且与常规 Elementor 配合使用,因此您无需 Pro 许可证即可构建一个。
如何在 Elementor 中添加翻转框小部件?
Master Addons → 设置 → 元素下启用 Flipbox,然后在 Elementor 编辑器中打开一个页面,在小部件搜索中键入 “Flipbox”,并将其拖入容器中,如果搜索中没有出现,则切换尚未打开或编辑器需要重新加载。
为什么我的翻盖盒在移动设备上不会翻回来?
Touchscreen 上翻转是按 tap 而不是悬停运行,所以第一次 tap 显示背面,第二次 tap 应该返回它,当第二次 tap 没做任何事情时,通常是 tap 处理中的冲突,在真实设备上测试而不是响应模式,在隔离它时每行保留一张卡,并且永远不要只在背面放置必看信息。
我可以使用图像而不是正面的图标吗?
是。在前框部分切换图标样式以使用图像,或选择图像主导的设计变体。样式选项卡还为任一面设置背景图像,因此完全图像主导的卡片很简单。
我可以让整个翻转框可点击,而不仅仅是按钮吗?
Not from widget 里面。链接默认坐在按钮上。要使整个卡片可点击,请在主插件设置中启用包装器链接扩展并将其应用到翻转框容器中,翻转框容器将整个卡片包裹在一个链接中。
如何保持卡片两面大小相同?
Style标签的常规部分设置翻转框高度,它给两个面一个固定的高度,因此当背面携带的文字多于正面时,卡片不会调整中翻转的大小。
该小部件有多少个翻转动画?
Flip 水平和垂直、四个立方体方向、3d Flip、Fade、Fade Up、Rollover、幻灯片方向和对角线等三十多个,每张卡片你挑一张。
相关阅读
- 3D元素人翻盖盒动画的制作方法
- Flipbox 小部件文档、每个控制,按顺序
- 元素动画效果
- 图片热点小部件(用于突出显示一张图像内的区域), 而不是翻转整张卡片
- 信息框小部件中,什么都不应隐藏时的静态替代方案
- 免费元素部分模板 导入并编辑
