Wordpress插件与设计 - Elementor 专业教程 11 - Price List小工具的设置和使用方法 - 特色图片

Elementor 专业教程 11 - Price List小工具的设置和使用方法

Elementor Price List小工具可以帮助您在页面中创建价格列表或价格表格。

该工具能轻松地创建多个套餐方案并显示其不同价格,使得用户可以比较价格并选择合适的套餐。您还可以根据设计需求自定义不同的价格、名称、描述、功能、按钮等,从而制作出易于理解和使用的价格列表,提高网站的专业水平和用户体验。

本教程将说明Price List小工具的功能设置和使用方法。

Elementor Price List小工具

首先,将Price List小工具拖放到编辑栏内,如下图所示。

拖放小工具到编辑栏后,您将看到以下画面。

1. Price List小工具的内容标签

Price List小工具只有List设置项,预设有3个项目。

关于List的排列顺序与项目的排列顺序相同。要调整编辑栏内列表的顺序,只需调整内容标签内的项目顺序即可。

接下来我们来详细介绍每个项目内的设置选项。点击第一个项目打开设置窗口,如下图所示。

每个项目都包含以下设置选项。

  1. Price
  2. Title
  3. Description
  4. Image
  5. Link
1-1 Price

Price是设置项目方案价格的选项。可以自由地变更价格单位和数值。默认价格为20美元。

1-2 Title

Title是设置项目方案标题的选项。可以输入任意标题内容,例如水果名称、汽车名称、服务套餐名称等。

1-3 Description

Description是为项目方案添加描述或详细信息的设置选项,如产品说明、套餐说明、服务说明等。

1-4 Image

Image是为项目方案添加图像的设置选项。可以自定义在媒体库或者上传图像进行设置。

如果需要改变图像大小,可以在样式标签中进行自定义设置。

1-5 Link

Link是为项目方案添加链接的设置选项。可以设置任意自定义链接。

1-6 添加新项目

如果需要添加新项目,只需点击下方的《+新增项目》按钮,即可添加一个新项目。

2. Price List小工具的样式标签。

Price List的样式标签包括以下3个设置项:

  1. List
  2. Image
  3. Item

2-1 List

List是用于自定义项目列表外观样式的设置选项,主要包括以下设置选项:

●Title
  1. Color:选择并替换标题颜色。
  2. 排版:自定义标题文本样式
  3. Text Stroke:为标题文本添加轮廓线。
●Price
  • Color:选择并替换价格颜色。
  • 排版:自定义价格文本样式。
●Description
  • Color:选择并替换说明文颜色。
  • 排版:自定义说明文样式。
●Separator
  • Style:选择分隔线的类型。
  • Weight:指定分割线的宽度。
  • Color:选择并替换分割线的颜色。
  • Spacing:指定分割线与标题,价格之间的间距。

关于颜色和排版的详细设置,请参考《Elementor基础教程 – 文本编辑器 小工具的设置和使用方法

2-2 Image

Image是用于自定义外观样式以及指定项目内容之间间距的设置项,主要包括以下设置选项:

  • 图像尺寸:选择图像加载显示尺寸。可自定义选择。
  • BorderRadius:指定图像四角弧度设置。
  • Spacing:指定图像与标题,描述之间的间距设置。可设置0到50之间的数值,默认数值为20。

关于图像的详细设置,请参考《Elementor 基础教程 – 图像小工具的设置和使用方法》。

2-3 Item

Item是用于指定项目之间垂直间距以及标题,描述在项目内的垂直对齐设置选项,主要包括以下设置选项:

  • Rows Gap:指定项目之间垂直间距的设置。可设置0到50的数值,数值越大间距也会越大。
  • Vertical Align:指定标题,描述,价格等内容在项目内垂直对齐的选项。可在“顶部对齐”,“中部对齐”,“底部对齐”中选择。

3. Price List的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是PriceList的功能设置和使用说明。希望本篇内容能对您使用Elementor时有所帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - JetEngine 使用教程 2 - Custom Taxonomies的制作和设置以及使用方法 -特色图片
JetEngine 使用教程 2 - Custom Taxonomies的制...
Wordpress插件与设计 - Elementor 基础教程 6 - 按钮小工具的设置和使用方法 - 特色图片
Elementor 基础教程 6 - 按钮小工具的设置和使...
google-sheets-to-wordpress-table-sync-plugin tumnail
告别手动更新?如何用Google Sheets打造动态数...
Wordpress插件与设计 - JetEngine 使用教程 1 - 如何制作自定义文章类型以及进行具体设置和使用方法 - 特色图片
JetEngine 使用教程 1 - 如何制作自定义文章类...
Wordpress插件与设计 - Elementor 基础教程 18 - 进度条小工具的设置和使用方法 - 特色图片
Elementor 基础教程 18 - 进度条小工具的设置和...
Wordpress插件与设计 - WP教程 29 - 掌握WP用户权限设置,轻松打造安全的多人协作平台! - 特色图片
WP教程 29 - 掌握WP用户权限设置,轻松打造安全...
Wordpress插件与设计 - Elementor 专业教程 28 - Code Highlight小工具的设置和使用方法 - 特色图片
Elementor 专业教程 28 - Code Highlight小工具...
Wordpress插件与设计 - Elementor 基础教程 24 - 警告小工具的设置和使用方法 - 特色图片
Elementor 基础教程 24 - 警告小工具的设置和使...
Wordpress插件与设计 - WP教程 8 - 掌握文本和按钮链接的设定及使用方法 - 特色图片
WP教程 8 - 掌握文本和按钮链接的设定及使用方...
Wordpress插件与设计 - Elementor 专业教程 5 - Carousel小工具的设置和使用方法 - 特色图片
Elementor 专业教程 5 - Carousel小工具的设置...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - Elementor 通用教程 2 - 编辑段,编辑栏,内部区段是什么? - 特色图片

Elementor 通用教程 2 - 编辑段,编辑...

Wordpress插件与设计 - Elementor 专业教程 22 - Facebook Button小工具的设置和使用方法 - 特色图片

Elementor 专业教程 22 - Facebook But...

Wordpress插件与设计 - Elementor 专业教程 9 - Animated Headline小工具的设置和使用方法 - 特色图片

Elementor 专业教程 9 - Animated Head...

Wordpress插件与设计 - WP教程 22 - 再也不将就!用Text Blocks打造精美的文字布局 - 特色图片

WP教程 22 - 再也不将就!用Text Block...

Wordpress插件与设计 - Elementor 基础教程 16 - 图标列表小工具的设置和使用方法 - 特色图片

Elementor 基础教程 16 - 图标列表小工...

Wordpress插件与设计 - Elementor 基础教程 4 - 图像小工具的设置和使用方法 - 特色图片

Elementor 基础教程 4 - 图像小工具的...

AI工具 与服务
YYP-2024-07-04-12-41-30

Pixite - AI魔法织就独特时尚风格,个...

AI工具与服务推荐 - Leonardo AI平台 - AI图像生成技术 - 特色图片

Leonardo AI - 一站式视觉创意空间,灵...

AI工具与服务推荐 - SocialMate Creator - AI写作平台 - 特色图片

SocialMate Creator - AI写作平台,可...

AI工具与服务推荐 - Fable - AI创意协作平台 - 特色图片

Fable - 团队共创,用动画与创意打造意...

AI工具与服务推荐 - QAnything - 企业级知识库问答平台 - 特色图片

QAnything - 让企业知识库焕发活力,为...

AI工具与服务推荐 - 商汤秒画SenseMirage - AI绘画网站 - 特色图片

商汤秒画SenseMirage - 文字描述秒变艺...

Canva教程 与技巧
Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片

Canva 相关教程 2 - Canva免费版与付费...

Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片

Canva 相关教程 1 - 未来的设计在这里...

Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片

Canva 相关教程 3 - 设计初体验!用Can...

Canva使用教程 - Canva 新手指南 3 - 无需编程!用Canva创建专业一页式网站的指南 - 特色图片

Canva新手指南3 - 无需编程!用Canva创...

Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片

Canva新手指南4 – 告别平庸!用Canva打...

Canva使用教程 - Canva 新手指南 1 - 全面解析Canva文本框的基本功能! - 特色图片

Canva新手指南1 - 全面解析Canva文本框...

社媒运营 与营销
社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片

新手必看!解锁YouTube视频广告投放优...

社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片

一文读懂YouTube Premium会员权益!让...

社媒运营推广 - Youtube - 解密YouTube用户互动策略!掌握频道人气的秘诀 - 特色图片

解密YouTube用户互动策略!掌握频道人...

社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片

将爱好转为事业!通过YouTube频道赚钱...

社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片

从零到一!创建YouTube频道并上传视频...

社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片

缩略图设计终极指南,打造吸睛的视频门...

AI工具 分类筛选
AI Main Category checkbox