有时,一个部分需要在同一地点显示两件事,例如常见问题解答和团队网格,或者每月和每年的定价。 切换内容小部件 在 Elementor 的主插件 是pro小部件,它添加了一个在它们之间翻转的小开关,每个切换选项都保存纯文本或完整的保存的elementor模板,访问者点击一个标签来交换显示的内容。
您设置标签、可选图标以及每个图标显示的内容,然后将开关样式设置为匹配。这是一种干净的方式,可以更少地容纳空间,而无需将人员发送到另一个页面。本指南涵盖了小部件中的每个设置。
喜欢先看?本简短教程从头到尾浏览 Toggle Content 小部件:
Toggle Content 小部件的作用 #
Widget 显示一个带有两个或多个标签的切换开关,单击一个标签和下面的区域可切换到该选项的内容,每个选项可以是您输入的文本块或从您的库中保存的部分、页面或 widget 模板。
由于它可以拉入模板,因此切换不限于短文本。您可以在整个常见问题解答布局和团队部分之间进行翻转,两者都构建在 Elementor 的其他地方并放入切换中。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- 硕士插件专业版 使用活动许可证安装,因为 Toggle Content 是 Pro 小部件。插件新功能?查看 安装指南.
- 如果您计划切换模板,请首先将它们保存在 Elementor 中 模板库.
如何添加切换内容小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 切换内容的,或者滚动到主插件部分,拖动到你的页面上,它加载了两个示例切换选项,这样你就可以立即看到开关。
设置切换选项 #
在 内容 选项卡, 切换内容 部分持有 元素 repeater。每项都是一个切换选项。默认值为标签一和标签二,您添加更多与 添加项目、复制图标复制,或用X删除。
单击一个项目来打开其设置,其中有自己的内容和样式子选项卡。
- 标签: toggle按钮上的文字,像常见问题或我们的团队。它支持动态标签。
- 图标: 可选图标,带有图标位置(标签之前或之后)和图标间距。
- 类型: 选择用于键入文本的内容或模板以拉入保存的布局。
- 内容: type is Content 时,会出现一个包含媒体、格式和代码视图的全文编辑器。
切换保存的模板而不是文本 #
套 类型 到 模板 还出现了两个控件: 模板类型 (部分、页面或小部件)和 选择部分的, 您可以从库中选择任何保存的模板。这就是让单个切换选项显示整个预构建布局的原因。
Demo 中,一个选项指向已保存的常见问题部分,另一个指向团队部分。翻转切换和整个布局交换。
切换设置 #
的 切换设置 部分控制开关的行为。
- 活跃指数: page 加载时哪个选项首先显示,第一个选项设置为 1,第二个设置为 2,依此类推。
- 位置: 显示内容之前(上图)或之后(下图)的开关。
- 指示器速度: 活动指示器在选项之间滑动需要多长时间,以秒为单位(默认情况下为 0.3)。
设置切换风格 #
的 风格 tab 分拆成 切换器, 指标、和 标签.Toggler 部分控制开关容器本身。
- 风格: 肘节的形状,例如圆形。
- 背景颜色和边框半径: 开关轨道的外观。
- 对齐、缩放和宽度: 在其列中定位并缩放开关。
- 边框、盒子阴影、填充物、边距: 通常的框架控制。
的 指标 部分将滑动突出显示样式设置在活动标签后面,并且 标签 节设置 Stack On,用于移动、对齐、排版、间距以及默认、悬停和活动状态的颜色。一个单独的 内容 部分为开关下方的面板设计样式。
页面上的结果 #
Publish 或 preview 和切换实时工作:访问者点击标签,指示符滑动到它,下面的内容交换。这里切换从常见问题解答布局翻转到我们的团队模板,每个模板都保存了完整的部分。
常见用例 #
- 每月与年度定价 切换到 a 上方 定价表.
- 常见问题解答和团队 在服务页面上共享一个插槽的部分。
- 描述和规格 在产品页面上。
- 前后 案例研究布局。
- 两个保存的模板 交换时没有第二页或弹出窗口。
使用 Toggle Content 小部件的技巧 #
- 首先构建模板。 将要切换的部分保存在库中,然后将每个选项指向一个。
- 保持标签短。 一两个单词可以干净地配合开关并快速读取。
- 故意设置活动指数。 领先大多数访客希望首先看到的选项。
- 尽可能匹配内容高度。 在非常不同的高度之间切换会使页面跳跃。
- 使用图标以保持清晰。 每个标签旁边都有一个小图标,可以帮助人们区分选项。
常见问题 #
Master Addons 中的 Toggle Content 小部件是什么?
是Elementor的Master Addons Pro小部件,它添加了一个切换开关,可以在同一位置的两组或多组内容之间翻转,每个切换选项可以保存打字文本或保存的Elementor模板,访问者点击一个标签来交换显示的内容。
切换可以显示保存的 Elementor 模板吗?
是在切换选项中,将类型设置为模板,选择模板类型,然后从库中选择保存的部分或页面,然后切换显示整个布局,因此您可以在完整的预构建设计之间翻转。
如何设置哪个选项首先显示?
开切换设置部分,设置活动索引,第一个选项用1,第二个用2,依此类推,页面加载时显示该选项,访问者可以通过点击标签切换到其他选项。
我可以在切换标签中添加图标吗?
是。每个切换选项在其内容子选项卡中都有一个图标字段。将图标位置设置在同一项目中,以将其放置在标签文本之前或之后。
Toggle Content 与 Tabs 有何不同?
2个交换机内容都到位,但切换器是一个为两个或几个选项构建的单个紧凑型交换机,通常是一个二进制选择,如每月和每年。选项卡适合较长的部分列表。对于可折叠的常见问题解答,手风琴更适合。
包裹起来 #
Toggle Content 小部件将两种布局装入一个插槽中,并让访问者轻按一下在它们之间翻转 添加您的选项,为每个选项选择文本或保存的模板,设置哪个领先,并设置切换以匹配概述以及与手风琴和选项卡的比较,请参阅 元素器内容切换小部件 page。其他整理内容的方式,请参见 高级选项卡小部件 和 高级手风琴小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
