Page Builder允许您自定义不同的主题元素,例如颜色、文本大小、主页上显示的特色产品数量等。您可以使用它来定制您的店面,使其更能反映您的品牌。

此外,您可以将内容拖放到页面上,例如文本块、图像、视频、横幅、轮播、按钮和自定义 HTML 块。这使您能够您的产品视觉上更加丰富。

Page Builder 提供对主题模板文件的访问,以允许进行高级模板编辑。如果要将主题重置为其默认设置,您可以恢复原始主题的样式。

 

备份您的主题自定义。如果您以前以任何方式自定义主题,则应 在使用Page Builder之前备份这些更改。

使用页面构建器

转到店面 › 我的主题 › 自定义以启动Page Builder。

您还可以通过使用操作图标并在页面构建器中选择查看来直接打开产品、类别品牌

在登录控制面板查看店面时,您可以使用屏幕顶部的管理栏在Page Builder中设计当前页面。请注意,您的商店需要使用Cornerstone 4.6.1或更高版本(或其他更新的主题)才能显示上下文管理栏。

 

在一个窗口中启动Page Builder!Page Builder一次不支持多个用户编辑。跨多个设备或浏览器选项卡同时在Page Builder中工作可能会导致保存对主题的更改时出现问题。

当您启动 Page Builder 时,商店实时主页的预览会显示在右侧,主题的可自定义设置会显示在左侧。用于更改预览屏幕类型、保存更改、撤消更改和发布主题的工具位于顶部。

顶部的设备图标显示页面在不同设备(台式机、平板电脑和手机/移动设备)上的显示方式。对于平板电脑和手机,再次单击图标可在垂直和水平之间切换其方向。单击预览折叠左侧的导航,这样您就可以看到您的更改在全屏宽度上的显示效果。在预览模式下,您可以像在店面中一样导航您的网站,因此如果您想查看您的样式更改在特定页面上的外观,它会很有用。

进行更改时,请使用右上角的按钮立即将它们应用到您的商店或保存以备后用。

  • 保存 — 保存您当前的更改。
  • 发布 — 将当前保存的更改发布到您的实时店面。如果您正在自定义非活动主题,这将使其成为活动主题。
  • 应用更新 — 单击自定义更新以预览活动主题的更新时出现。单击以应用更新。
  • 用作活动主题 — 在商店启动之前编辑非活动主题时出现。单击以使其成为活动主题并发布您的更改。

您可以使用左上角的“页面”下拉菜单创建新网页或跳转到现有网页。

您还可以通过切换到预览并以与在店面相同的方式导航到该网页来查找网页。当以店主身份浏览店面时,上下文管理栏可用于在页面构建器中打开网页(请参阅使用页面构建器)。

沿着屏幕的左边缘是按钮:

主题风格

启动 Page Builder 时,主题样式菜单会出现在预览区域的左侧。您可以在此处自定义多个主题设计元素(如页眉、徽标、导航和页脚)的属性(如颜色、字体和文本大小)。您还可以关闭/打开其他设计元素。

主题元素根据它们出现在店面的位置(如主页或结帐页面)或元素的类型(如按钮或图标)进行分组。实际的部分及其名称可能因主题而异。

有关我们默认 Cornerstone 主题的主题样式的详细信息,请参阅Cornerstone Theme Manual

有关 Cornerstone 以外主题的主题样式的更多信息,您需要参考主题开发人员的文档或直接联系开发人员。

工作区

可以拖动主题样式的窗口并调整其大小,以便更好地查看特定元素。使用顶部的预览按钮折叠左侧导航,以便您可以看到全宽的页面。

编辑主题文件

在这里,您可以通过直接编辑其基础模板文件来修改您的主题。

除非您知道自己在做什么,否则我们不建议您编辑主题文件。如果您想了解更多信息,请参阅我们的 Stencil 开发人员文档。
请注意,BigCommerce 无法为使用编辑主题文件修改的主题提供任何支持。

恢复原始主题样式

使用它可以将主题样式重置为其原始默认值。

添加小部件

Page Builder 让您可以轻松地将内容(如文本、图像、横幅、视频和按钮)添加到您的店面。我们将这些内容块称为“小部件”。小部件可以添加到您商店的多个页面,包括主页、产品页面、类别页面、品牌页面、网页、博客文章、搜索结果页面和购物车页面。根据您的主题,您可能需要先更新您的主题或编辑相应的模板文件。

要添加小部件,请将其从左侧的 Page Builder 菜单中拖放到任何预设区域中。

在页面上放置新小部件后,它会出现在右侧的设计区域中,并且页面构建器菜单会更新以显示小部件的可配置设置。对于带有文本的小部件,您将直接在页面上编辑文本。小部件的可用样式设置因所选类型而异。

您可以通过将它们拖动到现有小部件的上方或下方来堆叠其他小部件。

 

你可知道?开发人员可以使用Widget Builder在Page Builder之外创建、编辑和预览自定义店面小部件。有关此工具的更多信息,请参阅开发中心

图层

此工具可帮助您查看现有小部件在当前页面上的组织方式。它列出了页面上所有可用小部件区域的标题。

在图层菜单中,您可以拖放布局和小部件以更改它们在页面上的排列位置。单击单个布局、列或小部件将在左侧显示其相关设置。

布局小部件

此小部件用于创建一个分段区域,您可以在其中放置其他小部件。例如,如果您想在一行中排列 3 张图像,您将首先添加一个具有 3 列的布局小部件,然后为每列添加一个图像小部件。有单独的设置来控制整个布局和每个单独列的样式。

当您在页面上放置其他小部件(如图像或横幅)时,它们已经“包裹”在布局和列中。如果您删除一个小部件,您还需要删除与其关联的布局和列。

布局

  • 名称 — 小部件名称仅在内部使用,不会出现在店面中。它在图层导航中用于帮助您识别小部件在页面上的排列方式。
  • — 布局小部件可以从 1 列分割到 6 列。
  • 列布局 — 这允许您相对于相邻列调整每列的大小。
  • 边距 — 边距是布局边框之外的空间量(以像素为单位)。
  • 内边距 — 内边距是布局边框内的空间量(以像素为单位)。

布局背景

  • 背景 — 为整个布局指定纯色或图像背景。
  • Image Fit — Fill 将调整图像的大小以“填充”布局的整个区域。Fit 将调整图像的大小,使整个图像“适合”布局中而不会被截断。
  • 图像不透明度 — 调整背景图像的不透明度。这可以产生“半透明”效果。
  • 图像对齐 — 指定背景图像应如何在布局中水平和垂直对齐。

布局边框

  • 边框样式 — 在实线、虚线或虚线边框之间进行选择。
  • 边框颜色 — 选择边框颜色。
  • 边框粗细 — 以像素为单位设置边框粗细。

您还可以调整布局小部件中每个单独列的对齐方式、边距、填充、背景和边框样式。单击列以显示其列菜单。

文本小部件

此小部件将文本块添加到页面。

  • 文本样式 — 如果设置为“自定义”,您可以为该单独的小部件指定文本的自定义字体系列、粗细、大小和文本颜色。如果设置为 Theme Default,文本将使用默认的全局主题样式作为正文文本。
  • 对齐 — 设置文本块的水平对齐方式。
  • 边距 — 边距是文本块外边缘的空间量(以像素为单位)。
  • 填充 — 填充是文本块内边缘的空间量(以像素为单位)。

图像小部件

此小部件将图像添加到页面。

  • 上传图像 — 从图像管理器、您的设备或通过 URL 上传图像。
  • 图片链接 — 如果您希望图片链接到另一个页面,请选择链接到 URL。
  • 替代文本 — 为您的图像提供替代文本,以提高可访问性和搜索优化。

图片

  • 图像高度 — 如果设置为自动,小部件将自动调整大小以适应图像文件的完整大小。如果设置为自定义,您可以指定图像的最大高度(以像素为单位)。
  • 图像适合 — 填充到框将调整图像大小以“填充”小部件的整个区域。适合框将调整图像的大小,以便整个图像“适合”在小部件内而不会被切断。
  • 图像视差 — 当用户上下滚动页面时,图像位置保持不变,创建“分层”效果。Image fit必须设置为 Fill to box 才能启用Image parallax
  • 图像不透明度 — 调整图像的不透明度。这可以产生“半透明”效果。
  • 图像对齐 — 指定图像应如何在小部件内水平和垂直对齐。
  • 边距 — 边距是图像边界外的空间量(以像素为单位)。
  • 填充 — 填充是图像边界内的空间量(以像素为单位)。

图像边框

  • 正常/悬停 — 如果选择正常,则始终显示图像的边框。如果选择了悬停,则仅当访问者将鼠标悬停在其上时才会显示边框。这可以用作向购物者提供图像是链接/“可点击”的视觉提示。
  • 边框颜色 — 指定图像的边框颜色。
  • 边框样式 — 选择无、实线、虚线、虚线、双线、凹槽或脊线。
  • 边框粗细 — 指定图像的边框粗细。

英雄横幅小部件

此小部件添加带有可配置背景图像、标题、描述和按钮的横幅。

横幅

  • 横幅链接 — 输入点击该横幅时应链接到的 URL(如产品、类别或品牌页面)。
  • 内容对齐 — 设置标题、描述和按钮的对齐方式。
  • 图像适合 — 填充到框将调整图像大小以“填充”横幅的整个区域。适合框将调整图像的大小,使整个图像“适合”在横幅内而不会被截断。
  • 图像视差 — 当用户上下滚动页面时,背景图像位置保持不变,创建“分层”效果。
  • 图像对齐 — 指定背景图像应如何在横幅内水平和垂直对齐。
  • 图像不透明度 — 调整背景图像的不透明度。这可以产生“半透明”效果。

文本

  • 标题 — 设置横幅标题的可见性。
  • 标题样式 — 如果设置为自定义,您可以指定横幅标题的自定义字体系列、粗细和大小。如果设置为 Theme Default,标题将使用默认的全局主题样式。
  • 说明 — 设置横幅说明的可见性。
  • 描述样式 — 如果设置为自定义,您可以指定横幅描述的自定义字体系列、粗细和大小。如果设置为 Theme Default,描述将使用默认的全局主题样式。
  • 文本颜色 — 指定标题和描述文本的颜色。
  • 文本颜色(移动设备)— 指定移动设备上标题和描述文本的颜色。

按钮

  • 按钮 — 设置横幅按钮的可见性。
  • 按钮字体 — 如果设置为自定义,您可以为横幅按钮指定自定义字体系列。如果设置为 Theme Default,按钮将使用默认的全局主题样式。
  • 按钮样式 — 选择圆形、方形或药丸。
  • 按钮颜色 — 指定按钮颜色。
  • 按钮颜色(移动设备)— 指定移动设备上的按钮颜色。
  • 按钮文本颜色 — 指定按钮文本颜色。
  • 按钮文本颜色(移动设备)— 指定移动设备上的按钮文本颜色。

轮播小部件

这个小部件添加了一个轮播(有时称为“幻灯片”),允许客户循环浏览多个不同的图像。这可能是优化页面上可用空间的好方法,因此您可以以视觉上有趣的方式展示多个不同的促销、类别、产品或品牌。

旋转木马

在这里,您将定义轮播将拥有的幻灯片数量及其顺序。

滑动

单击轮播下的每张幻灯片(见上文)以打开其可配置设置。您还可以使用 < 和 > 按钮循环浏览幻灯片。

  • 标题 — 输入此幻灯片的第一行文本。
  • 说明 — 输入此幻灯片中间文本行的文本。
  • 按钮标签和链接 — 输入此幻灯片底部文本链接的标签文本和 URL。

如果您不想为幻灯片使用标题、说明或按钮,请将这些字段留空。

幻灯片 | 盒子

  • 图片 URL — 上传新图片、使用已上传的图片或为此幻灯片指定图片 URL。
  • 高度 (px) — 指定此幻灯片图像的高度(以像素为单位)。
  • 图像适合 — 填充容器将调整图像大小以“填充”幻灯片的整个区域。Fit to Container 将调整图像的大小,使整个图像“适合”在幻灯片区域内而不会被截断。
  • 图像对齐 — 指定图像应如何在幻灯片中水平和垂直对齐。
  • 边距 — 边距是图像边界外的空间量(以像素为单位)。
  • 填充 — 填充图像边框内的空间量(以像素为单位)。

幻灯片 | 标题和副标题

  • 内容对齐 — 指定标题、描述和按钮标签应如何在幻灯片中水平和垂直对齐。
  • 字体系列 — 指定标题和描述的字体。
  • 字体粗细 — 指定标题、描述和按钮标签文本的粗细。
  • 标题大小 — 指定顶部标题文本的大小。
  • 字幕大小 — 指定中间描述文本的大小。
  • 文本颜色 — 指定底部按钮标签文本的大小。

幻灯片 | 按钮

  • 按钮样式 — 在简单文本链接样式或按钮之间进行选择。
  • 字体大小 — 指定按钮标签文本的大小。
  • 文本颜色 — 指定按钮标签文本颜色。

仅按钮设置

  • 边框颜色 — 指定按钮边框颜色。
  • 背景颜色 — 指定按钮背景颜色。
  • 背景悬停颜色 — 指定按钮背景悬停颜色。
  • 背景文本悬停颜色 — 指定按钮文本悬停颜色。
  • 背景点击颜色 — 指定按钮背景点击颜色。
  • 边距 — 边距是按钮边框外的空间量(以像素为单位)。
  • 填充 — 填充是按钮边框内的空间量(以像素为单位)。
  • 边框 — 指定按钮边框粗细。
  • 边框半径 — 指定按钮边框“圆度”。

视频小部件

这个小部件嵌入了 YouTube 或 Vimeo。

  • 视频 URL — 输入 YouTube 或 Vimeo 视频的 URL。
  • 自动播放视频 — 设置此视频是否应在访问页面时自动播放。
  • 循环视频 — 设置此视频是否应在到达结尾时从头开始播放。
  • 显示视频控件 — 设置是否应向用户显示视频控件(如播放按钮和音量控件)。 

产品小部件

此小部件展示您目录中的特定产品。

 

警告!目前,产品产品集小部件不尊重包含税设置的税设置。这意味着如果您输入了含税的产品价格,这些小部件中的价格可能无法正确显示。

产品

通过搜索产品名称或SKU来选择产品。

元素

  • 内容对齐 — 指定名称和价格等产品详细信息应如何在小部件中水平对齐。

可以使用👁眼睛按钮切换以下每个元素的可见性。

产品图片

  • 图像适合 — 缩放以填充框将调整图像大小以“填充”小部件的整个区域。缩放以适合框将调整图像大小,以便整个图像“适合”小部件区域而不会被截断。

品牌

  • 文本 — 如果选择了默认主题,则该元素将使用该元素的主题默认样式。如果选择自定义,您将能够自定义此特定元素的样式方面。
  • 文本颜色 — 指定此元素的颜色。

产品名称

  • 文本 — 如果选择了默认主题,则该元素将使用该元素的主题默认样式。如果选择自定义,您将能够自定义此特定元素的样式方面。
  • 文本颜色 — 指定此元素的颜色。

价格

  • 文本 — 如果选择了默认主题,则该元素将使用该元素的主题默认样式。如果选择自定义,您将能够自定义此特定元素的样式方面。
  • 文本颜色 — 指定此元素的颜色。

产品评级

  • 星形颜色(填充)— 指定填充星形的颜色。(请注意,如果产品没有评分,则所有星号都将为空。在这种情况下,更改此颜色不会反映在预览窗格中)。
  • 星形颜色(空)— 指定空星的颜色。
  • 评论文本颜色 — 在星级旁边的括号中指定评论计数文本的颜色。

产品集小部件

使用此小部件在轮播布局中创建自定义产品列表。客户能够在产品之间导航。

 

警告!目前,产品产品集小部件不尊重包含税设置的税设置。这意味着如果您输入了含税的产品价格,这些小部件中的价格可能无法正确显示。

添加产品 — 在您的目录中搜索要包含在此集合中的产品。

元素

内容对齐 — 指定名称和价格等产品详细信息应如何在集合中的每个产品下方水平对齐。

每张幻灯片的产品 — 指定一次显示多少产品。如果您的产品多于每张幻灯片显示的数量,购物者可以使用箭头左右滚动浏览产品。

可以使用👁眼睛按钮切换以下每个元素的可见性。

产品图片

  • 图像适合 — 缩放以填充框将调整图像大小以“填充”小部件的整个区域。

品牌

  • 文本 — 如果选择了默认主题,则该元素将使用该元素的主题默认样式。如果选择自定义,您将能够自定义此特定元素的样式方面。
  • 文本颜色 — 指定此元素的颜色。

产品名称

  • 文本 — 如果选择了默认主题,则该元素将使用该元素的主题默认样式。如果选择自定义,您将能够自定义此特定元素的样式方面。
  • 文本颜色 — 指定此元素的颜色。

价格

  • 文本 — 如果选择了默认主题,则该元素将使用该元素的主题默认样式。如果选择自定义,您将能够自定义此特定元素的样式方面。
  • 文本颜色 — 指定此元素的颜色。

产品评级

  • 星形颜色(填充)— 指定填充星形的颜色。(请注意,如果产品没有评分,则所有星号都将为空。在这种情况下,更改此颜色不会反映在预览窗格中)。
  • 星形颜色(空)— 指定空星的颜色。
  • 评论文本颜色 — 在星级旁边的括号中指定评论计数文本的颜色。

按钮

  • 按钮形状 — 指定按钮形状(圆形、方形或药丸)。
  • 按钮颜色 — 指定按钮颜色。
  • 按钮文本颜色 — 指定按钮文本颜色。
  • 按钮 — 指定购物者单击或点击此按钮时的行为(添加到购物车、添加到愿望清单或转到产品页面)。

按钮小部件

这个小部件添加了一个简单的按钮。

  • 按钮标签 — 输入按钮的标签文本。
  • 按钮链接 — 输入按钮应链接到的 URL。

按钮标签

  • 字体系列 — 如果选择 Theme Default,按钮将使用主题的默认样式作为按钮文本。您还可以选择为此单个按钮指定字体。
  • 字体粗细 — 指定标题、描述和按钮标签文本的粗细。
  • 字体大小 — 指定按钮标签文本的大小。
  • 文本装饰 — 指定按钮标签文本是否应加下划线。

按钮外观

  • 切换按钮外观 — 如果未选中,这将删除按钮并仅显示按钮标签文本。

按钮样式

  • 边框 — 指定按钮边框粗细。
  • 边框半径 — 指定按钮边框“圆度”。
  • 按钮对齐 — 指定按钮应如何在页面上水平对齐。
  • 边距 — 边距是按钮边框外的空间量(以像素为单位)。
  • 填充 — 填充按钮边框内的空间量(以像素为单位)。
  • 背景颜色 — 指定按钮背景颜色。
  • 文本颜色 — 指定按钮标签文本颜色。
  • 边框颜色 — 指定按钮边框颜色。
  • 背景颜色(悬停)— 指定按钮背景悬停颜色。
  • 文本颜色(悬停)— 指定按钮标签文本悬停颜色。
  • 边框颜色(悬停)— 指定按钮边框悬停颜色。

HTML小部件

您可以使用此小部件将任意 HTML 输入到页面中。无效的 HTML 代码可能会导致预览窗格出现问题。

  • 展开 HTML 编辑器 — 这会使编辑器全屏显示。
  • 保存 HTML — 保存当前代码并更新预览窗格。

间隔小部件

使用它可以在页面元素之间添加最多 200 像素的额外垂直空间。

分隔线小部件

这增加了一条简单的水平线。

  • 线条颜色 — 指定分隔线颜色。
  • 线条样式 — 指定实线、虚线或点线样式。
  • 线宽 — 指定线宽。
  • 线条粗细 — 指定线条粗细。
  • 框高 — 这是分隔线的顶部和底部边距的组合。
  • 对齐 — 指定分隔线在页面上的水平和垂直对齐方式。

常问问题

如何在Page Builder中打开产品/类别/品牌?

在产品、类别或品牌列表中,单击右侧的操作图标,然后选择在页面构建器中查看

如何从商店页脚中删除“由BigCommerce提供支持”?

在页面构建器中,打开主题样式菜单并单击页眉和页脚选项卡。在Display settings下,取消选中Show “Powered by BigCommerce“旁边的框。

完成后保存发布对店面的更改。请注意,此设置的位置和名称可能会因您商店的主题而异。

我可以使用多少个小部件?

每页最多可以有150个小部件。Page Builder使用小部件API,每个商店的小部件总数限制为10,000个。

小部件是否具有货币意识?

是的,产品和产品集小部件将尊重商店的默认货币,以及购物者选择的任何货币。他们将看到反映其活跃货币的定价。

我可以将Page Builder与其他页面一起使用吗?

根据您的主题,某些页面将具有已内置的小部件区域,因此它们可以与Page Builder一起使用。默认情况下未启用小部件的模板可以进行编辑以包含小部件区域。请参阅我们的开发文档中的小部件教程以了解如何执行此操作。

我可以添加一个出现在多个页面上的小部件吗?

是的,您可以使用全局区域添加出现在包含相同全局区域的每个页面上的小部件。在页面构建器中,全局区域显示为带有“全局区域”标签的紫色框。

Cornerstone 4.11及更高版本中,除了结帐外,每个页面都包含一个默认的全局区域。它位于类别菜单/导航下方。

其他主题支持全球区域,但它们包含的数量和页面可能有所不同;检查主题的文档或与开发人员联系以获取详细信息。

有关在主题模板中添加和删除全局区域的更多信息,请参阅 我们的开发中心文档中的区域部分。

除了PayPal,我还有其他付款按钮的付款方式吗?

是的,您也可以选择使用Venmo。查看您商店的购物者只会在他们在安装了Venmo的设备上查看您的商店时将Venmo视为可用选项,并且如果您使用的是PayPalBraintree支持的PayPal,则您已在BigCommerce控制面板中启用了它。

什么是小部件更新?

当小部件有可能改变其工作方式或在店面显示的更新时,页面构建器中的更新通知允许您“选择加入”小部件并在实际应用之前在页面构建器中预览它。这适用于本机和自定义小部件。

要预览小部件更新,请单击页面构建器中小部件的更新按钮。然后,您可以使用预览窗口查看更新后的小部件将如何影响您的店面。如果您满意并希望保留更改,可以单击保存或发布以确认更新。

如果您不想更新小部件,可以单击放弃。更新通知将继续显示在小部件上,直到启用然后保存。