主要外卖
- 主插件定价表小部件以布局下拉的形式提供五个 Elementor 定价表模板:默认、左对齐内容、圆形表、带有 BG 图像和倾斜 BG 模式的表。
- 切换布局下拉将计划名称、价格、功能和按钮保持在适当的位置,因此可以在一分钟内预览所有五种设计中的一组内容。
- Master Addons 模板库具有现成的定价部分,包括深色、两平面、四平面和计费开关设计,可从编辑器导入到任何 Elementor 页面。
- 此页面上的每个定价表示例都遵循相同的顺序:计划名称、名称、价格和期限、三到七个功能行、一个按钮和一个可选的信任行。
- 深色定价表读起来最好,仅在突出显示的计划上有一个明亮的重点;下面的示例使用绿色、青色或粉色来表示该单张卡。
- 定价部分的每月和每年切换需要两套卡片和 Master Addons Pro 的 Toggle Content 小部件。
Elementor定价表模板为您节省了工作中耗时最长的部分:设计决策,下面的小部件布局一键为您提供卡片形状,现成的部分为您提供一个完整的定价块,标题,开关和卡片已经排列,无论哪种方式您替换计划名称,价格和功能并保留设计。
此页面收集了十二个构建的定价表示例 主插件 elementor。前五个是小部件自己的布局,使用了确切的设置,因此您可以重现每个。接下来的七个是模板库的部分,选择覆盖常见的定价页面形状:三个计划,两个计划,四个计划,暗,亮,和一个计费开关。
目录
如何使用这些模板
本页有两种模板,示例 1 至 5 是小部件布局:drop the 定价表小部件 into a container,从下拉中挑选布局,复制每个示例下列出的设置,示例 6 到 12 是完整部分:打开 模板库、导入该部分,并就地编辑文本。
每个布局列出的设置是改变外观的设置。其他一切都处于默认状态。颜色以十六进制值给出,以便您可以将它们粘贴到"样式"选项卡中,并且所有五张布局卡都使用相同的内容:一个具有三个功能的 29 美元计划和一个 “开始”按钮。
五种定价表小部件布局
1、默认值
Default布局开头的,头部居中,价格坐落在名字下,功能和按钮跟随在体内,适用于任何计划计数,是三列行最安全的选择。
- 布局: 默认
- 标头配色方案:自定义,从 #6938EF 到 #B497FF 的 135 度梯度
- 标题和价格颜色:#FFFFFF;副标题和句号:#E4DBFF
- 功能图标:检查,#6938EF;功能文本:#1A1033
- 按钮:背景 #F1EEFF,文本 #6938EF,半径 6 px
- 附加信息:“随时取消”, #6B7280
2。左对齐内容
Left Align Content 将名称、价格和功能移至左边缘,当计划名称较长或卡片位于一段文字旁边时读取速度更快,并且匹配编辑风格的定价页面,其他所有内容都保持对齐。
- 布局: 左对齐内容
- 所有颜色均如默认值
- 按钮对齐方式:左,页脚上有 24 px 左衬垫
3、圆桌
Rounded Table 将价格放在头部一个大圆圈内,这使得数字成为任何人首先看到的东西,它需要一个更高的头部,所以在每张卡片上给它相同的特征计数或者行看起来不均匀,特征行上的黄色下划线是布局的一部分。
- 布局: 圆桌会议
- Default 中的标头梯度;在 135 度处从 #F50A7F 到 #FF6FB1 的圆梯度,或者将其保留在默认色调上
- 功能文本:#1A1033,下划线颜色#FFD600(默认布局)
4。附BG图的表格
BG Image的表格用图像、渐变、视频或幻灯片填充整个卡片, 顶部漂浮着标题和功能, 它适合一个特色计划或视觉产品的定价页面。功能面板需要深色半透明背景, 因此文本在任何照片上都保持可读性。
- 布局: 带有 BG 图像的表格
- 背景:图像、位置中心、尺寸封面
- 特点背景:rgba(20、10、45、0.6);功能文本:#FFFFFF
- 标头梯度如默认值,不透明度为 70%,因此照片显示为透视图
5、偏斜BG模式
Skew BG Pattern 以角度切头,加上两条白色条纹,使卡片移动无影像,使用一种重音色;渐变与条纹战斗,是落地页上最常为单张卡片挑选的布局。
- 布局: 倾斜 BG 图案
- 标头配色方案:定制,实心#6938EF
- 卡半径:20 px;卡背景#FFFFFF
- 功能下划线打开,按钮如默认值所示
6、三张方案加亮点中间牌
SaaS标价行:三列容器中的三个Pricing Table小部件,中间一个凸起,凸起的卡片使用Highlight Table,丝带读数“最受欢迎”, 纯粉色按钮代替轮廓,以及以$69为原价,$49为当前价的Sale开关,外卡片使用较浅的车身颜色,因此中间一个向前站立。
- 容器:三个儿童容器,宽度为 31.5%,间隙为 28 px,对齐物品:拉伸
- 中卡:亮点表;丝带 “最受欢迎”, 垂直 18, 水平 -10;按钮背景#F50A7F,文本#FFFFFF
- 外卡:机身背景#F6F5FA;中间卡:#FFFFFF,带有 0 24px 60px rgba(105、56、239、0.28)阴影
7、暗四方案定价表
4个黑色背景的计划,在突出显示计划的边框和标签上带有单一的石灰口音,跨卡的功能相同,这是一个刻意的选择:计划的区别只是价格,阅读器是打算按预算选择按钮使用创意按钮小部件,因此悬停效果来自于那个小部件而不是自定义CSS。
当计划因限制而不是功能而异时使用此模板。第一张卡上的粗体特征文本和其他卡上的常规文本是唯一的视觉层次结构,因此请保持这种状态。
8。带有自定义计划的黑暗SaaS定价
Finix模板套件中,本节展示了如何处理没有固定价格的计划,第三张卡打印了“自定义”数字将在哪里,并将按钮文本交换为“与我们对话”。每个价格下的一行描述解释了该计划的用途,行下的一条脚注用一句话涵盖了计费和年度折扣。
Card 后面的微弱同心圆是一个截面背景图,不是小部件的一部分,替换图或移除,卡片保持原样。
9、两方案轻定价表
2个方案是肯定的还是否定的,所以这种布局使得付费卡不可能错过:整张卡都充满了重音色,按钮反转为深色。在基本卡标记特征上检查灰色图标,这些特征不包含在内,这使得两张卡都保持相同的四行。
Free tier,一个付费 tier的时候用这个,三个以上方案全彩卡就太大声了。
10、带计费开关的定价卡
该部分已经构建了月度和年度切换。开关是 Master Addons Pro 的 Toggle Content 小部件,每个状态加载保存的定价行。卡片在价格下打印 “billed monthly” 或 “billed nearly”,以便读者知道哪个状态显示。导入它,打开模板 > 已保存的模板,并编辑那里的两个定价行。要从头开始构建相同的内容,包括 Section-type 模板捕获,请按照 每月和每年的切换指南.
11、四方案对比 特征勾
当计划因特征而不是限制而异时,勾选和交叉会让读者扫描一列。经过大约七行,a 比较表 比卡片做这项工作更好。所有四张卡片都以相同的顺序携带相同的七行,并且图标会根据计划而变化。突出显示的计划充满了重音颜色,带有白色按钮,并且位于第三位而不是第二位,因为页面期望大多数读者选择更高的层。
12。暗定价,每月和每年切换
1个带有浅色卡片的深色部分是例7的反面,它使卡片成为页面上最亮的东西,拨动位于标题和卡片之间,每个计划名称下的每用户注释设置期望,并且每个按钮下的“不需要信用卡”去除了最后一个反对角落的装饰形状是部分背景元素。
如何导入定价部分
- Elementor中打开页面,点击编辑器中的主插件模板图标,或者打开模板>主插件模板。
- 索“定价”, 预览该部分并单击导入。使用 Pro 小部件构建的部分需要 Master Addons Pro active。
- Contect 落地你的光标所在。编辑面板中每张卡片的文字;设计保留。
- 对于带有切换的部分,请在模板 > 已保存模板下编辑两个定价行。
的 模板导入指南 盖编辑器按钮,导入页面屏幕以及导入副本会发生什么。
想要所有五种布局而不导入任何东西吗? 的 定价表小部件 将它们放在一个下拉中,然后 模板库 具有上面所示的完整部分。
常见问题
Elementor 有定价表模板吗?
Elementor的模板库有Pro用户的定价块,其价格表小部件也是Pro 在免费的Elementor上,定价模板来自一个插件:主插件定价表小部件有五个布局,其模板库有完整的定价部分。
定价表模板应该有多少种计划?
3个是最安全的数字,当一个计划是自定义或企业层级时,有四个有效,上面的例子显示了两个,三个和四个计划;过去的四个,并排卡停止在笔记本电脑屏幕上安装。
建桌子后可以更改布局吗?
是。主插件定价表小部件中的布局下拉在五种设计之间切换,并保持计划名称、价格、功能和按钮就位。只有属于布局的样式设置(例如圆圈或偏斜)发生变化。
如何在 Elementor 中制作黑暗的定价表?
将截面背景设置为黑色或深海军蓝,给每张卡片一个深灰色的主体,带有一个像素较浅的边框,并使用一种重音颜色来表示突出显示的卡片的边框、标签和按钮。上面的示例 7、8、10 和 12 显示了此的四种版本。
定价表示例是否响应?
Yes。card 在手机上一列堆叠,将高亮计划放在容器顺序中第一或第二,用于移动,将功能列表保留到大约五行,并在 Elementor 的响应模式下检查移动断点的表格后再发布。
最后的想法
十二个模板有两条路线,五个小部件布局覆盖卡片形状,每个下拉更改一次。七个库部分覆盖页面形状:三个带有突出显示中间的计划、深色四平面图、带有自定义层级的 SaaS、两个平面图灯、计费开关、四个平面图勾号和叉号以及深色带有浅色卡。每个都保留有效的顺序:姓名、用途、价格、简短的功能列表、一个按钮。
从最接近您计划的布局或部分开始 定价表小部件页面、更改文本,并在上线前通过电话查看。
相关阅读
