Page Builder | 基础组件

Page Builder 的基础组件。可以无需代码，拖拽组件至画布即可创建卡片，可以根据您的需求制作各种不同类型的卡片，例如图文分栏、浮层照片墙、Q&A卡片等。

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

Step 1. 添加卡片

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

Step 2. 编辑卡片

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

Step 3. 保存卡片

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

Step 4. 发布主题

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

二、组件说明

通用组件

1. 布局容器

分类	说明	编辑示例
行容器	仅支持单行展示，按照比例将容器分割为几个子容器，分别有以下几种布局样式： 1/1 1/2 1/3 1/3+2/3
格子容器	可多行展示的格子的容器，可自定义每行格子块的大小与数量。

2. 功能容器

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

3. 元素

分类	编辑示例
标题
段落
图片
按钮
视频	本地视频 Youtube视频

三、基础组件配置项简介

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

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

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

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

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

四、常见搭建场景

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

示例卡片：

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

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

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

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

示例：

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

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

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

• 第四步：填充内容，调整内容样式。
  • 按照排列在子容器中分别设置图片背景填充，并上传图片内容。

• • 在图片背景上添加文本内容，并调整至目标位置。

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

示例：

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

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

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

Case 4: FAQ卡片

详见教程：Page Builder | 如何配置FAQ卡片？

五、常见搭建技巧

1. 快速调节内容位置。

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

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

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

• 类似图文分栏，具有多模块，且排列布局相同的卡片可以利用复制功能提高搭建效率。
• 先搭建好一个图文分栏，点击左上角的复制按钮，可在右侧复制出相同的子容器，对其他布局修改内容即可。

3. 调节移动端样式

PC端和移动端因宽度差距，很多样式无法同时适配两端，因此针对此类样式，Page builder部分配置项支持单独配置移动端和PC端。

• 使用「%」调节内外间距。

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

• 只需要2步即可解决此类问题：
  • 第一步：选择父级容器，使用内容位置功能，将按钮、文字调节至左中的位置。

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

• 配置移动端字体

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

• 配置移动端页面留白边距

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

• 配置卡片是否在PC端、移动端展示。

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

六、常见问题

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

A: 最外层容器宽度与页面相同，可通过调整左右内边距来调节当前卡片与页面之间留白，以适配不同的主题、装修场景。

• 适配主题：每个主题的页面留白不同，根据当前使用主题的页面左右留白距离，对应进行最外层容器的内间距调节，使其与主题卡片的样式相匹配。
  • 例如，Hero 的左右页面留白距离为40px，在 Page Builder 编辑器中将最外层容器的左右内边距设置为40px即可(如下图)。

• 适配不同的装修场景：部分装修场景需要全屏展示，例如 banner 海报，此时将最外层容器的左右内边距设置为0即可(如下图)。

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

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

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

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