概述

界面概览

① 系统LOGO：系统默认的logo标志，点击此处可返回“站点控制台”

② 语言切换：如果您的站点开启了多种语言，可在此切换语言模式来设计不同语种的站点样式

③ 页面切换：点击可下拉可查看当前所有的普通页面和系统页面、创建新的页面、删除页面、设置页面的基本信息、设置页面的SEO信息等，当点击某个页面的名称时，编辑器将打开此页面，并可以对其进行编辑。

④ 设计模式切换：可以便捷的切换PC网站设计器、手机网站设计器、小程序设计器，进入对该端的设计状态。

⑤ 撤销&重做：撤销之前的操作行为或重做之前的操作行为。

⑥ 功能按钮区：

【保存】为保存当前修改的内容（系统也会定时自动保存）；

【预览】为预览实际的浏览效果；

【发布】为将站点内容正式发布上线（需要先绑定域名）；

⑦ 菜单按钮区：

【添加版块】内置空白版块及成品版块，可任意选择使用。其中，成品版块是响应式构造可在移动网站端自动适配展示效果。空白版块和成品版块均可添加“元素”。

【添加元素】内置多种基本元素组件可以拖拽方式放置进入页面，随后选中该元素设置其大小和属性。

【背景设置】用于设置当前页面的背景。

【页面视图】可查看当前页面内所有的版块，对其进行上下排序、隐藏、删除等操作。

【页面设置】设置当前页面的一些基本属性。

【更换模版】用于更换整站或当前页面的模版。

【素材管理】管理所有上传到站点上的素材文件。

【管理后台】点击可进入当前站点的管理后台。

⑧ 版块添加按钮：点击“+”按钮会出现版块选择浮窗，点击其中某个版块后，该版块将自动插入“+”所在的位置。

⑨ 版块设置菜单：可对当前选中的版块做调整排序、更换风格、复制版块、设置属性等操作。如果点击其中的“设为全局版块”，则该版块会进入“添加版块-全局版块”中，当您处于其他页面时可直接引用这个全局版块，全局版块可以实现其在所有页面中均保持一致样式。

⑩ 版块属性菜单：当您在空白版块的空白区域点击时（未选中任何元素），会自动出现此快捷菜单，用于设置当前版块的背景和属性。

? 版块高度调整：拖动此图标可直接调整版块的高度。

实操说明

页面整体结构

本系统的页面结构采用版块式结构，即自上到下是由一个个版块堆叠而成，最顶部为“页面头部”版块（可在页面设置中关闭），最底部为“页面尾部”版块（可在页面设置中关闭），所有版块均可在左侧的“页面视图”中查看并便捷的调整版块的上下排序。如下图所示：

页面宽度设置

页面布局中，布局风格可选“背景通栏”（宽屏网站风格）或“box风格”（窄屏网站风格），内容区最大宽度设置项在宽屏状态下可用作为页面核心内容放置的参考区域（参考线形式展现，建议设置值为1200px），在窄屏状态下该宽度值即为所有页面内版块的宽度。如下图所示：

如何添加版块

注意版块的添加方式并非拖拽进入设计视图内，而是点击选用。如果您是直接打开了“添加版块”菜单，并且点击添加了其中的某个版块使用，则该版块会添加至页面在，并且成为页面最顶部的版块。如果您是在页面内选中某个版块后，点击其上方或下方的“+”号后选择添加了版块，则该版块会添加在您选择的版块的上方或下方。

公共头尾版块

“页面头部”和“页面尾部”版块为公共版块，当您在某个页面编辑“页面头部”或“页面尾部”版块时，所有开启“页面头部”或“页面尾部”版块的页面的头部和尾部均会变化。如果您在某个页面不期望使用“公共”的“页面头部”或“页面尾部”，可以在左侧功能菜单“页面设置-页面布局”中关闭“显示公共头部”或关闭“显示公共尾部”的开关。如下图所示：

自由元素设置

自由元素是拖拽进入设计视图内的，当点击自由元素时，其会呈现被选中的状态。按住鼠标按键拖动可摆放在页面内的任意位置。同时在选中状态下，其顶部会有多项功能菜单，点击菜单内的功能项目可以唤出更为强大的属性面板，对其进行更为精细的设置。如若修改自由元素的大小，可直接拖动自由元素边缘的小圆点调整大小。

概述

界面概览

小程序设计器与PC网站设计器、手机网站设计器的交互差异较大，请认真了解。

① 系统LOGO：系统默认的logo标志，点击此处可返回“站点控制台”

② 页面切换：点击可下拉可查看当前所有的普通页面和系统页面、创建新的页面、删除页面、设置页面的基本信息、设置页面的SEO信息等，当点击某个页面的名称时，编辑器将打开此页面，并可以对其进行编辑。

③ 设计模式切换：可以便捷的切换PC网站设计器、手机网站设计器、小程序设计器，进入对该端的设计状态。

④ 撤销&重做：撤销之前的操作行为或重做之前的操作行为。

⑤ 功能按钮区：

【保存】为保存当前修改的内容；

【实时预览】使用AIPage提供的公用账号，在“真机”上进行浏览，以便更直观的感受效果；

【测试&发布】使用您自己的小程序账号进行测试预览及操作正式发布上线；

⑥ 菜单按钮区：

【添加版块】可选择使用系统内置的成品版块，拖拽方式放置入手机视图区域内，随后可在里面任意增删“元素”。

【添加组件】系统内置的功能组件，拖拽方式放置进入手机视图区域内，随后可进行编辑。

【视图结构】可查看当前页面内所有的版块，对其进行上下排序、隐藏、删除等操作。

【全局设置】可设置页面加载动效、顶部标题栏、底部导航栏及主题信息。

【授权信息】可在其内操作授权绑定您的百度智能小程序、微信小程序、支付宝小程序。

【更换模版】用于更换整站或当前页面的模版。

【素材管理】管理所有上传到站点上的素材文件。

【管理后台】点击可进入当前小程序的管理后台。

⑦ 设置菜单：可对已选中的版块或元素做快捷设置。

实操说明

页面整体结构

本系统的页面结构采用版块式结构，即自上到下是由一个个版块堆叠而成，小程序设计器“无”公共头尾部概念，所有版块均可在左侧的“页面视图”中查看并便捷的调整版块的上下排序。如下图所示：

添加版块&组件

版块和组件的添加方式为拖拽进入设计视图内，当手机视图内的“可添加区域”呈现蓝色“加深”状态时，松开鼠标的按键，该版块或组件即可置入完成。

自定义元素设置

组件中的自定义元素（自由元素）是拖拽进入设计视图内的，当点击自由元素时，其会呈现被选中的状态。按住鼠标按键拖动可摆放在页面内的任意位置。同时在选中状态下，右侧会出现属性面板，可对其进行详细的属性设置。如若修改自由元素的大小，可直接拖动自由元素边缘的小圆点调整大小。