超越文本 - 嵌入完整模板
为什么将切换限制为简单的文本?每个切换项目都可以是强大的内容类型:选择纯文本编辑器,或者更强大的模板。选择任何保存的元素模板,例如推荐部分、定价表或功能列表,并将其嵌套在切换内。这可以让您创建极其丰富的选项卡式界面,单击标签可以交换整个内容部分,而不仅仅是一段。
- 无限内容自由:将推荐、联系表单、图像库或产品规格放入单独的切换中。
- 重复使用您最好的作品:插入预先设计的 Elementor 部分或页面以保持一致性。
- 非常适合比较:使用一个切换"“计划 A 详细信息”,另一个切换"“计划 B 详细信息",每个切换都有自己的完整模板。
完整的视觉定制
使切换本身成为设计元素。将主要的 Toggler 容器与背景、边框一起设计,并选择其样式(如圆形药丸或尖锐矩形)。然后,设计在选项之间滑动的动态指示器。自定义其颜色、大小和边框半径。最后,将标签与完整的排版、颜色一起设计,并添加图标以获得额外的清晰度。您可以独立控制每个部分的正常状态、悬停状态和活动状态,创建一个真正抛光的交互组件。
- 自定义切换形状:创建药丸形、矩形或自定义圆形切换开关。
- 动画滑动指示器:设置移动选择器,直观地突出显示主动选择。
- 标签和图标设计:控制标签文本、间距,并向每个选项添加图标(如复选标记或信息图标)。
功能流畅且响应式控制
控制切换器的感觉和功能设置默认的 Active Index(该切换器首先打开)调整指标速度以获得快速或流畅的幻灯片动画使用 Stack On 功能来控制响应行为,如果需要,使标签在移动设备上垂直堆叠管理切换器相对于内容的位置以及元素之间的空间,以确保所有设备上的布局干净、功能齐全。
- 受控动画:设置滑动指示器的速度,以获得完美的响应感。
- 移动优化布局:使用 Stack On 将水平切换调整为移动屏幕上的垂直列表。
- Smart 默认值:选择页面首次加载时哪个内容面板可见。
切换内容的常见问题
这如何比其他切换小部件更好?
Toggle 另一个是简单的文字问答,我们的 Toggle Content 元素是一个布局和设计系统,关键的优势是: 1)能够在每个 toggle 中插入完整保存的模板, 2)滑动视觉指示器(如 iOS 交换机, 3)切换器、指示器和标签的单独造型,以及 4)更高级的响应控制(如 Stack On)。
我可以在切换中使用现有的 Elementor 模板(部分)吗?
是的,绝对!这是它最强大的功能之一,当将内容添加到切换项时,将内容类型设置为“模板”。然后,您可以选择保存在 Elementor 库中的任何模板。它将完美地加载到该切换面板内。
Toggles 内部的"模板"内容类型在现实世界中有何很好的用途?
想象一个软件产品页面。您可以进行三个切换:“功能、”“定价、”和“推荐。” 您无需编写文本,而是将预先设计的功能网格模板插入第一个切换,将定价表模板插入第二个切换,将推荐滑块模板插入第三个切换。您刚刚在几分钟内创建了一个功能强大的选项卡式产品概述。
这在手机上表现如何?
Full responsive,切换开关和内容会缩小以适合屏幕,也可以使用Stack On设置来改变布局,例如,让切换标签垂直堆叠,而不是并排坐在非常小的屏幕上,这样更容易点击里面的内容(无论是文本还是模板)也会根据自己的响应设置做出响应。
我可以有两件以上的切换物品吗?
是的,您可以通过单击"“添加项目”按钮添加无限的切换项目。这使其非常适合详细的常见问题解答页面、多步骤流程或并排比较几种不同的产品计划或选项。
