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)是--
登录/注册按钮(点击直接前往登录注册页面)是--

添加新评论