切换内容

有时,一个部分需要在同一地点显示两件事,例如常见问题解答和团队网格,或者每月和每年的定价。 切换内容 小部件在 Elementor 的主插件 添加一个在它们之间翻转的小开关。每个切换选项都包含纯文本或完整保存的 Elementor 模板,访问者点击标签来交换显示的内容。

您设置标签、可选图标以及每个图标显示的内容,然后将开关样式设置为匹配。这是一种干净的方式,可以更少地容纳空间,而无需将人员发送到另一个页面。本指南涵盖了小部件中的每个设置。

喜欢先看?本简短教程从头到尾浏览 Toggle Content 小部件:

Toggle Content 小部件的作用 #

Widget 显示一个带有两个或多个标签的切换开关,单击一个标签和下面的区域可切换到该选项的内容,每个选项可以是您输入的文本块或从您的库中保存的模板、部分或页面。

由于它可以拉入模板,因此切换不限于短文本。您可以在整个常见问题解答布局和团队部分之间进行翻转,两者都构建在 Elementor 的其他地方并放入切换中。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 如果您计划切换模板,请首先将它们保存在 Elementor 中 模板库.

如何添加切换内容小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 切换内容的,或者滚动到主插件部分,拖动到你的页面上,它加载了两个示例切换选项,这样你就可以立即看到开关。

设置切换选项 #

在 内容 选项卡, 切换内容 部分持有 元素 repeater。每项都是一个切换选项。默认值为标签一和标签二,您添加更多与 添加项目、复制图标复制,或用X删除。

单击一个项目来打开其设置,其中有自己的内容和样式子选项卡。

• 标签: toggle按钮上的文字,像常见问题或我们的团队。它支持动态标签。
• 图标: 标签旁边显示的可选图标。
• 类型: 选择用于键入文本的内容或模板以拉入保存的布局。
• 内容: type is Content 时,会出现一个包含媒体、格式和代码视图的全文编辑器。

切换保存的模板而不是文本 #

套 类型 到 模板 还出现了两个控件: 模板类型 (如科)和 选择部分的, 您可以从库中选择任何保存的模板。这就是让单个切换选项显示整个预构建布局的原因。

Demo 中,一个选项指向已保存的常见问题部分,另一个指向团队部分。翻转切换和整个布局交换。

切换设置 #

的 切换设置 部分控制开关的行为。

• 活跃指数: page 加载时哪个选项首先显示,第一个选项设置为 1,第二个设置为 2,依此类推。
• 位置: 将标签图标放置在标签文本之前或之后。
• 指示器速度: 活动指示器在选项之间滑动的速度(以秒为单位)。

设置切换风格 #

的 风格 tab 分拆成 切换器, 指标、和 标签.Toggler 部分控制开关容器本身。

• 风格: 肘节的形状,例如圆形。
• 背景颜色和边框半径: 开关轨道的外观。
• 对齐、缩放和宽度: 在其列中定位并缩放开关。
• 边框、盒子阴影、填充物、边距: 通常的框架控制。

的 指标 部分将滑动突出显示样式设置在活动标签后面,并且 标签 部分设置标签文本的排版和颜色,处于活动状态和非活动状态。

页面上的结果 #

发布或预览,切换即可实时工作:访问者点击标签,下面的内容通过幻灯片进行交换。在此,切换从常见问题解答布局翻转到我们的团队模板,每个模板都保存了完整的部分。

常见用例 #

• 每月与年度定价 切换到 a 上方 定价表.
• 常见问题解答和团队 在服务页面上共享一个插槽的部分。
• 描述和规格 在产品页面上。
• 前后 案例研究布局。
• 两个保存的模板 交换时没有第二页或弹出窗口。

使用 Toggle Content 小部件的技巧 #

• 首先构建模板。 将要切换的部分保存在库中,然后将每个选项指向一个。
• 保持标签短。 一两个单词可以干净地配合开关并快速读取。
• 故意设置活动指数。 领先大多数访客希望首先看到的选项。
• 尽可能匹配内容高度。 在非常不同的高度之间切换会使页面跳跃。
• 使用图标以保持清晰。 每个标签旁边都有一个小图标,可以帮助人们区分选项。

常见问题 #

包裹起来 #

Toggle Content 小部件将两种布局装入一个插槽中,并让访问者轻按一下在它们之间翻转 添加您的选项,为每个选项选择文本或保存的模板,设置哪个引导,并设置交换机以匹配其他方式组织内容,请参阅 选项卡小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。