Page Builder编辑器快速入门文档

Page Builder是由Shoplazza精心研发的一款卡片编辑器，拥有更高的卡片搭建效率和灵活性，能够在卡片构建上提供出色的性能。在主题装修的过程中，您可以充分利用Page Builder编辑器的强大功能，创造出独具特色、更加美观的卡片。这将为您的电商网站增添视觉魅力，提升用户的浏览体验。以下是Page Builder的几大亮点功能：

1. 提供丰富多元的组件库，支持多种交互效果；

2. 组件可进行随意搭配，搭建更符合品牌格调的个性化装修场景；

3. 可随心所欲拖拽排版，配置组件的颜色、圆角、阴影等样式细节，更精细化的创作内容样式。

一、主题中添加高级卡片流程

Step 1. 添加卡片

• 登录您的Shoplazza管理后台，点击在线商店 > 主题装修 > 编辑，进入到主题编辑器，将左侧面板-卡片列表下滑至底部，点击按钮 添加卡片，在二级面板中点击入口 高级卡片广场。

Step 2. 编辑卡片

• 在高级卡片广场中选择一张高级卡片，点击卡片即可自动添加卡片在主题中，并同时打开Page Builder编辑器，可对卡片进行编辑。

Step 3. 保存卡片

• 完成编辑后，点击Page Builder编辑器右上角按钮：保存，即可将卡片保存到主题中。

Step 4. 发布主题

• 完成主题编辑后，发布主题，即可在C端生效。

二、高级卡片广场的自定义模版

1. 保存为自定义模版

• 在主题已添加卡片列表中，点击高级卡片，左侧配置面板中点击按钮 另存为模版，即可将该高级卡片存为自定义模版。

2. 使用自定义模板

使用场景：

若已装修好的高级卡片会在多个店铺场景中会使用，您可以将该卡片保存为自定义模板，自定义模板为店铺维度，方便后续直接将该模版添加到其他主题中。

• 在高级卡片广场抽屉中，点击自定义模版Tab，鼠标悬浮到模版上后可对模版进行操作管理：
  • 使用模板：点击按钮 使用，可将模版卡片添加到主题中直接使用；
  • 编辑模版：点击按钮 编辑，将打开Page Builder编辑器，可对模版进行编辑；
  • 删除模版：点击右上角按钮 删除，可将模版删除；

三、Page Builder编辑器基础功能介绍

1. 组件

• 编辑器左侧为组件区，鼠标悬浮组件分类，右侧弹出该分类下具体的组件样式。

2. 顶部工具栏

• 修改卡片名称：双击名称可修改。

• PC端、移动端切换：点击icon可切换不同端的编辑视图。

• 回退/取消回退：点击icon可对画布中编辑操作进行回退，或者取消回退。

3. 配置面板

• 左侧的第二顺位tab为组件的配置项，当画布中选中组件时，该面板展示该组件对应的配置项。

四、Page Builder编辑器组件介绍

1. 布局容器

用于承载卡片内容的盒子，Page Builder编辑器提供了不同排列样式的布局容器，可将内容（图片、标题、段落等）拖入布局中完成卡片装修。

2. 功能容器

为带有特定交互功能的容器组件。

3. 元素

五、Page Builder编辑器常规编辑操作介绍

基础画布操作介绍

• 拖拽组件到画布
  • 点击左侧组件分类列表，选择该分类下的组件，按住鼠标将组件拖动到画布中。

• 组件可添加位置
  • 添加到已有组件旁
    • 方向：画布中的布局容器支持两种排列方式：横行、纵向，放置在同个容器中所有组件都只能按照单一的方向进行排列展示，可通过配置项调整排列方向。

• • • 操作：拖拽组件到画布中位置，出现提示的蓝色线条表明可将组件放置在此处。

• 组件基本操作
  • 单击画布中的组件后，组件变为选中状态，左上角出现快捷操作区。
  • 复制
    • 点击复制icon，组件将被复制，且位于当前组件的相邻右侧。

• • 删除
    • 点击删除icon，组件将在画布中被删除。

• • 定位到父级组件
    • 点击定位icon，选中状态将从当前组件移动到父级组件。

• 调整容器尺寸
  • 在画布中可拖动布局容器中的布局调节器进行快捷尺寸调节。

基础组件配置项简介

• 组件边距调整：
  • 内边距调整：内边距指组件边框与内容之间的距离，同时也决定了组件内可展示内容的范围，通过调整内边距可以控制内容与组件边框的留白大小。

• • 外边距调整：外边距指组件外部相邻组件之间的距离。

• 间距调整
  • 对于部分存在列表属性的组件，例如轮播、选项卡、布局容器（一行多列），可快速调整列表内容之间的间距。
    • 列间距（以布局容器为例）

• • • 行间距（以布局容器为例）

• 交互样式调整
  • Page Buider支持丰富的样式配置能力，同时支持配置在不同的交互的样式。
    • 例: 通过配置默认、悬浮、选中状态下的背景、字体、按钮等样式实现灵动的交互效果。

六、常见搭建场景

Case 1: 布局容器-图文分栏

示例卡片：

• 第一步：选择一行三列布局容器，并拖入画布中。

• 第二步：根据内容排列的方向修改子容器的排列方向，并将每个分栏中的内容按顺序拖入子容器中。

• 第三步：填充内容，调整好字号、字色、间距等样式，即可完成搭建。

Case 2: 布局容器-浮层照片墙

示例：

• 第一步：选择一行三列布局容器，并拖入画布中。

• 第二步：用尺寸调节器，快速调节子容器比例。

• 第三步：在右侧两个较小子容器中，再分别拖入子容器，添加列后，修改布局方向为纵向，使成为两行。

• 第三步：填充内容，调整内容样式。
  • 按照排列在子容器中分别设置图片背景填充，并上传图片内容。
    • 在图片背景上添加文本内容，并调整至目标位置。

Case 3: 布局容器+手风琴：Q&A卡片

示例：

• 第一步：选择一行二列布局容器拖入画布中，并在右侧子容器中添加手风琴组件。

• 第二步：在手风琴面板列表输入文本配置面板标题，并分别在每个面板对应的子容器中拖入段落组件，填充内容。

• 第三步：在左侧面板中拖入段落组件，填充内容，并配置好文本样式后，完成搭建。

七、常见搭建技巧

1. 快速调节内容位置

在配置部分文字浮在图片上的卡片时，我们通常使用图片来填充容器的背景，并且在容器内拖入按钮、文本等组件，并使其展示在目标位置，如下图所示：

此时只需要点击按钮所在的父级容器，在配置项内容位置中，点击对应位置，即可快速调整位置。

2. 一键复制提高搭建效率

类似图文分栏，具有多模块，且排列布局相同的卡片可以利用复制功能提高搭建效率。

先搭建好一个图文分栏，点击左上角的复制按钮，可在右侧复制出相同的子容器，对其他布局修改内容即可。

3. 调节移动端样式

PC端和移动端因宽度差距，很多样式无法同时适配两端，因此针对此类样式，Page builder部分配置项支持单独配置移动端和PC端。使用「%」调节内外间距

a. 在部分搭建场景中，需要对字体、按钮等组件进行位置的调节，如下图所示：按钮、标题文本等距离上方的位置是200px左右，此时若直接设置上方的外边距为200px，移动端因为宽度不够会存在样式不和谐的问题。

只需要2步即可解决此类问题：

第一步：选择父级容器，使用内容位置功能，将按钮、文字调节至左中的位置

第二步：将父级容器左侧内边距设置为126px，在将单位切换为「%」即可。

b. 配置移动端字体

PC端和移动端因为宽度差距，在PC端展示正常的标题的字号（通常>20px）无法适配移动端，可通过单独配置移动端字体解决此问题。

c. 配置移动端页面留白边距

PC端和移动端的页面留白边距通常不一致，可通分别配置最外层容器的内边距来适配两端。

d. 配置卡片是否在PC端、移动端展示

部分装修场景中，移动端和PC端的样式、交互差异较大，同一个卡片无法同时满足两端的样式需求，此时可以通过最外层容器的 PC端可见/移动端可见 配置项，控制当前卡片单独在PC端/移动端展示，即可针对两端单独搭建卡片。（此配置项在主题编辑器中不生效，将在C端生效，例如：配置两个幻灯卡片，分别为PC端可见、移动端可见，此时在主题编辑器中会展示两个卡片，但在C端会按照配置的规则展示对应的卡片）

八、常见问题

1. 不同主题的页面留白不同，如何在Page Buider中配置页面留白？

• 常规场景（左右页面留白为40px）

• 顶部Banner（铺满全屏）

2. 如何理解布局、选项卡、轮播等组件预留出的内边距？

因为容器组件都是两层盒子的结构，拖入组件进入画布时，预留出的边距只是为了方便再编辑器中进行选中、编辑等操作，实际不会在C端展示边距；因此，此时的组件的内边距、外边距配置项数值为0，手动输入边距的值后，该样式才会在C端生效。

3. 为什么通过配置项 > 内容位置 > 调节标题组件横向位置时，会出现不生效的情况？

因为容器的特性：标题框占满整行，此时没有剩余空间可以移动，可以通过文本对齐功能调节标题居中、居右。

4. Page Builder 支持使用的主题范围、主题版本有哪些？

Page Builder可以在Shoplazza的任何主题，以及任何版本中使用。