您当前位置:产品文档 >企业服务 >智能建站 >手机网站设计器 >浏览文章

手机版页面制作

 

手机版网站的页面与PC版网站的页面实际上是同一个页面。您可以理解为当您在创建一个PC网页时,其在被手机设备浏览时,实际上依然是这个物理页面,仅仅是样式与PC网站不同而已。

因此常规情况下,当您把PC网站制作完成后,进入手机网站的设计模式下,无需重新建立页面。而是将已经建好的PC网站页面在手机网站设计模式下进行重新调整排版,以便更好的适应手机设备的访问体验。

页面同步

同步机制:目前我们支持PC版页面的内容向手机版页面“单向同步”。因此,建议您在做好PC版页面的内容后再制作手机版页面。

同步操作,见下图所示:

 1.png

注意,每个页面均需要进行同步。

同步后,系统内置的“成品版块”一般会自动排列适应手机端的布局。而通过自定义元素构建的版块,则会先自动排列一下所有的元素,您需要进行手工的调整。

这个过程中,您可以根据需要随时添加、删除、修改版块,所有的操作对PC版页面不会有任何影响。

版块操作

我们提供了一个快捷的面板,您可以使用它对版块进行设置操作。如下图所示:

2.png 

底部导航

如果您想开启页面底部的悬浮导航栏,可以通过“导航-底部导航”进行开启和自定义项目。如下图所示:

3.png 

分享设置

您可以设置当前页面分享到社交工具中的样式,自定义分享的图片、标题、描述语。如下图所示:

4.png 

其他操作

其他的设计功能跟PC版页面类似,您可以使用左侧菜单进行操作。

 


概述

 

界面概览

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

1.png 

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

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

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

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

⑤ 功能按钮区

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

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

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

⑥ 菜单按钮区:

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

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

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

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

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

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

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

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

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

实操说明

页面整体结构

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

2.png 

添加版块&组件

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

3.png 

自定义元素设置

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

4.png