了解Website Builder

第一次使用 Website Builder可能有些陌生，本文我们一起了解下Website Builder的界面和功能。

主要内容

A. 怎么进入Website Builder？
B. Website Builder界面
C. 标题栏
D. 前端
E. 侧边栏设置
F. 页面层
G. 添加模块
H. 快捷栏
I. 样式设置

A. 怎么进入Website Builder？

您可以在创建产品或创建新页面进入Website Builder。

创建产品

ShopBase Creator后台前往 产品展示（Products)，点击 Add product 。


产品创建成功后，点击 Design sales page 开始构建网站。


选择一个模板，点击 Apply。


参考 Web Builder 如何自定义页面模板。

创建页面

ShopBase Creator后台前往 网站（Website） > 页面（Pages），点击 新增页面（Add new page）。


Look & Feels > 定制（Customize）。


您也可以在 页面 列表区旁边的 定制 按钮。


选择一个模板，点击 Apply。


参考 Web Builder 如何自定义页面模板。

B. Website Builder界面

Website Builder 布局分为三部分。

标题栏 (header bar) 是在屏幕顶部的组件，包括标题，文件和左右的功能按钮。


侧边栏 (side bar) 显示网站所有模块的布局设置。


前端 (web front) 展示网站前端预览。可以点击拖拽调整模块的位置。

C. 标题栏

标题栏* 的选项卡和按钮。


Exit: 关闭 Website Builder，返回后台页面。
Layer button: 打开页面层 (layer) 模块。.
Style button: 打开样式设置 (styling settings) 模块。
Insert button: 打开添加网站要素(insert) 模块
正在编辑的网页 名称。
保存状态。
取消还原按钮 (undo)。
重做按钮 (redo)。
预览按钮: 预览网页。
切换设备按钮: 切换电脑端和移动端的预览。
保存按钮。
首选项按钮: 高级设置。

D. 前端

这里显示网站页面的预览，有电脑端和移动端。

您可以点击拖拽每个模块进行排位。


显示在电脑端和移动端，所有内容都会同步，不过您可以可以自定义颜色，字体，大小等。

E. 侧边栏设置

侧边栏包括左边栏的、页面层、添加要素的设置。您可以设置每个选项 (section)，行 (row)，列 (column)和块 (block)。


参考：

Website Builder如何设置选项 (section)
Website Builder如何设置模块 (block)

F. 页面层

Layer 面板包括：

每页面层有这些要素：*Section (选项) > Row (行) > Column (列) > Block (块)**。
每页面层有子页面层，可以自定义。
页面层的排序是前端的排序显示。您可以用鼠标拖拉换位置。


当您添加新要素到网站，它会显示在页面层面板。

参考：

Website Builder如何设置选项 (section)
Website Builder如何设置模块 (block)

G. 添加模块

添加模块面板 让您添加多个选项和模块。

您可以从素材库选择选项，模块。
选项和模块保存后也会在这里显示，可快速使用。

H. 快捷栏

您可以使用快捷栏快速修改网页的要素。不同的要素属性会展示不同的快捷栏，以下是常见的一条快捷栏。


调整上下位置。
隐藏已选要素。
复制要素。
保存到素材库。
删除已选要素。

I. 样式设置

样式设置包括网页样式，页面样式，用户可容易设置颜色，字体，按钮风格。

如果您想要设计一个独特的风格，可以使用页面样式 (page style)。这个是自定义一个页面，不影响网站界面。

设置好，您也可以保存，方便以后使用。

参考:

了解Website Builder的样式设置。

更新于： 03/01/2023