悬停时翻转的卡片显示同一空间内的内容是原来的两倍。 翻转框 小部件在 Elementor 的主插件 为您提供一个双面盒:一个带有图标、标题和描述的正面,以及一个带有自己的文本和按钮的翻转到视图的背面。
您选择一个动画,填写两个面,添加一个按钮,然后为每一面进行样式。有三十多种翻转效果,从普通的淡入淡出到完整的 3D 立方体。本指南将浏览小部件中的每个设置。
Flipbox 小部件的作用 #
该小部件从两个面构建一张翻转卡。 前盒 is 访客首先看到的:图标或图像,标题和描述。悬停在上面,卡片翻转到 后箱的,它有自己的标题、描述,还有一个可以链接到任何地方的按钮。
整个事情由三个选项卡运行。 内容 握住动画、正反文本和按钮。 风格 处理每个面的盒子高度、边框、颜色和排版。 高级 是通常的元素间隔和可见性。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 两面的文本和图标,以及背面按钮的链接。
如何添加 Flipbox 小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 翻转框的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到页面上,它加载了一个样本,正面和背面都可以编辑。
设置动画风格 #
打开 内容 选项卡。 样式预设 部分持有 设计变化 和 动画风格并且在其下方设置前盒、后盒和操作按钮部分。
的 动画风格 dropdown是有趣的部分,它携带三十多个选项,因此同一张卡片可以翻转,褪色,滑动或立方体到背面。
- 水平翻转和垂直翻转: 每个轴上的经典翻牌。
- 方(上下、下上、左、右): 3D 立方体在面之间旋转。
- 3d翻转, 淡入淡出, 淡出,翻转: 当你想要一些微妙的东西时,更柔和的就会显现出来。
- 滑动方向和对角线: 将背面从一侧或角落推入。
设置前框 #
打开 前盒 section。这是人们在盘旋之前看到的脸,所以它必须赚取翻转。
- 图标样式和图标: 从库中选择一个图标,或将其切换到图像。
- 标题和描述: 前面的标题和文本,每个标题和文本都有一个"使用人工智能写入"选项。
- 对齐和标题 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 下拉包含三十多个效果,例如翻转水平、翻转垂直、淡入淡出、淡出向上、翻转、3d 翻转、立方体变体、幻灯片方向和对角线,您每张卡片选择一张来控制背面的出现方式。
我可以在翻转卡上添加按钮吗?
是。Content选项卡中的动作按钮部分设置了按钮标签及其链接。按钮位于背面,因此它显示卡片何时翻转,这使其成为自然地将访客发送到产品或表格的地方。
我可以使用图像而不是正面的图标吗?
是的前盒子部分,切换图标样式,以便您可以选择图像而不是库图标,样式选项卡还可以让您为任一面设置背景图像,因此图像主导的翻转卡很容易构建。
如何保持翻转卡两面大小相同?
Style标签的常规部分设置翻转框高度,它给两个面一个固定的高度,因此翻转前后卡片保持相同的大小,而不是调整大小以适合每一面的内容。
包裹起来 #
Flipbox 小部件将一张平卡变成一张交互式卡:选择一个动画,填写正面和背面,链接按钮,然后为每一面进行样式,有关小部件请参见 信息框小部件 和 团队成员小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
