Page Builder Workspace

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

初学者
中级
用户

启用Page Builder 后，将修改 Content 部分和内容创建过程以利用CMS 页面、产品和类别页面、块和动态块的高级Page Builder工具。此部分包括_内容标题_字段、内容预览和轻松访问全屏Page Builder工作区。

预览为Page Builder的内容部分 {width="700" modal="regular"}

内容标题

由于搜索引擎会查找第一级(H1)标题，因此添加第一级标题是一种确保页面正确编制索引的简单方法。

NOTE

显示在页面顶部的_Content Heading_字段是一个旧版字段，它支持使用以前的Commerce版本创建的内容。但是，它不是Page Builder的一部分。根据与当前主题关联的样式表，Content Heading将格式化为H1标题。它位于由Page Builder阶段定义的活动内容区域正上方。

为了更好地控制所有级别标题的位置和格式，建议将 Content Heading 字段留空，并使用Page Builder 标题内容类型。

内容标题和其他标题

预览

当您展开 Content 部分并且存在使用Page Builder创建的现有内容时，它将显示内容在页面中显示的预览。单击 Edit with Page Builder 或内容预览区域以打开Page Builder工作区，您可以在其中进行任何需要的更新。

产品描述预览

NOTE

对于产品和类别表单，默认情况下将启用此内容预览，但可以禁用它。如果性能因加载预览而受到影响，则可以在内容管理配置设置中禁用预览。

Stage

当您从预览中打开Page Builder工作区时，舞台是您可在其中创建和设置内容格式，甚至快速编辑实时内容的主要工作区。舞台最初是空的，它提供了设计界面，您可以在其中从左侧面板拖动行、列和选项卡。

NOTE

从2.4.1版本开始，内容编辑现在仅针对Page Builder控制的所有区域进行全屏编辑，即CMS页面、产品和类别页面、块和动态块。全屏编辑将焦点放在您的内容上，并提供与店面用户体验更匹配的视图。

包含页面内容的 {width="600" modal="regular"}

NOTE

如果您对Page Builder内容进行了重大更改，建议您增加管理员会话生命周期以防止会话在您工作时超时。

视区

视区是用户看到的网页的可见区域。在全屏设计模式下，视区按钮显示在Page Builder舞台的上方，当站点用户在店面中看到内容时，它会显示给您。

视区按钮

Page Builder还定义了视区的断点。断点定义应用特定样式的最小和最大宽度。 Page Builder视区提供了以下内容断点：

桌面断点—min-width: 1024px。此断点将应用为测量1024像素和更宽的视区宽度定义的样式。
移动断点—max-width: 768px, min-width: 640px。这些断点应用为视区宽度定义的样式（介于768像素和640像素之间）。

Page Builder视区提供两种功能：内容预览 和 断点设置。

内容预览

默认情况下，Page Builder提供两个视区预览：

桌面 — 显示没有预定义宽度的内容预览。桌面定义的样式（使用断点最小宽度1024像素）仍会应用于页面。但是，桌面视区宽度由容器内容类型（如行）的设置来定义。选择桌面视区会显示当浏览器页面宽度为1024像素或更宽时，内容在店面上的样式设置。

{width="500" modal="regular"}
移动设备 — 以预定义的宽度768像素显示内容预览。与桌面视区不同，移动设备视区的显示页面内容宽度为768像素，包括为断点宽度定义的样式宽度为768像素（最大值）和640像素（最小值）。

{width="500" modal="regular"}

断点设置

视区按钮还提供了根据所选视区将不同的断点样式应用于内容类型的选项。默认情况下，Page Builder为行、列、选项卡、选项卡项、横幅、滑块和幻灯片的 Minimum Height 字段提供断点设置。当选择移动设备视区，然后打开其中一个内容类型的编辑器时，您可以输入特定于移动设备视区断点的字段值。允许特定断点设置的内容类型字段在字段右侧显示一个图标，类似于以下行示例：

断点设置的图标指示器 {width="400"}