悬停翻转的卡片显示同一空间内内容的两倍。免费 翻转框小部件 在 Elementor 的主插件 为您提供一个双面盒:一个带有图标、标题和描述的正面,以及一个带有自己的文本和按钮的翻转到视图的背面。
您选择一个动画,填写两个面,添加一个按钮,然后为每一面进行样式。有 22 种翻转效果:6 种在免费插件中,16 种在 Master Addons Pro 中,从普通淡入淡出到 3D 立方体。本指南将浏览小部件中的每个设置。
Flipbox 小部件的作用 #
该小部件从两个面构建一张翻转卡。 前盒 is 访客首先看到的:图标或图像,标题和描述。悬停在上面,卡片翻转到 后箱的,它有自己的标题、描述,还有一个可以链接到任何地方的按钮。
整个事情由三个选项卡运行。 内容 握住动画、正反文本和按钮。 风格 处理每个面的盒子高度、边框、颜色和排版。 高级 是通常的元素间隔和可见性。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 两面的文本和图标,以及背面按钮的链接。
如何添加 Flipbox 小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 翻转框的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到页面上,它加载了一个样本,正面和背面都可以编辑。
设置动画风格 #
打开 内容 选项卡。 样式预设 部分持有 设计变化 和 动画风格并且在其下方设置前盒、后盒和操作按钮部分。
的 动画风格 dropdown是好玩的部分,它携带22个选项,所以同一张卡可以翻转,褪色,滑动,或者立方体到背面,翻转水平,翻转垂直,褪色,翻转盒,翻转盒褪色和褪色是免费的;其余的需要pro。
- 水平翻转和垂直翻转: 每个轴上的经典翻牌。
- 方(上下、下上、左右、右左): 面(pro)之间的3d立方体旋转。
- (免费), 3d翻转和翻转(专业): 当你想要一些微妙的东西时,更柔和的就会显现出来。
- 滑动方向和对角线 (Pro): 将背面从一侧或角落推入。
设置前框 #
打开 前盒 section。这是人们在盘旋之前看到的脸,所以它必须赚取翻转。
- 图标样式和图标: 从库中选择一个图标。正面的一张图像附带 Pro 中的正面图像设计变体。
- 标题和描述: 前面的标题和文本,每个标题和文本都有一个"使用人工智能写入"选项。
- 对齐和标题 HTML 标签: 对齐内容并设置标题级别(H1 至 H6)。
设置后箱 #
打开 后箱 section for face trips into view。it takes remained the same fields as the front, so a short teaser out front c
- 图标: 背面的单独图标。
- 标题和描述: 背面标题和文本。
- 对齐和 HTML 标签: 后面的布局和航向级别。
添加操作按钮 #
的 动作按钮 section 住在背面。设置标签和它指向的位置, 因此悬停可以直接指向产品、表单或另一页。
- 按钮文本: 该标签,例如"开始"或"了解更多"。
- 链接: 打开按钮的 URL,带有通常的 Elementor 链接选项。
设置翻转卡 #
打开 风格 选项卡。 一般的 部分设置了边界,并且,这里最重要的设置是 翻盖盒高度的,这使得两个面都有一个固定的大小。
在将军的领导下,你要分开 前盒 並 后箱 sections。each都有自己的背景颜色或图像,标题和描述颜色,排版和图标颜色,所以如果您想要,这两个面孔看起来没有任何相似之处。
常见用例 #
- 服务卡 正面有一个图标,后面有一个细节和一个按钮。
- 团队成员 正面显示照片,翻转显示简介。
- 产品亮点 这揭示了价格和悬停时的购买按钮。
- 特色网格 每张牌都翻转到简短的解释。
- 投资组合瓷砖 前面有缩略图,后面有项目链接。
使用 Flipbox 小部件的技巧 #
- 设置固定高度。 Flip Box Height 保持两个面大小相同,因此卡片翻转时不会跳跃,将其未设置,较长的背面会调整卡片中悬停的大小,这会使人看不见。
- 短信请向后退。 后部翻转速度很快,因此一条紧线和一个按钮的读数比整个段落更好。
- 将动画与心情相匹配。 Fade适合平静的页面;3D翻转和立方体适合大胆的英雄。
- 对比两张脸。 背面不同的背景颜色使翻转一目了然。
- 始终链接按钮。 背面按钮是回报,因此将其指向下一步。
观看视频教程 #
喜欢在屏幕上跟进?下面的视频教程从头到尾浏览 Flipbox 元素,展示 Elementor 编辑器中的动画样式、正面和背面以及造型的工作原理。
常见问题 #
Master Addons 中的 Flipbox 小部件是什么?
Elementor小部件,它构建了一张双面卡,正面显示一个图标、标题和描述,在悬停上它翻转到一个带有自己的文本和按钮的背面,所有内容都是从Elementor面板设置的,没有代码。
Flipbox 小部件有多少个翻转动画?
Animation Style 下拉包含 22 种效果,6 种免费,16 种带 Pro,例如 Flip Horizontal、Flip Vertical、Fade、Fade Up、Rollover、3d Flip、Cube 变体、幻灯片方向和对角线。您每张卡片选择一张来控制背面的外观。
我可以在翻转卡上添加按钮吗?
是。Content选项卡中的动作按钮部分设置了按钮标签及其链接。按钮位于背面,因此它显示卡片何时翻转,这使其成为自然地将访客发送到产品或表格的地方。
我可以使用图像而不是正面的图标吗?
是。使用前图设计变体,一个Master Addons Pro选项,在前面放一个图像。样式选项卡还可以让你为任一面设置背景图像,因此图像主导的翻转卡很容易构建。
如何保持翻转卡两面大小相同?
Style标签的常规部分设置翻转框高度,它给两个面一个固定的高度,因此翻转前后卡片保持相同的大小,而不是调整大小以适合每一面的内容。
包裹起来 #
Flipbox 小部件将一张平卡变成一张交互式卡:选择一个动画,填写正面和背面,链接按钮,然后为每一面进行样式,有关小部件请参见 信息框小部件 和 团队成员小部件,浏览全文 主插件小部件和扩展,并看到 翻转框小部件页面 用于演示以及与 Elementor Pro Flip Box 的比较。
