最近更新时间:2023.04.25 23:02:33
首次发布时间:2022.12.19 11:53:57
一、功能介绍
支持上传图片,多用于页面背景图;
图片没有交互,如需交互请使用按钮组件;
二、图片规范
三、常用配置
(1)图片大小调整、位置移动、透明度调整:
(2)图片长按可保存设置
字体:目前为用户提供了丰富的字体以供使用;
需要注意的是:目前提供的字体均为第三方提供的开源字体,详细版权信息请点击文档进行查看;
常用配置
(1)图片大小调整、位置移动、透明度调整:
(2)圆角设置
富文本是基础组件的一种,是编辑文字的一种工具。在富文本设置栏内点击编辑富文本内容即可编辑文本内容;
目前可以编辑:字体,字号字体颜色,加租,斜体,删除线,下划线,对齐,超链接,字间距,行间距,有序列表,无需列表;
使用相关:
双击富文本组件弹出富文本组件编辑框,会展示富文本组件的默认内容,可进行编辑,点击确定按钮会将编辑好的内容覆盖之前的富文本组件的内容,点击取消将丢失编辑内容,请谨慎操作。
富文本组件可以支持苹果的emoji表情使用😘
使用场景:
一、功能介绍
【常见交互行为】
(1)跳转链接
(2)跳转活动内页面
(3)打开弹窗
(4)关闭弹窗
(5)隐藏自己 #
二、常用配置
(1)按钮移动位置,调整大小,设置透明度
(2)按钮设置为固定悬浮
默认用户勾选后才可提交表单,可用于勾选保密协议等。
填写表单项名称 提示的文案可以更改 设置是否是必填项,当你这里选择设为必填项之后,如果用户提交时没有勾选会弹出错误提示(提示的文案可更改) | |
---|---|
同样的,如果你选择弹窗作为提示,需要在你的活动中添加一个弹窗组件,再把他们连接起来 | |
同样的,如果你选择弹窗作为提示,需要在你的活动中添加一个弹窗组件,再把他们连接起来 | |
可设置字体 设置字号 设置字体颜色 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐 设置背景和边框,不用的话可以不勾选 |
使用该功能后,用户可以点击“+”上传图片,建议用户上传小于10M的图片,大于这个大小的图可能会上传超时最后上传失败;
为方便后台数据区分,请务必记得填写「表单项名称」;
一个可填写的框,用户可在里面填写单行文本,文本内容会回收到数据中
填写表单项名称; 如果填写的超出这个范围,会弹出错误提示(4类:“无”提示、Toast、图片、弹窗) 如果你选择弹窗作为提示,需要在你的活动中添加一个弹窗组件,再把他们连接起来; 可以设置内容格式,目前提供手机号和邮箱两种检验(比如:你选择手机号之后,输入框能自己识别填写的是不是手机号码(11位数字)) | |
---|---|
可以设置字体 设置字号 设置字体颜色(字体颜色更改不在提示语上生效,而是在用户输入的内容上生效) 设置加粗、下划线、倾斜、左右中对齐等等 设置背景和边框,不用的话可以不勾选 |
单选项设置 | 表单项名称必填,用于后台数据的区分; 选项选中后双击可编辑选项;; 可增加选项; 可设置是否必填 | |
---|---|---|
字体设置 | 可设置字体; 设置字号; 设置字体颜色; 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐; 设置背景和边框,不用的话可以不勾选; |
设置选项供用户点击一项或多项选择,可设置最多选择几项,选择数据可回收至后台;
多项选择配置基本与单项选择相同,不同的配置项见下方。
选项配置 | 多项选择选择框是方形,而单项选择选择框为圆形; 设置是否必填; 设置限制可选数量和最多可选的选项数量; 当选择的数量超过你设置的限制数量时,会发出错误提示; | |
---|---|---|
自定义弹窗提示 | 如果你选择弹窗作为错误提示,需要在活动中增加一个弹窗组件,并把它和这个地方链接; |
下拉选项 | 填写表单项名称; 选中后双击更改你给的选项的信息; 添加选项; 删除选项; 设置是否必填,打开则设为必填项; | |
---|---|---|
文字样式 | 可设置字体; 设置字号; 设置字体颜色; 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐; 设置背景和边框,不用的话可以不勾选; | |
H5预览 | 预览效果如图 |
用户点击后可提交表单,提交按钮可收集以上所有组件收集来的信息。 使用表单组件一定要有提交按钮,不然无法收集信息在后台形成表单,ps.⭕一个活动中只能放置一个提交按钮;
表单中所有组件设置必填后,判断的位置会是在用户点击提交按钮之后,除了勾选条款组件外,如果有必填项没填,用户点击提交会弹出toast提示,默认文案为”请填写完整“;
勾选条款组件的错误提示方式和文案可以自定义;
提交成功 | 用户提交时的提示设置: 提交成功设置: 提交成功的提示有六类:Toast、图片、弹窗、跳转页面、跳转URL,当然你也可以选择“无”提示。 Toast:提交后弹出Toast提示; 图片:提交后展示你给的图片; 弹窗:弹窗内可以放你想放的组件,比如抽奖等,增强活动丰富性; 跳转页面:跳转到本活动的某一页(针对多页面的活动) 跳转URL:跳转到某个链接,可以用这里和其他活动关联起来 登陆后才可提交: 如果你要收集用户的id,必须要把“登陆后才可提交”打开; 若没有登陆便提交,会出现错误提示: 错误提示有四类:“无”提示、Toast、图片、弹窗; | |
---|---|---|
必填项校验 | 必填项校验:开启后,如果你有设置其他表单组件为必填项,那么点击这个提交按钮时会对必填项的填写情况进行检验,如果存在没有填写完的必填项,则会弹出错误提示 | |
只允许提交一次 | 只允许提交一次:设置后用户无法二次提交,按钮会展示”不可提交“状态,并且再次点击时弹出错误提示 | |
展示用户上次填写数据 | 展示用户上次填写数据:设置后,用户在进入活动页时表单不会是空白状态,而是会显示他上次填写的内容 注意事项:若使用此项功能,建议活动页面上线后,不要修改相关表单类组件的「表单项名称」,否则,在回显数据时,会展示错误信息。 | |
自定义弹窗提示 | 需要注意的是:除了提交成功后的提示有六种交互外,其他提示都只有四种交互。 当你选择“弹窗”作为提示方式,你需要在活动中添加一个弹窗组件,并把它和此处关联起来。 |
一、功能介绍
是一个在蒙版上的独立页面,可以在弹窗内编辑文字、图片等多种组件
与其他组件的交互功能组合使用,常见于基础按钮的交互行为和抽奖组件的Toast设置
一般常用于抽奖活动和表单活动,常见于抽奖结果展示和表单提交成功提示
二、内容配置
添加弹窗组件
可以把弹窗理解为一个「容器」,弹窗内可以插入任何组件
点击「图层」调出页面层级结构一览表,在表中双击弹窗(如弹窗#1)修改名称
保证每一个弹窗都有自己独特的名字
组件大小调整、位置移动、透明度调整:
以点击按钮出现弹窗为例:
在页面中插入一个弹窗,修改名字为“弹窗#1”;
在弹窗中加入一张图片,或者按照你的想法加入其他组件,此处上传一张示例图
动作类型选择「打开弹窗」
弹窗组件选择「弹窗#1」
以提交表单后出现弹窗提示为例
在页面中插入一个弹窗,修改名字为“弹窗#2”;
在弹窗中加入一张图片,或者按照你的想法加入其他组件,此处上传一张示例图
加入一个提交按钮,在校验规则中,选择“提交成功提示”为“弹窗”,将提交按钮和弹窗联动起来
实现点击提交出现弹窗(此处为图片),一般用于表单提交成功反馈
一、功能介绍
支持用户左右、上下滑动查看内容
容器内可以添加各种组件,组件排放从左到右
二、内容配置
组件大小调整、位置移动、透明度调整:
关于组件的图层、位置、尺寸设置,请查看编辑器新手入门「图层和位置」章节
设置滑动内容可查看宽度和滑动方向:
滑动方向暂时只支持水平方向
支持选中滑动容器后,点击需要组件依次进行添加
支持鼠标拖拽,可以将需要的组件拖拽到滑动容器内
内容宽度要根据设计稿需求,多次调节至理想大小
一、组件效果
可以通过对箭头的点击实现内容的展示和收起,折叠过程的切换会有动画效果
二、常规配置
组件大小调整、位置移动、透明度调整:
选择折叠面板 | |
---|---|
操作栏位置:顶部/底部 用户观看时默认状态是展开/折叠 操作栏背景图自行上传 折叠图标是否显示 可以把原来的箭头样式图删除后改成自己需要的箭头样式 内容面板高度由什么决定 内容面板背景自行上传或默认 | |
在选项卡内部添加内容时,请先选中对应的折叠容器,否则内容会被错误的添加在选项卡外部 |
一、组件作用
不同块的内容全部排列,但选择不同块内容时对应的导航栏的tab时会自动定位到该块内容的位置
点击tab后,对应内容会滚动到最上方(注意看tab上的蓝条,出现在哪个位置说明我点击了哪个tab)(但是如果你页面不够长,也有可能只是定位到底部,因为页面拉不上来了,下面没有内容) |
---|
二、组件配置
1.添加组件 | ||
---|---|---|
2.配置组件 | 如果你需要,可以调整tab栏的高度 | |
3.替换tab背景图 | 点击“选择图片”即可上传对应tab的背景图 | |
4.往导航栏添加你需要的内容 | 导航栏是个容器组件,所以在你要往每个子容器(就是tab)添加内容时,你需要先选中这个子容器(tab下方出现蓝色横条),再添加组件 如果你要更改这个tab的背景色,也需要先选中这个子容器(注意右侧配置栏标题的变化) 你可以打开结构树查看,确认自己要添加的组件添加到了你想添加的子容器中 |
一、组件效果
可以通过对左右箭头的点击实现不同块内容之间的切换,不同内容块支持自动轮播
二、常规配置
组件大小调整、位置移动、透明度调整:
关于组件的图层、位置、尺寸设置,请查看编辑器新手入门「图层和位置」章节
选择轮播容器 | |
---|---|
添加多个轮播子容器 默认展示哪个轮播子容器 子容器宽度设置 横排or竖排展示 是否需要自动轮播 轮播间隔时间设置 数量指示点是否显示 切换箭头是否显示 | |
在轮播容器内添加内容时,请先选中对应的轮播子容器,否则内容会被错误的添加在选项卡外部 |
一、组件效果:
可以实现不同tab(2-5个)下不同块内容的切换,比如
二、详细配置
1.添加【单行选项卡】组件
2.具体配置
(1)更改展示项
选项1选中态 | 选项2选中态 | 选项3选中态 |
---|---|---|
(2)在选项卡各个tab下添加内容
添加单行选项卡
点击选项卡——探索版选项卡组件即可添加
右侧配置区向下滑动点击添加选项,最多支持添加20个选项卡
调整选项卡位置及间距
这四个数值分别对应选项卡距离上、右、下、左四个边的距离。
如何****切图
各选项一致时:
只需要设计选中状态和未选中状态两张图片;
注意:选项卡默认宽度210px,高度84px。实际样式会根据上传的背景图片而变化。默认样式如下图:
各选项不一致时:
需要为每张选项卡设计选中状态和未选中状态两张图片。
注意:选项卡默认宽度210px,高度84px。实际样式会根据上传的背景图片而变化。默认样式如下图,第一个及最后一张选项卡可以使用长方形图片,上传后正常展示
只有两个选项时,如何配置?
在探索版选项卡的默认状态下,如果只有两个选项的情况下会靠左展示,选项卡宽度会根据上传图片自动撑开; 建议设计尺寸:宽度:335px,外边距:20,选项间距:40。 如果外边距和选项卡距离有所改变请自行计算宽度。计算方法:选项宽度=(750-外边距*2-选项间距)/2
对比使用以上方式,这边更建议直接使用👉单行选项卡
一、组件效果
可以通过对左右箭头的点击实现不同块内容之间的切换,两个tab之间的切换会有动画效果
二、常规配置
选择箭头选项卡 | |
---|---|
选项栏高度设置 切换选项的tab数量 更改活动打开时默认展示的tab 更改tab的样式 可以把原来的箭头样式图删除后改成自己需要的箭头样式 | |
在选项卡内部添加内容时,请先选中对应的tab子容器,否则内容会被错误的添加在选项卡外部 |
一、组件作用
利用内部服务器生成的链接承载可在当前页面播放的视频
注意,最好上传横屏视频,竖屏视频不会适应,播放效果如下
二、组件配置
### 1.添加组件 | ||
---|---|---|
### 2.设置组件图层位置和大小 | 关于组件的图层和位置的设置,请查看编辑器新手入门「图层和位置」章节 | |
3.配置组件 | 将你复制来的链接前的【https:】删掉,保留【//】以后的链接,填入地址 上传视频封面,系统不会自动抓取,不上传的话会出现魔方的兜底封面 | |
5.根据需求调整边框 |
一、组件作用
可点击后播放/暂停你所上传的音频文件(.mp3),也可隐藏按钮设置自动播放(用户对页面进行任意交互后自动播放),作为整个活动的bgm
二、组件配置
### 1.添加组件 | ||
---|---|---|
2.设置组件图层位置和大小 | 关于组件的图层和位置的设置,请查看编辑器新手入门「图层和位置」章节 | |
3.配置组件 |
|
一、组件效果
用于展示距特定时间正计时和倒计时的组件
## 倒计时 | ## 正计时 |
---|---|
二、组件配置
### 1.添加组件 | ||
---|---|---|
### 2.更改组件图层位置和大小 | 关于组件的图层和位置的设置,请查看编辑器新手入门「图层和位置」章节 | |
3.具体配置组件 | 设置正计时/倒计时 设置时间(对于倒计时来说,你的活动时间要设置在未来,对于正计时来说,你的时间要设置在过去) | |
### 4.配置背景和边框 |
一、组件效果
可以进行文字内容的滚动播放,比如用作弹幕、留言墙效果
## 向左滚动 | ## 向上滚动 |
---|---|
二、组件配置
### 1.添加组件 | ||
---|---|---|
### 2.更改组件图层位置和大小 | 关于组件的图层、位置、尺寸设置,请查看编辑器新手入门「图层和位置」章节 | |
3.具体配置组件 | 配置玩法规则后进行选择链接 设置滚动方向 | |
4.调整文字 | 设置字体 设置字号 设置字体颜色 设置文字加粗、下划线、倾斜 对齐的调整对于该组件不生效 点击展开设置字间距、行间距、文字方向、删除线 同样也可对用户及奖品信息样式进行设置 | |
5.配置背景和边框 | 也可选择对背景和边框进行设置 |
一、组件效果
二、知识问答配置(以图片为例)
配置区板块 | 具体释义 |
---|---|
选项类型 - 支持图片和文字,此处选图片 每一道题目的分值可以手动输入,默认值是10分 用户选中答案的图标默认是一个背景是灰色的勾,可以自行设计并上传选中图标 | |
知识问答组件默认有四个选项,可以手动删减选项 选项的图片可以删除,重新手动上传设计好的图片 知识问答组件支持勾选正确答案,用户只有选中正确答案,才得分 不勾选则默认为错误答案 可以手动增加选项,选项数量没有限制 | |
用户选择正确/错误答案的反馈设置 可以选择无、Toast、图片和弹窗 无 - 没有反馈 Toast - 一个小方块提示,需要手动输入提示内容 图片 - 弹出图片提示,需要手动上传图片 弹窗 - 弹窗提示,需要用户配置弹窗及弹窗内容,具体参考【弹窗链接】 |
一、组件效果
自动根据测试测评组件和知识问答组件累计用户最终得分并展示分数,不需要配置
二、答题得分配置
配置区板块 | 具体释义 |
---|---|
可以设置基础分数,默认值是0分 可以选择字体 可以选择字号,默认为24px 可以选择字体颜色,默认黑色 加粗、下划线、斜体、得分位置在此设置 |
一、组件效果
二、测试测评配置(以文字为例)
配置区板块 | 具体释义 |
---|---|
选项类型 - 支持图片和文字,此处选图片 从一道题自动跳转下一题的时间,默认为500毫秒 | |
测试测评组件默认有四个选项,可以手动删减选项 选项的对应文案可以手动编辑 每个选项的分值需要手动键入,默认分值为10分 不区分正误选项 可以手动添加选项 可以选择选中选项时,文字的颜色 可以选择选中选项时,选项的背景色 |
一、组件效果
二、重做按钮配置
配置区板块 | 具体释义 |
---|---|
手动设置,跳转到测试开始页面 重做按钮的样式可以手动上传设计图样 |
!!请注意:
如果你的题目配置了【用户答错后--跳出弹窗展示解析】,同时又在页面最后配置了【重做按钮】,那么需要在答题错误跳出的弹窗的按钮中,额外配置【关闭弹窗】的动作,否则会出现用户点击【重做按钮】重做后,到第一遍答错的题目时,还未选择就直接跳出解析的情况。具体的配置请看下图
一、组件效果
二、组件配置
### 1.添加组件 | ||
---|---|---|
2.更改位置大小和图层 | 关于图层和位置的设置,请查看编辑器新手入门「图层和位置」章节 | |
3.配置组件 | 可以更改输入框的提示文案 更改用户实际复制的文案,比如这里,用户点击复制按钮之后就会自动复制”实际复制文本“这几个字到手机 如果你的提示方式是弹窗 | |
4.更改按钮样式(如果你需要的话) | 快速双击选中复制按钮【注意,选中后它周围会出现篮框,并且右侧的配置会是【复制文本按钮元素设置】 上传你的按钮图 更改填充方式 | |
5.根据需求配置背景和边框 |
一、组件效果
点击后展开你设置的列表,用户自主选择选项后跳转到该选项对应的页面(链接)中 |
---|
二、组件配置
1.添加组件 | ||
---|---|---|
2.配置组件 | 关于图层和位置的设置,请查看编辑器新手入门「图层和位置」章节 | |
3.配置跳转项 | 设置展示文案 设置选项文案 设置选项对应的跳转链接,需要是//开头。 添加选项 更改展开和收起的图标(如果你需要) | |
3.根据你的要求配置背景 |