跳转至
POPQR GUIDE 图文使用指南

H5编辑器详解

使用H5编辑器,开发符合自己要求的页面。

1. 设置背景

  • 如果要设置页面标题,请在 设置背景 中输入。
  • 背景可以是纯色和图片,图片范围 可以选择不同的大小,搭配 图片显示 中的覆盖裁切(占据全部)、完整显示、宽度铺满(高度自动,保持比例不变),可以实现不同的效果。
  • 背景色和背景图片可以叠加。

2. 页面设置

  • 创建页面的名称和分享信息,要在页面设置中填入。
  • 可以设置页面访问是否需要密码。

泡泡二维码H5编辑器

H5编辑器-页面设置 · 点击图片可放大

3. 样式库

样式库可以设置整体的 样式颜色

泡泡二维码H5编辑器

H5编辑器-样式颜色 · 点击图片可放大

标题

  • 内置多种标题样式,可以作为页面每一部分的标题。
  • 点击左侧的标题样式,即可添加到H5编辑器中,再次点击编辑器中的标题元素,即可修改标题内容

泡泡二维码H5编辑器

H5编辑器-标题 · 点击图片可放大

正文

  • 所有的普通文字,都需要使用正文作为载体输入!
  • 正文的使用和标题类似,也是左侧选择点击后添加到编辑区。
  • 带有列表效果的正文,可以点击后 添加/删除元素

泡泡二维码H5编辑器

H5编辑器-正文 · 点击图片可放大

图文

  • 图文样式除了自定义图片和文字外,还可以设置连接。
  • 多图的图文样式,可以增加图片。
  • 图片在图片框架中的显示方式也可以自定义。

泡泡二维码H5编辑器

H5编辑器-图文 · 点击图片可放大

跳转链接

  • 跳转链接除了文字,还有按钮、图文、图文列表、图标列表等多种形式。
  • 跳转链接的链接地址,除了外部URL,还可以设置为你已经制作好的活码。

泡泡二维码H5编辑器

H5编辑器-跳转链接 · 点击图片可放大

泡泡二维码H5编辑器

H5编辑器-跳转链接-链接设置 · 点击图片可放大

分割线

  • 丰富多彩的分割线,可以让页面更加清晰可读。
  • 点击后可以直接设置分割线颜色。

泡泡二维码H5编辑器

H5编辑器-分割线-链接设置 · 点击图片可放大

4. 顶部工具栏

富文本

富文本样式,可以支持直接从word、网页中复制文本,文本样式保持不变,例如颜色和大小

图片

如果需要独立的图片模块,请使用顶部工具栏的 图片。

图片工具可以通过上传多张图,制作 轮播 的图集。

图片工具可以设置连接和比例、圆角、说明。

泡泡二维码H5编辑器

H5编辑器-图片 · 点击图片可放大

文件、音频、视频

在要插入的位置直接点击上传即可

表格

表格支持直接粘贴,可以从word、网页中直接复制表格内容。

泡泡二维码H5编辑器

H5编辑器-表格 · 点击图片可放大

联系方式

  • 悬浮样窗样式的联系方式,会固定在页面底部或右下部,不会随着页面上下移动。
  • 悬浮样窗样式的联系方式,只有点击后才会显示联系方式。

编辑提醒

页面标题在 设置背景 中填写,页面名称和分享信息在 页面设置 中填写,两者不要混淆。
从 Word、网页复制的内容可能带入隐藏格式,粘贴后建议逐段检查颜色、字号和对齐。
保存草稿不等于发布,访客看到的是已发布版本;改完内容要再次 发布 才会生效。

常见问题

设置了背景图片,但显示不全或被裁切?

背景图片的显示效果由 图片范围 和 图片显示 共同决定。需要铺满整屏选“覆盖裁切”,需要完整不变形选“完整显示”,需要宽度铺满、高度自适应选“宽度铺满”。不同手机屏幕比例不同,建议用宽度铺满并自行裁切源图,避免关键内容被裁掉。

页面标题改了不生效?

页面标题在 设置背景 中填写,页面名称和分享信息在 页面设置 中填写。画布上的标题元素只是页面内的展示标题,不会同步到分享卡片和浏览器标签。修改后保存并再次 发布 才会生效。

从 Word 或网页复制的内容,样式错乱?

普通文字请用 正文 作为载体,复杂排版用 富文本。富文本能保留颜色和字号,但可能带入隐藏格式。粘贴后逐段检查对齐、行距和颜色,必要时先在记事本中转成纯文本再粘贴。

跳转链接点击后打不开?

先确认链接地址完整(含 https:// 或 http://),跳转到本站活码时选择已制作好的活码记录。若链接了外部网址,还要检查目标页面是否需要登录、是否限制了来源。

悬浮联系方式不显示?

悬浮样窗样式固定在页面底部或右下角,只有点击后才会展开联系方式。如果看不到,检查是否被其他元素遮挡,或切换到手机宽度预览确认位置。

设置了访问密码,自己也进不去?

密码在 页面设置 中开启。忘记密码时可在同一入口修改或关闭;测试时建议用无痕窗口,避免浏览器缓存影响判断。

下一步:添加表单并收集报名 →

操作中遇到问题?

带上具体步骤和页面截图,我们帮你一起解决。

获取帮助