主要外卖
- Elementor 定价表切换需要两组卡,一组具有月度价格,一组具有年度价格,以及一次显示一组的控制。
- 免费的 Elementor 插件可以使用嵌套选项卡小部件来完成此操作:每个计费周期一个选项卡,每个选项卡内有一排定价卡,没有附加组件。
- Master Addons Pro 中的 Toggle Content 小部件为开关提供了人们期望的外观,即带有每月和每年标签的药丸,并从保存的部分模板加载每组。
- Master Addons 定价表小部件每张卡可容纳一个价格,并且没有自己的计费交换机,因此此页面上的每条路线都会将其与第二个小部件配对。
- Elementor容器保存的模板存储为容器类型,而切换内容部分列表仅显示部分类型模板,因此将定价行保存为一个部分。
- 使用 “按年计费”纸币显示每月年度价格,以便两个拨动状态进行类似比较。
Elementor定价表切换是计划之上的一个开关,可以在月价和年价之间翻转每张卡。Elementor没有小部件可以自己完成此操作,并且大多数附加定价表每张卡都包含单个价格,因此切换总是由两个部分构建:两组卡和一次显示一组的东西。
本指南在相同的三个计划上构建切换三种方式。路线 1 使用免费的 Elementor Nested Tabs 小部件。路线 2 使用来自的 Toggle Content 小部件 主插件 2个保存的分段模板,这是看起来像一个真正的计费开关的版本,3号公路涵盖了装有内置开关的小部件,以及为了方便而放弃的东西。
目录
定价切换如何在 Elementor 中工作
定价切换是两个完整的定价行和一个隐藏其中一个的控制,当访问者单击 Yearly 时,月度行被隐藏并显示年度行。没有什么可以重新计算。这就是为什么月卡和年卡可以用任何定价小部件构建,包括具有单个价格字段的卡。
控(control)是路线之间变化的部分,嵌套标签(Nested Tabs)给你标签按钮,切换内容给你一个带滑动指示器的药丸开关,内置开关的小部件给你自己的控制,自己的卡片设计,下面的卡片在前两条路线中保持不变,所以先挑卡片,后挑控制。
每条路线都有一条规则:将年价格显示为每月数字,并注明每年计费。 “39 美元/月,在“49 美元/月”旁边按年计费,让读者无需算术即可看到节省的费用。即使价格更便宜,每月价格旁边的年度总价看起来也更贵。
第一步:构建月卡和年卡
先构建月度行,然后复制并更改价格。在 Elementor 中,添加一个并排包含三个儿童容器的容器并丢弃一个 定价表小部件 into each。Content选项卡中设置计划名称、副标题、价格和周期。给中间卡突出显示表和一条色带,这样该行就有一个默认计划。
Now 右键父容器选择Duplicate,在副本中打开每张卡片并更改价格,对于年计费,打开Sale开关,输入月价为原价,年月价为价格,并将周期设置为“/月,按年$计费,划掉的月数字进行卖出。
您现在页面上有两行。路线 1 和路线 2 决定如何一次显示一行。
路线 1:嵌套选项卡(免费元素器)
Free Elementor 插件中的嵌套选项卡小部件在每个选项卡内都放置了一个容器,因此整个定价行适合选项卡面板。它需要 Flexbox 容器功能,该功能在当前 Elementor 安装中默认打开。
- 拖动 选项卡 件(嵌套的,带有容器图标)到上面应该坐标的页面上。
- 在"内容"选项卡中,将选项卡 #1 重命名为 每月 选项卡#2 至 每年。删除第三个选项卡。
- 将每月定价容器拖入每月选项卡面板,将年度容器拖入年度面板。如果跌落目标难以命中,请使用 Navigator(图层面板)。
- 在"样式"选项卡中,将选项卡标题对齐设置为中心,并为活动选项卡提供重音颜色。
Result works,而且不花钱,不像是计费开关,Tabs读作导航,所以有些访客会错过年价的存在,可以将两个tab标题风格化成边框半径和背景颜色的药丸形状,接近手机,Nested Tabs在你设置的断点下方变成手风琴,所以检查Monthly面板默认打开的是。
路线 2:用两个部分模板切换内容
Toggle Content 小部件显示的是药丸开关后面的几块内容中的一块,每块都可以是保存的 Elementor 模板,保存的两行定价加上这个小部件是一个月度和每年的切换,看起来就像 SaaS 定价页面上的切换内容的一部分 硕士插件专业版.
将每行保存为部分模板
- 单击每月定价容器的手柄右键并选择 另存为模板.
- 称之为“定价月”并保存。对年度容器执行与“定价年”相同的操作。
- 打开 模板 > 已保存的模板 在 WordPress 管理员中,检查"类型"列。
Elementor 将容器保存为 集装箱 type,而切换内容小部件的章节列表仅显示该的模板 科段 type,这就是步骤3检查列的原因,如果你的两个模板说container,“选择部分”下拉将显示什么都没有,修复的是在保存之前在遗留部分(元素器>设置>功能,或从导航器添加一个部分)内构建行,或者选择 页码 widget 中的模板类型,并将行另存为页面模板,两条路由都工作;第 1 节保留了 widget 的默认值。
添加切换内容小部件
- 拖动 切换内容 master Addons 组到定价所属的页面中,删除两个原始定价容器,因为模板现在保存了它们。
- 在 元素 repeater,打开第一个项目。将标签设置为 每月,类型到 模板,模板类型到 科段并在"选择"部分下选择"“每月定价”。
- 打开第二项,将标签设置为 每年 并选择“每年定价”。
- 下 切换设置将活动指数保留为 1,因此每月首先显示,并将活动颜色设置为您的口音。
预览页面并单击"年度"。每月行滑出,年度行滑入,药丸指示器移动。样式选项卡控制药丸大小、标签颜色以及开关和内容之间的空间。
Widget 不会对保存的模板自己的样式表进行排队,因此如果卡片在前端看起来未样式化,请在 widget 控件中而不是在模板的页面设置中设置其颜色,或者清除 Elementor 缓存从 Elementor > Tools 稍后编辑计划,请在 Templates > Saved Templates 下编辑保存的模板,而不是页面;该页面仅引用它。
3路:内置交换机的定价小部件
一些插件会附带一个定价小部件,其中已经有一个计费开关,因此您可以输入每张卡的月价格和年价格,并且该小部件会绘制切换。 HT Mega 有一个 Flip Switcher 定价表小部件,其工作方式是这样的。其他大多数插件,包括 Essential Addons、Premium Addons、PowerPack 和 The Plus Addons,请执行 Route 2 的操作:一个单独的切换或切换小部件(每个插件中的 Pro)包裹两组卡。定价表小部件比较列表列出了每个切换小部件所在的计划。
Master Addons 定价表小部件每张卡有一个价格字段,没有内置开关,这就是为什么本指南将其与 Toggle Content 配对。与内置开关的权衡是设计:您仅限于该小部件的卡布局及其开关样式。通过两组卡,定价表小部件中的每个控件都保持可用,包括五个布局、色带和功能工具提示,并且您无需重建卡即可更改开关。
如果您想要将开关放在一个小部件内,请在提交之前检查三件事:小部件的年价格是否可以显示击穿的月度数字、开关标签文本是否可编辑以及卡片如何堆叠在手机上。
现成的拨动定价部分
的 主插件模板库 have 定价部分与切换已经有线 “计费开关定价卡”使用 Toggle 内容与两个定价行, “计费开关定价 Tabs”与选项卡一样, 包括一个三年期选项, 从模板 > 主插件模板导入一个编辑器, 然后交换计划名称, 价格和功能 ”定价表模板帖子有更多这样的部分, 每个部分后面的设置。
这两个部分均使用 Master Addons Pro 小部件构建,因此需要激活 Pro 插件才能导入。
选择哪条路线
| 如果你 | 用 | 为什么 |
|---|---|---|
| 运行免费的 Elementor 并希望今天完成它 | 1 号公路,嵌套选项卡 | 没有插件,定价卡可以是任何小部件。 |
| 想要一个看起来像计费切换的开关 | 2号公路, 切换内容 | Pill开关, 滑动指示器, 模板,你可以在其他页面重复使用。 |
| 有三个或更多计费周期 | 2號公路或1號公路 | 两者都需要任意数量的项目;内置开关通常需要两个。 |
| 想要页面上最少的小部件 | 3路,内置开关 | 每张卡一个小部件,但代价是布局选择。 |
想要不建造两次的开关吗? 的 切换内容小部件 显示每月和每年药丸后面任何保存的模板,因此 定价表 卡片保留所有五种布局、丝带和工具提示。
常见问题
Elementor 有定价切换小部件吗?
No。Elementor Pro 的价格表小部件每卡持有一个价格,没有计费开关,免费插件的嵌套选项卡小部件可以显示两个定价行作为月度和年度选项卡,这是最接近的内置选项。
主插件定价表可以单独在月度和年度之间切换吗?
号每张定价表卡一价一原价销售一时段,构建月行和年行,各保存为一个版块模板,通过Master Addons Pro的Toggle Content小部件显示。
为什么我的保存模板从 Toggle Content 下拉中丢失?
Elementor将一个容器保存为容器模板类型,下拉仅列出Section类型模板。将行从遗留部分保存,或将模板类型设置为小部件中的Page,并将行保存为页面模板。
年价格是显示总额还是每月金额?
用“按年”纸币显示每月金额,并使用 Sale 开关删除每月价格。然后读者将赞与赞进行比较,看到卡上的储蓄,而不是计算它。
定价切换会损害 SEO 吗?
No。两行都在页面HTML中,隐藏行用CSS隐藏,所以搜索引擎读取每个价格。保留计划名称和价格作为文本而不是图像。
最后的想法
Elementor定价表上的每月和每年的切换是两个定价行和一个控件。嵌套选项卡免费为您提供控件并读作选项卡。切换内容,在Master Addons Pro中,为您提供药丸开关,并从保存的节模板加载每行,其中一个捕获模板必须是节类型。内置开关的小部件可节省一步,并且使您的布局选择成本。
从卡片开始 定价表小部件页面的,它有一个完全这样构建的实时切换,然后添加适合您计划的开关。
相关阅读
