主要外卖
- Elementor 中的定价表是一排计划卡,每张卡都有一个价格、一个简短的功能列表和一个按钮;它的构建是为了点击一个计划。
- Elementor 比较表是一个网格,每个功能一行,每个计划或产品一列;它的构建是为了在点击之前回答 “哪个计划有 X”。
- 主插件定价表小部件为每个小部件制作一张卡片,有五种布局、一条丝带、一个销售价格和功能工具提示;比较表小部件(Master Addons Pro)将整个矩阵放在一个小部件中,最多有六列。
- 大多数定价页面都需要两者:决策顶部的卡片、下面的详细信息比较表,通过 “比较每个特征”锚点链接。
- 定价卡应包含三到七个特征行;任何较长的内容都属于比较表,工具提示可以在不加长的情况下解释行。
- "比较表"小部件切换到您设置的断点下方的堆叠布局, 这使得手机上的六列矩阵可读。
Elementor 比较表和 Elementor 定价表看起来相关,做不同的工作,定价表是一排卡片,要求访问者选择一个计划,比较表是一个网格,让访问者在选择之前检查每个计划中的一个特征,将错误的放在阅读器面前,他们要么无法决定,要么找不到细节。
本帖展示了每个示例中的一个示例,在相同的三个计划上使用主插件构建,并列出了每个示例何时足够、何时需要两者以及它们如何在一个页面上组合在一起。定价表小部件位于主插件中;比较表小部件位于 硕士插件专业版.
目录
一句话的区别
1张定价表,把计划显示为卡片,要求做出决定;1张对照表,把特征显示为行,详细地支持决定,定价表从上往下读一张卡片里面,对照表从左往右读过一行,那个读取方向就是全部的差别,它决定了每张可以持有什么。
定价表的作用
A 定价表将每个计划放入自己的卡片中:姓名、为谁服务、价格和期限、一个简短的功能列表和一个按钮。一张卡片用丝带抬起,因此读卡器默认读卡器通过扫过该行来比较卡片,这只在每张卡片保持短时间内起作用。
限(limit)是特征列表,每张卡五行几秒钟读取,每张卡十五行表示读卡器在行内滚动,失去比较,如果发现自己在卡底写“而且多得多”,卡已经达到极限,其余的都属于比较表。
比较表的作用
1个对照表列出每一项特征,向下列出第1列,并在该行上标出每项计划的值:数字、单词或tick和cross。头行携带计划名称和价格,底部的一个按钮行链接每列结帐。读者找到他们关心的一项特征并读过。
因为每个功能都是一行,所以表可以容纳二十或三十个功能,而不会变宽。它变长,滚动得很好。功能名称上的工具提示会使行保持短,同时解释该功能的含义,这就是为什么 SaaS 定价页面上的计划比较表在标签旁边带有小信息图标。
定价表与对照表并排
| 因素 | 定价表 | 比较表 |
|---|---|---|
| 形状 | 每个计划连续一张卡 | 每个功能一行,每个计划一列 |
| 阅读方向 | 落一张牌 | 一排对面 |
| 它可以保持的功能 | 每张卡三到七张 | 几十 |
| 工作 | 单击一个计划 | 答“X 计划有特征 Y” |
| 突出显示的计划 | 凸起卡片、丝带、实心纽扣 | 突出显示的列 |
| 价格 | 大,每张卡上 | 在头行中 |
| 放在页面上 | 上,标题下 | 卡片下方或自己的页面上 |
| 主插件小部件 | 定价表,每张卡一个小部件 | 比较表 (Pro),矩阵的一个小部件 |
| 移动 | 卡片堆叠在一列中 | 您设置的断点下方的堆栈 |
当定价表足够时
当计划相差一小部分限制并且读者可以决定价格时,仅定价表就足够了。带有“1站点、5站点、无限站点”和五行的三个计划各不需要矩阵。登陆页面上的单个计划是一张卡。两层的会员站点是两张卡。如果每个功能都适合卡片而不包装,并且没有人询问“启动计划是否包含 X” 支持,请停在那里。
的 定价表设计技巧 cover 如何保持卡片短:每行三到六个字,每张卡片上相同的行按相同的顺序,以及两行得到问题的工具提示 对于现成的卡片,定价表模板贴有五个布局和七个部分及其设置。
当您需要对照表时
划(plan)在许多特性上有所不同时,当特性需要解释时,或者当读者正在将你的产品与其他人的产品进行比较时,你需要一个对照表。该表还带有卡片处理不当的勾号和交叉答案:带有灰色划线特征的卡片看起来像是你不能拥有的东西的列表,而一排勾号和交叉看起来像信息。
比较表还可以单独进行根本不涉及计划的产品比较,例如一个产品的三个型号或您的插件与两个竞争对手的比较表小部件为此每列获取一个图像,并带有标题、价格和按钮。
如何在一页上使用两者
大多数 SaaS 定价页面都运行。卡片位于标题和标题下方的顶部 计费开关;比较表位于页面下方,标题下如“比较每个特征”, 并在卡片下方有一个锚链接。这些卡片为已经知道自己想要什么的读者进行销售。该表捕获了因缺少一行而滚过卡片的读者。
2者保持计划名称、订单和价格相同,如果卡片从左到右写着Starter、Growth、Agency,表列则写着相同,在2者中突出显示相同的计划:上面一张凸起的卡片,下面一个有色列,并给表自己的按钮行,这样在表中决定的读者就不会向上滚动点击。
在 Elementor 中构建每个
定价表
添加一个容器,给它三个儿童容器,然后掉落一个 定价表小部件 into each。droduction 从下拉中的五个设置布局, 然后在内容选项卡中设置计划名称、字幕、价格、周期和功能。打开高亮表和中间卡的色带。设置父容器的对齐项目以拉伸, 这样卡片匹配高度。
的对照表
放一个 比较表小部件 ope。4 中挑选一个皮肤,设置商品数量(最多六个),并将特征名称添加到特征列表中。然后打开每个商品列:标题、价格、按钮文本和链接,每个特征一个条目,其中类型为 Yes、No、图标或文本。样式选项卡有一个响应断点设置,可决定表格在小屏幕上的堆叠位置。
Elementor面板中编辑两个小部件,因此计划名称和价格是搜索引擎读取的文本,您无需触摸图像即可更改。
想要从一个插件中获取两者吗? 的 定价表小部件 构建卡片,并且 比较表小部件 在 Master Addons Pro 中构建它们下方的矩阵。
常见问题
Elementor 有比较表小部件吗?
No。Elementor和Elementor Pro没有对照表小部件,Pro中的目录、价格表和价格表小部件做其他工作,一个特征矩阵来自一个插件;主插件对照表小部件在主插件Pro中。
定价表可以显示特征比较吗?
Zhi一个短的。每张卡片都拥有自己的特征列表,因此跨计划De比较意味着并排读取三个列表。最多能工作的七行左右。过去了,把完整的Ling表放在比较表中,把卡片保留到不同的行。
定价表和定价比较表有什么区别?
1个定价表是一排各1个价格的计划卡,定价对照表是以计划为列的特征矩阵,通常在标头中标价,第一个卖计划;第二个让读者在选择之前先检查特征。
比较表可以有多少列?
Master Addons 比较表小部件最多需要六个产品列加上功能列,在手机上它会堆叠在您在小部件中设置的断点下方,因此每个计划都成为自己的块。
比较表应该在定价页面还是自己的页面上?
在定价页面上,卡片下方,对于大多数站点来说。一个单独的页面将决策与细节分开,并在两者之间失去读者。只有当矩阵运行到数十行时,才会将其移动到自己的页面。
最后的想法
3到7行和1个突出显示计划的卡片获得点击。每个功能一行的矩阵回答停止点击的问题。在大多数定价页面上,卡片位于顶部,矩阵位于下方,两者具有相同的计划名称、顺序和突出显示。
用 构建卡片 定价表小部件 以及矩阵与 比较表小部件并将它们与一个锚链接起来。
相关阅读
