wix组件属性分析

@一棵菜菜  April 20, 2018

wix.com 编辑器中所有组件的属性和功能分析。

文字

属性是否可借鉴功能是否可借鉴
文字内容-动画-
文字(主题,字体,字体大小,加粗,斜体,下划线,前景色,背景色,链接,对齐方式,列表,左缩进,右缩进,对齐方式。)---
效果(内置多种效果)---
字间距(自动/自定义)---

图片

属性是否可借鉴功能是否可借鉴
图片地址-裁剪(按固定比例/自定义比例)-
当图片被点击时的操作(无/打开一个链接/打开一个弹窗/放大)删除-
被点击时打开的链接类型(无/站内页面/锚/网址/邮箱/手机号/文档/跳至文档顶部或底部/灯箱特效)动画(内置动画/自定义动画)-
图片的用途(alt,告诉浏览器)文案可借鉴帮助-
图片的提示(tooltip)(立即)复制
图片尺寸(自动/拉伸)-拷贝
内置多种图片样式风格图片滤镜风格选择(类似美图秀秀的滤镜)
通用-图片层级-图片层级修改
通用-图片角度-图片旋转
通用-图片宽度-图片宽度修改-
通用-图片高度-图片高度修改-
通用-图片绝对定位位置(top,left)图片位置修改--
通用-图片是否在所有页面显示--

幻灯片

属性是否可借鉴功能是否可借鉴
每页幻灯片的背景图地址--
设置-风格(内置多种风格样式)幻灯片排序
设置-幻灯片之间过渡显示的时长(秒)开启/关闭页面加载后幻灯片自动播放功能
设置-幻灯片播放(出现)的效果(无/从上到下/从左到右/渐入渐出等)开启/关闭鼠标悬停时停止自动播放功能
设置-每页幻灯片停留多长时间(秒)显示/隐藏超出frame的内容
设置-从哪里开始播放幻灯片(从头/从尾)--
布局-箭头按钮-大小显示/隐藏箭头(上一张/下一张)按钮
布局-箭头按钮-距离左右的坐标幻灯片的删除、添加、复制
布局-圆圈按钮组-大小显示/隐藏幻灯片的圆圈按钮组-(即幻灯片下面的小圆圈按钮)
布局-圆圈按钮组-距离幻灯片底部的坐标--
布局-圆圈按钮组-按钮之间的间距--
设计-圆圈按钮组-颜色--
设计-圆圈按钮组-当前页对应的按钮颜色--
设计-箭头按钮-背景色--
设计-箭头按钮-前景色--

备注

幻灯片我们有此组件,但是基本上没有样式配置,推荐借鉴wix的幻灯片配置项。

画廊(照片墙)

属性是否可借鉴功能是否可借鉴
风格(画廊/网格式/全屏式/幻灯片式/3D式)开启/关闭宽度全屏拉伸-
每张图片的地址--
每张图片的标题--
每张图片的描述--
网格式幻灯片式-设置-当点击图片时的操作(打开一个弹框/打开一个链接)--
网格式幻灯片式-设置-图片的文字显示风格(无文字/标题和描述/仅标题/仅描述)--
网格式-布局-列数--
网格式-布局-间距--
网格式-布局-文字对齐方式(居左/居中/居右)--
幻灯片-设置-幻灯片图片尺寸(自动裁切/合适的尺寸)显示/隐藏箭头按钮-
幻灯片-设置--幻灯片播放(出现)的效果(内置多个效果)开启/关闭自动播放幻灯片-
幻灯片-设置-每页幻灯片停留多长时间(秒)--
幻灯片-布局-小图组的位置(顶部/底部/左侧/右侧)--
幻灯片-布局-小图组图片比例(16:9,4:3,1:1)--
幻灯片-布局-小图组图片间的间距--

按钮

属性是否可借鉴功能是否可借鉴
被点击时打开的链接类型(无/站内页面/锚/网址/邮箱/手机号/文档/跳至文档顶部或底部/灯箱特效)动画(内置动画/自定义动画)-
布局-内容对齐方式(左对齐/居中/右对齐)帮助-
布局-自定义内容的左边距(立即)复制
设计-内置多种按钮样式风格设计-自定义按钮风格-
设计-按钮自定义样式(背景色,边框色,圆角度,阴影)拷贝
设计-按钮自定义文字样式(颜色,主题,字体,字体大小,加粗,倾斜)删除-
设计-按钮自定义悬停的样式(背景颜色,边框色,文字色)--
通用-按钮层级-按钮层级修改
通用-按钮角度-按钮旋转
通用-按钮宽度-按钮宽度修改
通用-按钮高度-按钮高度修改
通用-按钮绝对定位位置(top,left)按钮位置修改--
通用-按钮是否在所有页面显示--

形状

属性是否可借鉴功能是否可借鉴
风格(内置多种风格:线条,基本形状,箭头,图标,徽章,装饰的形状,动物和自然界的,水平线,竖直线)--
链接动画-
尺寸(居中/拉伸)--
背景色--
边框颜色--
边框宽度--

备注

不同风格有各自的配置,未全部列出。

视频

属性是否可借鉴功能是否可借鉴
视频地址-开启/关闭页面加载后自动播放视频
控制条显示方式(悬停显示/不显示)开启/关闭循环播放
通用的视频播放器选择(与wix内置的视频风格互斥)--
wix内置的视频风格(compact(紧凑)/classic(经典的)/strip(幻灯片模式))--
视频标题显示/隐藏视频标题
样式(边框,圆角,阴影)--

备注

可添加视频标题属性,添加修改视频标题的功能。

音频

属性是否可借鉴功能是否可借鉴
音频地址-歌迷可/不可分享我的音频-
内置多种样式风格-歌迷可/不可分享我的tracks-
控制条的风格(上下/左右)-开启/关闭页面加载后自动播放音频-
封面图地址显示/隐藏封面图-
信息和封面图的位置(信息内容悬浮封面图之上/底部)---
价格-显示/隐藏价格-
设计-组件的背景(背景色,边框颜色,边框宽度,分割者颜色)---
设计-组件的文字和按钮(文字色,按钮色、按钮悬停色,控制条整体文字色、按钮色,文字样式)---

备注

我们竹子建站没有音频组件,推荐添加。

社交工具

属性是否可借鉴功能是否可借鉴
社交类型(社交条,facebook、twitter、pinterest、youTube、google、VK、Spotify各大视频搜索等网站的社交)--
社交条风格(方块有颜色/圆形白图标黑底/圆形白图标灰底/灰色图标/黑色图标)---
社交条图标大小---
社交条图标(右)间距---
社交条排列方式(水平/垂直)--

联系(订阅表单)

属性是否可借鉴功能是否可借鉴
类型(邮件订阅网站通知表单,)开启/关闭发布网站时发送订阅邮件
邮件订阅网站更新信息-设置(是否开启有新订阅人的通知,通知接收着的邮箱,接受者邮箱,是否开启填写订阅者名字,订阅者名字内容,订阅者名字是否必填,是否开启填写订阅者电话,订阅者电话内容,订阅者电话是否必填,是否开启表单标题,表单标题内容,是否开启表单描述,表单描述内容,确定按钮的文字,订阅成功后的提示标题和描述) -
邮件订阅网站更新信息-布局(水平/垂直,头部标题对齐方式(左对齐/右对齐/居中对齐),内容区域对齐((左对齐/右对齐)))--
邮件订阅网站更新信息-设计(风格,头部,背景,记录项,提交按钮)--
表单内置风格(classic,strip,postcard,elegant,headline)--
表单头部设置(标题/子标题:颜色,字体,大小,加粗,斜体,下划线)--
表单背景设置(表单背景色,边框宽度,边框颜色,边角圆角度,阴影)--
表单每条记录项设置(输入框(背景色,边框色,边框粗细),标签名(文字颜色,字体,大小,加粗,斜体,下划线)),输入框内容(文字颜色,字体,大小,加粗,斜体,下划线)--
表单提交按钮设置(背景色,边框色,边框粗细,文字(文字颜色,字体,大小,加粗,斜体,下划线),大小(宽高),对齐方式(居左/居右/居中))--

备注

联系组件中包含了很多的表单组件样式和功能,我们很多都可以借鉴。

联系(表单)

属性是否可借鉴功能是否可借鉴
表单内置风格--
点击提交按钮后的提示文字内容点击提交按钮后操作(展示一段文字/打开一个链接)
点击提交按钮后打开的链接(站内页面/锚/跳至文档顶部或底部/灯箱特效)--
必填项未填的提示语内容--
表单记录项类型(姓名,邮箱,电话,地址,科目,文本)--

联系(地图)

属性是否可借鉴功能是否可借鉴
地图内置样式风格--
定位地址-显示/隐藏放大缩小按钮-
位置描述(支持html代码)开启/关闭拖拽功能
显示比例尺-开启/关闭卫星预览-
地图语言(支持众多语言)开启/关闭街区预览-
地图拉伸(横线100%宽度)开启/关闭地图拉伸
地图边距(左右边距同时设置。开启/关闭地图拉伸时才可设置)--

导航菜单

属性是否可借鉴功能是否可借鉴
内置多种风格样式(水平排列/垂直排列/锚点)开启/关闭所有的tabs都使用同样的样式
整体文字对齐方式(左对齐/右对齐/居中)开启/关闭tabs充满整个菜单
tabs排列方向(从左到右/从右到左)动画-
其他tabs显示时的提示文字内容拉伸(宽度100%)
普通样式(下拉菜单的背景色;边框色,边框宽度;圆角;文字(颜色,主题,字体,字体大小,加粗,斜体),间距(底部bottom,左右间距))--
悬停样式(当前项背景色;边框色;圆角;文字(颜色))--
点击样式(当前项背景色;边框色;圆角;文字(颜色))--

备注

锚点风格我具体不太了解其功能,需要在研究。

图文列表

属性是否可借鉴功能是否可借鉴
列表总宽度--
列表对齐方式(居左/居右/居中)--
内置风格(新闻,事件,推荐书,产品和服务,团队,更多列表)列表项的添加、复制、删除、隐藏/显示、编辑-
图文列表的名称(方便管理)列表项单独显示/隐藏其:标题,子标题,日期,描述,价格,图片,视频,按钮,列表每项的分割线
列表项的状态(显示/隐藏)--
列表项的间距--
分页:每页显示列表项数目开启/关闭分页
列表项-标题、子标题、价格(内容,文字颜色,背景色,主题,字体,字体大小,加粗,倾斜,下划线,对齐方式,链接,显示/隐藏)--
列表项-日期(日期时间,文字颜色,背景色,主题,字体,字体大小,加粗,倾斜,下划线,对齐方式,链接,显示/隐藏,)--
列表项-图片(图片地址,图片内置风格样式,边框,圆角,阴影,背景色;链接,alt,显示/隐藏)--
列表项-分割线(内置风格样式,边框(颜色,宽度),显示/隐藏)--
列表项-按钮(按钮文字,链接,显示/隐藏)--

备注

wix的图文列表功能、配置都做的很完善,我们可以多借鉴。

灯箱盒子(lightbox)

属性是否可借鉴功能是否可借鉴
类型(欢迎访问站点/订阅/促销活动/联系我们)-链接、按钮触发此lightbox-
名称-开启/关闭在页面上自动显示lightbox-
在哪些页面上显示此lightbox-动画-
延时多少时间显示(秒)---
lightbox关闭方式('x'图标,关闭按钮)---
在页面上显示的位置图式设置---
在页面上显示的位置手动设置(水平坐标,垂直坐标)---
样式-背景类型(图片/色值/视频)---
背景图片(图片透明度,图片范围(原始尺寸,填充,平铺,位置))---
lightbox文字内容---

备注

wix的灯箱盒子相当于一个弹窗悬浮层。我们竹子建站没有linghtbox组件,推荐添加。

博客

属性是否可借鉴功能是否可借鉴
添加类型(最近发布的博客,发布的特色博客,档案馆(根据时间月份来归类文章),分类集,标签集,RSS按钮,自定义,新闻提示(短文简介),posts gallery,相关发布的文章,博客列表,评论(facebook,disqus))编辑文章-设置文章的其他相关文章
自定义(根据哪些标签进行过滤文章;根据哪些分类过滤文章;是否只显示特色博客;每页显示文章数量,日期格式;内容区最大字符限制,图片最大尺寸(px);"read more"按钮的宽高(px),按钮的文字内容;页码文字内容(向前,向后的))-编辑文章-高级设置(设置google:meta title,meta description,excerpt,手机上显示的title,在google上的搜索结果预览)
内置多种布局样式(图文(左图右文/上图下文/上文下图),文字列表)开启/关闭文章发布后通知订阅者
整体对齐方式(居左/居右)开启/关闭博客与谷歌AMP-
整体内间距padding--
文章间的间距margin--
文章日期对齐方式(居左/居右/居中)--
文章标题对齐方式(居左/居右/居中)--
文章“read more”按钮对齐方式(居左/居右/居中)--
文章“read more”按钮里的文字对齐方式(居左/居右/居中)--
文章内容样式、文章作者和日期(文字主题,字体,字体大小,加粗,倾斜,下划线,前景色,背景色)--
文章图片样式(内置多种风格;自定义边框,圆角,阴影)--
文章是/不是特色的(标星)--
文章所属标签值---
文章所属分类值--
分类集样式(对齐方式(居左/居右/居中);字体(文字主题,字体,字体大小,加粗,倾斜,下划线,前景色,背景色);)显示/隐藏每个分类下的文章数量
标签集样式(对齐方式(居左/居右);字体(字体,加粗,倾斜,下划线,前景色,背景色);)--

在线商城

属性是否可借鉴功能是否可借鉴
子页面分类(产品展示页,产品详情页,购物车,购物成功后的感谢页)创建折扣券
产品展示页面元素(网格式产品集画廊/幻灯片式产品集画廊/单个产品组件/产品加载loading图标/“添加到购物车”按钮)--
产品展示页-布局(内置多种布局风格:上图下文且文字居左/仅图片/上图下文且整体带边框/上图下文且文字居中)--
产品展示页-布局-图片大小(自动裁切/适屏)显示/隐藏产品名称
产品展示页-布局-图片比例(提供多种常见的比例供用户选择)显示/隐藏产品价格
产品展示页-布局-文字对齐方式(居左/居中/居右)--
产品展示页-布局-列数--
产品展示页-布局-行数--
产品展示页-布局-间距--
产品展示页-布局-文字内间距(padding)--
产品展示页-设置-产品悬停样式(内置多种悬停样式)在产品名称与价格之间显示/隐藏分隔短横线
产品展示页-设置-显示更多产品的按钮的文字修改显示更多产品的按钮的文字内容
产品展示页-设计-组件整体背景色修改背景色
产品展示页-设计-产品筛选和排序的背景色--
产品展示页-设计-产品筛选和排序的文字颜色--
产品展示页-设计-显示更多产品的按钮-(文字颜色,字体;按钮样式(内置多个),按钮背景色;边框宽度,边框颜色;圆角度,按钮宽度)修改显示更多产品的按钮的文字内容
产品展示页-产品筛选-名称(为提示用户)显示/隐藏产品筛选“组件”功能
产品展示页-产品筛选-自定义通过哪些元素来筛选(产品库,价格,产品的自定义选项等)修改背景色
产品展示页-产品排序-名称(为提示用户)显示/隐藏产品排序“组件”功能
产品展示页-产品排序-用户可通过使用哪些排序选项(关键词,如:newest(最新的),价格(从低到高),价格(从高到低),名称顺序(A到Z),名称倒序(Z-A))--
折扣券-内置多种折扣券的风格样式开启/关闭折扣时间-
产品展示页-快速查看-(背景色,边框颜色,产品名称的文字样式设置,价格的文字样式设置,按钮的文字样式设置,按钮样式,按钮颜色,按钮边框粗细和颜色,按钮圆角)开启/关闭产品快速查看功能
折扣券-编号开启/关闭某产品打折
折扣券-名称--
折扣券-折扣比例--
折扣券-作用于哪些产品--
折扣券-有效期(开始时间,结束时间)--
企业信息(企业名称,行业或分类,商品logo,商品的支付方式,商品的快递方式)-添加/删除新产品-
企业的联系方式(邮件,电话,传真,国家,城市,具体地址,邮编)---
商店设置-显示的语言--
商店设置-货币单位--
商店设置-价格显示的格式--
商店设置-货币符号在价格的哪个位置显示(左侧/右侧)--
商店设置-产品重量显示格式--
商店设置-订单包括/不包括税--
商店设置-结账时如何显示和预览政策--
商店设置-邮件通知订单进度的设置(下订单时,产品链接,快递在运输过程时,快递开始配送时发送邮件)--
产品管理-产品库---
产品管理-产品列表---
某产品主图(一张大图)添加/删除产品图片-
某产品细节图(多个小图)--
某产品信息-名称---
某产品信息-装饰语(如‘新货’)--
某产品信息-价格---
某产品信息-具体描述---
某产品信息-库存开启/关闭跟踪库存
某产品信息-SKU---
某产品信息-重量--
某产品信息- 产品详情块(标题,内容)显示/隐藏产品详情块
某产品信息- 退货和退款政策块(标题,内容)显示/隐藏退款退货政策块
某产品信息- 快递政策块(标题,内容)显示/隐藏快递政策块
--添加其他信息块(标题,内容)
某产品信息-自定义用户输入框的placeholder添加/删除一条自定义输入框
某产品信息-自定义用户输入框内容的长度限制--
某产品信息-自定义用户输入框必填/非必填--
某产品信息-产品选项-名称添加/删除一条产品选项
某产品信息-产品选项-选项的可选值(多选值)--
某产品信息-产品选项-选项的展示方式(列表/色块)--
某产品信息-每个产品选项变化时对应的设置-超重价格开启/关闭每个产品选项变化时对应的设置
某产品信息-每个产品选项变化时对应的设置-库存--
某产品信息-每个产品选项变化时对应的设置-重量--
某产品信息-每个产品选项变化时对应的设置-显示/隐藏此条设置--
产品页的SEO-标题(最多70个字符)--
产品页的SEO-描述(最多156个字符)--
产品页的SEO-页面url--
自定义购物车页面样式--
产品组件-设置-连接某个产品--
产品组件-设置-布局(内置多种布局样式)开启/关闭撑满页面宽度
产品组件-设置-悬停特效(无/放大/阴影层/边框)--
产品组件-设置-图片比例(裁切图片/自动合适比例)--
产品组件-设置-显示哪些元素(产品名称,产品名称和价格之间的分隔线,价格)--
产品组件-设置-按钮的显示(在组件上直接显示/悬停时/不显示)--
产品组件-设置-按钮事件(前往产品详情页面/购物车页面)--
产品组件-设置-按钮文字内容--
产品组件-设计-通用设置-图片对齐方式(左/右)--
产品组件-设计-通用设置-元素对齐方式(居左/居中/居右)--
产品组件-设计-通用设置-产品名称文字样式设置--
产品组件-设计-通用设置-产品价格文字样式设置--
产品组件-设计-通用设置-缺货的文字样式设置--
产品组件-设计-通用设置-背景色--
产品组件-设计-通用设置-边框颜色和宽度--
产品组件-设计-按钮-风格(内置多种风格)--
产品组件-设计-按钮-宽度--
产品组件-设计-按钮-文字样式设置--
产品组件-设计-按钮-圆角度--
产品组件-设计-按钮-背景色--
产品组件-设计-按钮-边框颜色和粗细--
产品组件-高级-间距-图片宽度(30~70)--
产品组件-高级-间距-行高(0~100px)--
产品组件-高级-间距-水平位置(0%~15%)--
产品组件-高级-间距-botton-top(0~100px)--
产品组件-高级-Ribbon--
产品组件-高级-悬停-遮罩层背景色-开启/关闭悬停时图片放大
产品组件-高级-悬停-边框颜色和粗细--

备注

我们没有这个组件,推荐借鉴。

在线商城有产品罗列页面,有产品筛选,产品排序,快速查看等功能。

自定义用户输入框即类似“您需要在表上刻什么文字”的咨询购买者。

产品选项即如一款手表有“红色”、“白色”、“大”、“小”这些属性选项,每个不同的选项可能对应不同的设置(类似京东的产品属性配置)。

其他

属性是否可借鉴功能是否可借鉴
嵌入一个网站--
HTML代码--
添加一个Flash(swf)--
登录/注册按钮(点击直接前往登录注册页面)--

添加新评论