如何使用Elementor的Price List功能
Elementor编辑器中有个比较简单的功能元素叫做Price List,它的作用就是将产品或者服务价格以列表的形式展示出来,让访客能够更加直观的了解到这些产品价格信息。这种价格信息的呈现方式在B2B类型的网站上不是很常见,倒是在B2C类型的网站上出现的比较多。Jack老师为了我们整个Elementor编辑器教程内容的完整性,所以特意写了这篇文章。那么接下来,Jack老师会和同学们一起来了解一下Price List功能元素的功能和作用。
第一步:将Price List功能元素添加到内容编辑版块
如上图所示,我们在左侧的Elementor编辑器中找到箭头1所指的“Price List”功能元素,然后按住鼠标左键不松开,慢慢的拖到上图箭头2所指的地方,也就是内容编辑版块中。注意在没有将Price List添加到内容编辑版块区域之前,内容编辑版块外面是一个灰色的虚线框,只有当出现了一个蓝色的虚线外边框之后才代表着我们已经成功的将Price List功能元素添加到了内容编辑版块中!
第二步:Elementor编辑器的Price List功能元素主体功能设置
2.1、“List Items”:指的就是价格项目列表,Elementor编辑器系已经给我们预设了3个价格列表,如果你不需要这么多,那么点击列表项目后面的X符号就可以删除了,如果预设的3个项目还不够,那么再增加几个都没问题。
2.2、“Price”:就是产品的价格,注意写价格的数字的时候要写一下货币单位符号
2.3、“Title”:某一项产品或者服务的标题,系统预设的是“First item on the list”;你也可以改成YXZK-001,或者松鼠桂鱼,麻婆豆腐,东坡肘子…(一不小心就暴露了我是吃货的本质,哈哈)
2.4、“Description”:就是对上述标题的相关描述,比方说“东坡肘子味道偏鲜甜口味,采用黑山猪后腿作为原材料,营养丰富,好吃不腻”……
2.5、“Image”:就是为这个价格列表项目添加一张图片进行说明,比方说我们上面提到过东坡肘子,那么我们就给它配一张对应的肘子图片
2.6、“Link”:指的是点击该项目的标题、描述或者图片的时候,当前页面跳转的目标页面,比方说你已经创建了东坡肘子的详情页面,那么这里你就可以添加详情页面的URL
第三步:Elementor编辑器的Price List功能元素样式功能设置
3.1、“List”和“Description”中的项目都是一样的,分别是color和排版两个项目。这种常见性的项目Jack老师已经在其他文章中讲解了太多次,这里就不再赘述了。color就是修改价格标题和价格项目描述的颜色;排版就是对标题和描述文字本身的样式修改。
3.2、“Separator”:意思是分隔器,在price list中指的就是价格标题和价格数字之间的分隔线,Elementor编辑器已经为我们预设了包括实现、虚线、双实线等在内的5种基本样式以供我们选择
3.3、“Weight”:指的是分隔线的宽度,数值越大,分隔线越粗
3.4、“color”:指的是分隔线的颜色
3.5、“Spacing”:指的就是分隔线与两头的价格标题和价格数字之间的间距,如下图所示,图中的绿色边框距离指的就是Separator Spacing距离。
讲完了price list样式设置中的list样式设置,我们接下来再看看image样式设置
3.6、“图像尺寸”:除了系统预设的几个图像尺寸之外,我们还可以选择完整尺寸或者自定义尺寸来显示图像的大小
3.7、“Border Radius”:指的是产品图片的4个边角的圆弧程度,数值越大越圆润,甚至可以是一张方形图片转化成圆形图片
3.8、“Spacing”:指的是图片与价格标题与价格描述之间的距离
3.9、“Rows Gap”:指的是每一个产品价格列表项目与紧邻的产品价格列表项目之间的间距
3.10、“Vertical Align”:指的是包括图片、价格标题、价格描述、价格数字和分隔线之间的垂直对齐方式,有顶部对齐、垂直居中对齐和底部对齐三种方式。
好了,以上就是本章关于 如何使用Elementor的Price List功能 的全部内容,Price List是一种比较恰当的展示产品或者服务价格的方式,可以搭配图片、产品标题、产品描述等信息来详细的表达出一款待售产品或服务的价格,利用好Price List可以为我们的网站创作更多的转化!
如果还有不理解的地方,请使用百度或者谷歌浏览器搜索关键词--“Jack外贸建站”,排名首页首位的就是我的网站,网站上有更多外贸建站、谷歌SEO优化、外贸客户开发等实操干货内容在等着你哦!