主要外卖
- Elementor 的这 10 个内容切换示例是使用主插件切换内容小部件构建的实时演示,每个示例都在同一部分的两个版本之间切换。
- 当两个选项共享一种布局并且仅细节发生变化(例如月度和年度价格或公制和英制测量)时,内容切换效果最佳。
- 定价是最常见的内容切换示例,十个演示中的两个是计费开关,一个标记为每月和年度,一个标记为每月计费和年度计费。
- 内容切换还适合非定价内容,包括规格表、季度结果、午餐和晚餐菜单以及为两个受众编写的消息。
- Toggle Content 小部件中的每个选项都保存来自编辑器的文本或保存的部分、页面或小部件模板,因此任何 Elementor 布局都可以位于交换机后面。
Elementor 效果最好的内容切换示例在交换机两侧显示同类内容,计划保持不变,价格变化,表格保持不变,单位变化,下面是十个遵循该规则的实时演示,每个切换的内容以及何时使用模式。
所有十个都是用建造的 切换内容、主插件pro中的内容切换小部件,点击任意演示链接,自己试试切换。
目录
什么是让内容切换良好的内容
当访问者需要两个版本之一并且永远不要同时使用两个版本时,内容切换值得使用。如果人们想一起阅读两面,请将它们并排放置。
| 图案 | 左选项 | 正确选项 | 下面的例子 |
|---|---|---|---|
| 计费期限 | 每月 | 年度 | 1、2 |
| 单位 | 公制 | 帝国 | 4锛屽湪娴欐睙鏉 |
| 数据范围 | 自己的运营 | 供应链 | 5锛屽湪娴欐睙鏉 |
| 观众 | 作为一个团队 | 自己 | 7 |
| 时间段 | Q3 | Q4 | 6 X 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 |
| 过程 | 按订单制作 | 有货 | 8 |
| 类别 | 住宅 | 公民 | 9 |
| 一天中的时间 | 午餐 | 晚餐 | 10 |
| 计划范围 | 单身 | 无限 | 3 |
定价切换示例
定价是大多数人第一次遇到内容切换的地方。两个计费周期共享相同的计划,因此开关可以将页面上的卡片数量减半。
1。计费开关定价卡
月度和年度开关位于入门卡、团队卡和比例卡上方。在年度卡上,每张卡都显示较低的月率以及与年度总计和节省的一行。中间计划两侧都带有"最受选择"标签。
用它来: SaaS 和订阅定价。 打开计费开关演示.
2。以定价切换内容
Personal 和 Startup 计划上面的标签是使用按月计费和按年计费,每个选项都持有全套的计价表,所以整行一键变动。
3、四舍五入地切换内容
Single plan 和 Unlimited plan 之间移动一个圆形的交换机,每个交换机都有自己的标题和描述,两侧因范围而异,因此交换机不绑定到计费周期。
用它来: 范围不同的计划,例如单一计划和无限计划。 打开圆形演示.
表格和数据切换示例
Tables是第二个自然拟合,行和列保持原位,数字发生变化,因此游客在翻转开关时保持自己的位置。
4。单元开关规格表
Metric和Imperial之间切换的自行车几何表。Reach,堆栈和其他测量值列出了三种框架尺寸,并有一个公差列。不同国家的买家各自获得可以读取的数字。
用它来: 产品规格、尺寸表和配方。 打开 Unit Switch 演示.
5。数据交换机基准表
Own operations 和 Supply chain 之间切换的排放报告,每一方都列出了来源、它们在基线中的份额以及吨位,两个会填满屏幕的表格现在各共享一个。
用它来: 报告、基准以及前后数据。 打开数据交换机演示。如果数据从未通过点击而改变,则为普通 表小部件 更简单。
6。四分之一开关指标便当
Q3和Q4之间切换一个结果的便当网格,收入、增长和每个图形下的注释都一起变化,读起来像一个仪表板,占用一个的空间。
用它来: 投资者更新、年度报告和月度统计数据。 打开 Quarter Switch 演示.
想要将十个全部集中在一个地方吗? 的 切换内容小部件页面 有一个可以加载每个演示的查看器,以及小部件的完整设置。
观众和类别切换示例
最后一组切换消息。每一面都是为不同的读者编写的,或者涵盖不同的类别。
7。受众交换机功能面板
As a team 和 On your 自己的课程页面切换,每一面都有自己的标题、证明点和功能列表,访问者选择描述它们的版本,其余的则跳过。
用它来: 产品出售给公司和个人。 打开 Audience Switch 演示.
8、订购路线步进时间线
Made to order 和 In stock 之间切换一个编号的步骤列表,每条路线的步骤和等待不同,布局保持不变,它回答了“我订购后会发生什么”两种买家。
用它来: 运输、登机和任何具有两条路径的过程。 打开订单路线演示.对于单个日期序列, 时间轴小部件 是更适合。
9、项目交换机叠加卡
建筑工作室在住宅和市政之间切换一张大型项目卡,每一面都有自己的照片、位置、年份和简报。两个案例研究适合通常去的地方。
用它来: 具有两条工作线的投资组合。 打开项目切换演示.
10。服务交换机菜单列表
A餐厅菜单在午餐和晚餐之间切换,上菜时间坐在开关下,菜肴和价格随之变化,客人看到他们正在计划的餐点的菜单。
用它来: 餐厅、沙龙和任何有两个服务列表的企业。 打开服务交换机演示.
如何构建这些示例之一
每个示例都是一个包含两个项目的 Toggle Content 小部件。构建您部分的第一个版本,复制它,更改详细信息并在每个项目中放入一个版本。
- 拖动 切换内容 进入页面并命名中的两个项目 元素 列表。
- 对于简短的内容,请离开 类型 于内容,并在编辑器中写作。
- 对于完整的布局,请设置 类型 到模板,并为每个项目选择一个保存的模板。
- 套 活跃指数 在切换设置中选择首先显示的选项。
- "样式"选项卡的切换器、指示器和标签部分中的样式开关。
定价版本有一些额外的步骤,我们将其涵盖在内 elementor 中如何添加每月和每年的定价切换。设置的完整列表位于 切换内容文档.
常见问题
Elementor 中的内容切换是什么?
件(content toggle)是一个带有开关和两个或更多标签的小部件,单击标签显示该选项的内容并隐藏其他元素,元素器不包括一个,因此它来自一个附加组件,例如Master Addons Pro,其中小部件称为Toggle Content。
我可以在内容切换中放入什么内容?
Toggle Content 中,每个选项要么保存来自内置编辑器的文本,要么保存的 Elementor 模板。因为模板可以包含任何小部件,所以该选项可以是定价表、数据表、表单、图像库或整个部分。
内容切换可以有三个选项吗?
是。在元素列表中单击添加项目以添加第三个或第四个选项。一个开关读取最好,有两个或三个标签。对于更多,选项卡通常更容易让访问者扫描。
这些内容切换演示是否可以作为模板使用?
Toggle 内容小部件页面上的模板查看器中显示演示, 您可以在其中打开每个演示。它们是使用 Toggle 内容小部件构建的, 该小部件是 Master Addons Pro 的一部分。
最后的想法
上面十个内容切换示例涵盖了三个作业:切换价格、切换一组数字和切换消息。在每个作业中,布局保持不变,只有细节移动,因此切换很容易遵循。
尝试一下 切换内容小部件页面然后使用您已有的部分的两个版本构建您自己的版本。
相关阅读
