Page Builder Workspace
创建对象:
- 初学者
- 中级
- 用户
启用Page Builder 后,将修改 Content 部分和内容创建过程以利用CMS 页面、产品和类别页面、块和动态块的高级Page Builder工具。 此部分包括_内容标题_字段、内容预览和轻松访问全屏Page Builder工作区。
预览为Page Builder的
内容标题
由于搜索引擎会查找第一级(H1)标题,因此添加第一级标题是一种确保页面正确编制索引的简单方法。
为了更好地控制所有级别标题的位置和格式,建议将 Content Heading 字段留空,并使用Page Builder 标题内容类型。
预览
当您展开 Content 部分并且存在使用Page Builder创建的现有内容时,它将显示内容在页面中显示的预览。 单击 Edit with Page Builder 或内容预览区域以打开Page Builder工作区,您可以在其中进行任何需要的更新。
Stage
当您从预览中打开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像素或更宽时,内容在店面上的样式设置。
-
移动设备 — 以预定义的宽度768像素显示内容预览。 与桌面视区不同,移动设备视区的显示页面内容宽度为768像素,包括为断点宽度定义的样式宽度为768像素(最大值)和640像素(最小值)。
断点设置
视区按钮还提供了根据所选视区将不同的断点样式应用于内容类型的选项。 默认情况下,Page Builder为行、列、选项卡、选项卡项、横幅、滑块和幻灯片的 Minimum Height 字段提供断点设置。 当选择移动设备视区,然后打开其中一个内容类型的编辑器时,您可以输入特定于移动设备视区断点的字段值。 允许特定断点设置的内容类型字段在字段右侧显示一个图标,类似于以下行示例:
断点设置的
面板
Page Builder面板位于舞台的左侧,包含可拖到舞台的内容类型。 随即会显示一个特定于内容类型的容器,其中包含选项工具箱。 内容类型在面板中组织如下:
布局
Page Builder面板的 Layout 部分用于将行、列或选项卡添加到阶段。 将内容类型从面板拖到舞台上时,会显示一个容器,其中包含特定于内容类型的选项工具箱。
默认情况下,Page Builder阶段为空。 将布局内容类型从面板拖到舞台时,可以将它们放置在页面上的其他布局容器的上面、下面或内部。 只能将行直接添加到阶段。
具有布局内容类型和阶段
元素
使用Page Builder面板的 Elements 部分将文本、标题、按钮、分隔符和HTML代码添加到Page Builder 阶段上的任何布局容器中。 将内容类型从面板拖到行或列,或者拖到舞台上的选项卡集时,会显示一个容器。 使用内容类型工具箱访问特定于类型的设置。
具有元素内容类型的
媒体
使用Page Builder面板的 Media 部分将图像、视频、横幅、滑块和Google Maps添加到Page Builder 舞台上的任何布局容器中。 将媒体内容类型从面板拖到舞台时,会显示一个容器,其中包含特定于内容类型的选项工具箱。
具有媒体内容类型的
添加内容
使用Page Builder面板的 Add Content 部分将现有内容添加到Page Builder 阶段。 将媒体内容类型从面板拖到舞台时,会显示一个容器。 使用内容类型工具箱访问特定于此类型的_设置_。
具有添加内容类型的
Toolbox
舞台上的每个内容容器都有一个选项工具箱。 这些选项因内容类型而异,但通常包括“移动”、“设置”、“隐藏/显示”、“复制”和“删除”。
显示工具箱
将鼠标悬停在容器上以显示工具箱,然后选择一个选项。
工具箱选项






