合作机构：阿里云 / 腾讯云 / 亚马逊云 / DreamHost / NameSilo / INWX / GODADDY / 百度统计
PC网站设计器
页面与版块
每个页面均是由自上到下的一个个版块构成的，我们非常建议您在页面中使用多个版块并在版块中放置所需的内容及数据，这样您可以很便捷的调整版块的顺序。例如，若您使用自上而下的A、B、C三个版块，当您发现版块的内容展现顺序不合理时，可以打开视图模式调整版块顺序为A、C、B这种效果。
当然您也可以只使用一个版块，让其充满整个页面，所有的内容都放在这一个版块里。但是我们并不建议您这样使用。
如何视图中调整版块？
在左侧菜单中，选择“页面视图”，在打开的下级菜单中拖动调整版块顺序即可。
如何在页面中加入一个版块？
在页面中选中一个版块后，其上方和下方会出现“+”号，点击“+”则可在该版块的上方或下方插入一个新版块。
另，如果未选择任何版块，直接在左侧“添加版块”菜单中点击加入一个新版块的话，则该新版块默认放置在页面最顶部。
每个页面均默认放置了“公共头尾版块”，您可以在“页面设置”中开启/关闭，位置如下图所示：
“公共头尾版块”的内容是全站同步的，即您在任意一个页面中编辑“头部版块”或“尾部版块”时，所有开启了“头部版块”或“尾部版块”的页面，其“头部版块”或“尾部版块”的内容将同步发生变化。
公共头尾版块被选中时，呈现黄色边框，如下图所示：
如果您希望某个页面的头部或尾部的样式“特殊化”，区别于整站的头部或尾部，那么请关闭该页面的头部或尾部，自行添加新版块来进行设计即可。
普通版块放置在左侧“添加版块”菜单中，可根据实际需求选用，点选后将插入到页面相应位置，如下图所示：
普通版块分为“空白版块”与“成品版块”：
空白版块：可用于随意的放置“自由元素”，优点是可以任意自由设计，缺点是同步至手机版时需要重新进行排版的调整。
成品版块：官方提供的各类成品样式，优点是同步至手机版时可以自动适应排版，缺点是样式相对比较固定，可自定义性略低。
当您在编辑页面中某个版块时，如果希望该版块也被其他页面使用，则您可以将此版块设置为“全局版块”，之后在其他页面中再选择加入这个“全局版块”就可以了。
1. 如何将一个版块设置为“全局版块”？
选中版块后，在右上角菜单中点击“地球”标志，即可将此版块设置为全局版块。参见下图：
2. 如何将使用“全局版块”？
在左侧“添加版块”菜单中，选择“全局版块”类别，然后点击该版块即可在当前页面位置加入此版块。
当选中一个版块后，鼠标指针所在位置会出现一组按钮菜单，可设置版块的背景及版块的属性设置。如下图所示：
另外，您也可以在该版块右上角的菜单，对该版块进行相关的操作及设置。如下图所示：
概述
小程序设计器与PC网站设计器、手机网站设计器的交互差异较大，请认真了解。
① 系统LOGO：系统默认的logo标志，点击此处可返回“站点控制台”
② 页面切换：点击可下拉可查看当前所有的普通页面和系统页面、创建新的页面、删除页面、设置页面的基本信息、设置页面的SEO信息等，当点击某个页面的名称时，编辑器将打开此页面，并可以对其进行编辑。
③ 设计模式切换：可以便捷的切换PC网站设计器、手机网站设计器、小程序设计器，进入对该端的设计状态。
④ 撤销&重做：撤销之前的操作行为或重做之前的操作行为。
⑤ 功能按钮区：
【保存】为保存当前修改的内容；
【实时预览】使用AIPage提供的公用账号，在“真机”上进行浏览，以便更直观的感受效果；
【测试&发布】使用您自己的小程序账号进行测试预览及操作正式发布上线；
⑥ 菜单按钮区：
【添加版块】可选择使用系统内置的成品版块，拖拽方式放置入手机视图区域内，随后可在里面任意增删“元素”。
【添加组件】系统内置的功能组件，拖拽方式放置进入手机视图区域内，随后可进行编辑。
【视图结构】可查看当前页面内所有的版块，对其进行上下排序、隐藏、删除等操作。
【全局设置】可设置页面加载动效、顶部标题栏、底部导航栏及主题信息。
【授权信息】可在其内操作授权绑定您的百度智能小程序、微信小程序、支付宝小程序。
【更换模版】用于更换整站或当前页面的模版。
【素材管理】管理所有上传到站点上的素材文件。
【管理后台】点击可进入当前小程序的管理后台。
⑦ 设置菜单：可对已选中的版块或元素做快捷设置。
本系统的页面结构采用版块式结构，即自上到下是由一个个版块堆叠而成，小程序设计器“无”公共头尾部概念，所有版块均可在左侧的“页面视图”中查看并便捷的调整版块的上下排序。如下图所示：
版块和组件的添加方式为拖拽进入设计视图内，当手机视图内的“可添加区域”呈现蓝色“加深”状态时，松开鼠标的按键，该版块或组件即可置入完成。
组件中的自定义元素（自由元素）是拖拽进入设计视图内的，当点击自由元素时，其会呈现被选中的状态。按住鼠标按键拖动可摆放在页面内的任意位置。同时在选中状态下，右侧会出现属性面板，可对其进行详细的属性设置。如若修改自由元素的大小，可直接拖动自由元素边缘的小圆点调整大小。
