如何在 Elementor 中添加每月/每年的定价切换

主要外卖

• Elementor 定价切换由两部分组成:两组定价表,每月一组和每年一组,以及一个一次显示一组的交换机小部件。
• Elementor Pro 的价格表小部件没有月度和年度切换,因此切换来自内容切换小部件或来自放置在 Tabs 小部件内的定价表。
• 主插件切换内容小部件使用设置为模板的类型控制以及部分、页面或小部件的模板类型将保存的模板加载到每个选项中。
• Elementor 使用容器的站点上,将每组定价表保存为 Page 模板,因为 Toggle Content 中的部分列表仅显示使用部分类型保存的模板。
• Toggle Content 中的活动索引设置决定了访问者首先看到哪个计费周期,第一个选项为 1,第二个选项为 2。

Elementor 定价切换,请将您的月计划和年度计划构建为两个保存的模板,然后将两者加载到内容切换小部件中。访问者单击每月或每年,价格交换就位。页面保持一屏幕高,没有人必须一次阅读六个定价列。

本教程使用定价表和 切换内容 master Addons 的小部件,并且它以通过 Tabs 小部件的无附加组件路线结束。一切都在 Elementor 4.3 上进行了测试。

开始之前你需要什么

Elementor,一个定价表小部件和一个切换内容的小部件,元素器Pro有一个价格表小部件,但是元素器和元素器Pro都没有这个开关。

• 定价表。本指南使用 定价表小部件 master Addons。Elementor Pro 的价格表或带有标题的普通容器也可以。
• 的开关。这是切换内容,它是的一部分 硕士插件专业版.
• Your price。先决定年折, 休两个月, 约百分之十七, 是常用的选择。

Elementor 中如何添加定价切换

整个构建需要五个步骤:制定每月计划、保存它们、制定年度计划、保存这些计划,然后将两者连接到切换。

1步:建立每月计划

Elementor新建页面,或者打开空白草稿,编辑后,添加一个容器,三列,每列拖动一个定价表小部件,填写计划名称、价格、计费文本和功能列表。

Build one plan full,然后重复两次,并更改细节。那就让功能行保持排列。打开 突出显示表? 以及您希望人们选择的计划丝带。

2步:保存月度计划作为模板

击"发布按钮旁边的箭头,然后选择 另存为模板。命名它每月定价计划并保存它。

Saving this way创建了一个Page模板。那很重要,因为Toggle Content是按类型列出模板的。它的Section列表只显示用Section类型保存的模板。在使用容器的站点上,右键单击一个容器并保存它创建了一个容器模板,并且那个没有出现在Section列表中的。Page模板总是显示在Page下面。

第三步:建立并保存年度计划

Stay on the same draft。将每个价格更改为年费率,并将计费文本更改为年费。然后再次使用另存为模板,并命名此一项年度定价计划。

Ni现在有两个版面相同, 编号不同的模板, 可以把草稿页删掉。

4步:添加切换内容并连接模板

Elementor中打开您的真实定价页面。搜索小部件面板以获取 切换内容 将其拖动到计划应显示的位置,如果您还没有定价页面,请从其中之一开始 Elementor 定价页面模板.

1. 在 元素 list, 点击第一个项目并更改它 标签 到每月。
2. 套 类型 到 模板.
3. 套 模板类型 到 页码.
4. 在 选择页面,选择每月定价计划。
5. 单击第二项,按年标记并按相同方式选择年度定价计划。

更新页面并在前端打开。单击"年度",三个表格更改为年度价格。

5步:设置默认选项,并设置开关样式

打开 切换设置 在内容选项卡中。 活跃指数 选择显示页面加载时间的选项,每月 1 个,每年 2 个。 位置 将开关放在表格之前或之后,然后 指示器速度 设置高光滑动的速度,默认情况下为 0.3 秒。

然后转到"样式"选项卡。 切换器 部分具有开关形状(圆形或方形)、背景颜色、对齐方式、尺寸和宽度的缩放。其下方的指示器和标签部分设置正常状态和活动状态的高光颜色和标签颜色。

首先需要桌子吗? 的 Elementor 定价表小部件 page 展示了其五种布局、丝带、销售价格和功能工具提示。

视频教程

该视频显示了在 Elementor 编辑器中添加和设置的 Toggle Content 小部件。

无需插件即可进行定价切换

Elementor自己的,你就可以建立一个定价开关 选项卡小部件的, 因为每个选项卡接受其内部的任何小部件, 访问者看到两个选项卡标题, 其中一个插件显示滑动开关, 价格交换的方式相同。

1. 拖动 选项卡 widget到页面上,然后删除第三个选项卡。
2. 更名为"每月"和"每年"两个选项卡。
3. 击每月选项卡,并在其内容区域内构建您的定价列。
4. 将该容器复制到年度选项卡中并更改价格。
5. 在"样式"选项卡中,将选项卡标题居中并绕过其角落,以便它们读取为开关。

Treque-off 是维护,两组表都住在页面本身,所以编辑器变长,你不能像使用模板那样在另一个页面重复使用相同的集合。

使定价切换有效的五件事

定价切换只有在访问者一秒钟内理解它时才会有所帮助。这五个习惯涵盖了其中大部分。

1. 用语言说储蓄。将“每年计费,在价格下减两个月”。仅靠开关并不能告诉人们为什么每年更好。
2. Blayout 保持相同,两组相同方案,相同顺序,相同特征行,只有开关翻转时数字才应移动。
3. 故意选择默认值。将 Active Index 设置为您希望大多数人购买的计费周期。
4. 用电话查看。在标签样式部分, 堆叠 如果标签不适合一排,可以将标签堆叠在手机上。
5. Switch 不会保存一个选择,每次访问都从默认选项开始,因此将每个按钮指向结账链接,以供自己的计费周期使用。

有关表格本身的布局和复制建议,请参阅我们的 Elementor 定价表提示.如果你的计划因特征而异于因价格而异,a. 比较表 在切换下面帮助人们检查详细信息。

常见问题

最后的想法

Elementor定价切换需要保存两个模板和一个交换机,构建月度计划,将它们保存为Page模板,每年重复一次,然后将两者加载到Toggle Content中并设置Active Index。

的 切换内容小部件页面 在构建自己的计费开关演示之前,请单击该演示。

相关阅读

• Elementor 定价表提示
• 比较最佳 Elementor 插件
• 如何以 Elementor 创建切换按钮(3 种方式)