Elementor是一个强大的页面构建器,可以让你轻松创建令人惊叹的网站,其基本的Flipbox小部件提供了一种简单的方法来添加交互式3D效果,问题? Pro功能,设计和动画都是有限的。
主插件是一个具有自己的 Elementor 插件 翻转框小部件。它的工作原理没有 Elementor Pro,配有 6 个翻转动画和 22 个 Master Addons Pro,并且比 Elementor Pro 翻转盒为您提供更多的设计控制。
Master Addons,您可以创建视觉上引人注目的3D翻转框,以默认Elementor小部件根本无法做到的方式移动、转换和吸引用户。
Master Addons 打造顶级 3D 翻盖盒,并在本指南中向您展示如何打造引人注目的设计,从而脱颖而出。
使用主插件创建 3D 元素翻转框
让我们一砖一瓦地创造我们自己的 翻盖盒 使用 主插件.到最后你应该对如何创造出自己独特的有非常清晰的认识。
第 1 步:为 Elementor 安装主插件
在开始使用主插件 Flipbox 小部件之前,您需要这样做 安装并激活 master Addons 插件。以下是这样:
1。在你的WordPress仪表板中, 前往 插件 > 添加新内容。
2。在搜索栏中搜索 “元素师 氡大师 addons。
3、点击一下 立即安装 然后 激活 安装插件后。
激活后,Master Addons 小部件(包括 Flipbox)将在 Elementor 编辑器中可用。
第 2 步:添加 Flipbox 小部件
安装插件后,我们将 Flipbox 添加到您的页面
1、在元素编辑器中打开你的页面,选择Flexbox或网格作为你的布局。
2、在左侧面板上,搜索该 翻转框。您应该看到一个带有“的翻盖盒小部件妈”标签。
3。拖放的 翻转框 widget到页面所需的部分,这里需要注意的一点是,每当你使用翻盖盒时,它 建议使用 Flexbox 确保您的翻盖盒看起来不错。
添加后,基本的翻盖设计将出现在您的画布上,准备进行定制。
3步:创建一个3D元素反转框
现在我们已经达到了您可以调整的设置,以便在翻盖盒上获得优质的 3D 效果。
首先关掉。
1。样式预设
在样式预设中,您设置了 设计变化 並 动画风格
设计变化可让您自定义盒子正面。您可以将其设置为: 默认 或 前图标 免费,并且 正面图像 或 对角线 与专业人士。
通过动画风格,您可以准确选择翻盖盒的动画方式。
Master Addons 有 22 个动画:免费插件中有 6 个,还有 16 个,包括 Cube 和 3D Flip 效果,以及 Master Addons Pro。从简单的水平和垂直翻转到 3D翻转, 立方体动画、翻车效果等。
Master Addons 给你一个专用的 3D 翻转动画,让你的翻转盒有一种动态的感觉,甚至可以自定义这个动画的翻转样式,一旦你挑选出来,在“中就会出现一个新的选项风格"一般设置下的""选项卡: 3D翻转风格。
2。正面内容
单击 翻转框 小部件来编辑它。
下 内容 tab,您将看到字段来添加您的内容 前面 盒。您可以在此处添加标题、描述以及图像或图标。
3、背面内容
向下滚动到 返回内容 同部分 内容 选项卡。
样翻转框翻转时添加你想出现的内容,你可能会添加一个新的标题、文本或一个号召性用语按钮。
您可以使用以下方式分别对翻盖盒的两侧进行样式设计 风格 tab 来调整字体、颜色、填充、边框以及每一侧的更多内容。
4步:增强3D翻盖盒与其他扩展
Elementor 的主插件不仅仅停留在基本的翻盖盒功能上—它将您的翻盖盒提升到一个全新的水平,它具有各种扩展,旨在增加交互性、流畅的动画和引人入胜的效果。
我们将探索强大的功能,让您增强翻盖盒,使其更具动态性、视觉吸引力和用户友好性。
无论您是想要创建高级 3D 变换、添加视差效果还是微调入口动画,Master Addons 都能为您提供将活动盒提升到新水平所需的一切。
转变:
- 在 高级 tab,你就会找到 转变 设置。
- 在这里,您可以调整 翻盖式旋转 X、Y或Z轴上,以创建更复杂的3D效果。
- 玩耍 规模, 翻译、和 歪 更动态的翻盖盒选项。
雷拉克斯(视差效应):
- 要启用 Rellax 效果,请转到 高级 选项卡并滚动到 雷拉克斯 设置。
- 启用效果并调整 滚动速度 创建视差效果,其中翻转框在用户滚动时以与内容的其余部分不同的速度移动。
浮动效果:
- 添加浮动效果 (Pro),使翻盖盒在循环中轻轻漂移。此选项可以在下面找到 运动效果 节。
- 动(例如,向上或向下浮动)的类型,并根据自己的喜好调整强度。
工具提示:
- 主插件还可以让您添加 工具提示 到你的翻盖盒,当用户悬停在元素上时就会出现。工具提示可以提供额外的信息或上下文,而不会使你的设计混乱。
- 您可以在高级设置下为翻转框的正面和背面内容启用和自定义工具提示。
- 自定义工具提示文本、位置(顶部、底部、左侧或右侧)和样式(颜色、字体大小)以适应您的设计。
其他一些有用的扩展
- 下 运动效果 选项卡,启用 入口动画 当翻转框出现在页面上时应用吸引注意力的效果。
- 您可以从各种动画中进行选择,例如淡入、滑动或弹跳,以使翻盖盒在进入视口时弹出。
- 露(专业版)在翻盖盒上滚动进入视图时擦拭一次彩色块。打开 启用显示 在小部件中 高级 选项卡。
- 它在页面输入上运行,而不是在翻转上运行,您可以设置方向、速度、延迟和块颜色。
显示条件:
- 用 显示条件 flipbox 出现的时间和地点设定规则,您可以根据设备类型(桌面、平板电脑、移动设备)甚至滚动位置等条件来控制可见性。
Elementor 翻盖框是否按一下翻盖?
号主插件翻转框在悬停上翻转,在触摸屏上第一次点击转动卡片,3D翻转样式控制设置转动方向,而不是触发器,因此桌面上没有点击选项,如果必须在点击时显示,使用 切换内容 小部件或打开 a 中的详细信息 弹出窗口生成器 popup代替。将访客必须看到的任何东西(例如价格或电话号码)保留在正面。
3D翻盖盒演示来复制
4个实况演示使用上文所述的Pro动画,将演示页面上的任意卡片悬停查看回合,然后从标题中命名的Style Preset设置重建,全套20个翻转框示例在 翻转框小部件页面.
预览并最终确定您的 Flipbox
定制了翻盖盒后,是时候看看它的实际效果了。
- 单击 眼睛图标 elementor面板的底部,以便在编辑器中预览您的翻盖框。
- 测翻盖盒在不同设备(桌面、平板电脑和移动设备)上的表现,以确保其响应灵敏,并且到处都看起来很棒。
- 对设计、动画速度或位置进行任何最终调整,直到您对它的外观感到满意为止。
满意后,单击 发表 让您的翻盖盒在您的网站上运行。
结论
Elementor 的主插件为标准翻盖盒体验增添了更多香料,提供一系列高级功能,让您能够创建真正动态的交互式设计。
为了配合 3D 动画效果,您可以选择变换、视差效果、平滑的显示转换等选项,您可以使用它以超越基本动画的方式将翻盖盒变为现实。
通过遵循本指南,您可以轻松地在您的网站上添加引人注目的翻盖盒,增强用户参与度和视觉吸引力。因此,深入了解 Master Addons 并开始尝试创建令人惊叹的 3D 翻盖盒,让您的访问者印象深刻!
