1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1...

21
1 目录 一、 响应式网站页面头部设置 ......................................................................................................... 2 1.LOGO 设置 .......................................................................................................................................... 2 2.添加页面,导航栏设置................................................................................................................... 3 3.添加统一的副头部........................................................................................................................... 5 二、 响应式网站页面内容设置 ......................................................................................................... 7 1.添加幻灯品片等元素操作............................................................................................................... 7 2.添加产品/文章/作品列元素操作 ................................................................................................... 9 3.行的设置......................................................................................................................................... 10 三、 响应式网站整体设置 ............................................................................................................... 11 1. 更改全局,颜色,字体 ............................................................................................................... 11 2.添加底板......................................................................................................................................... 12 3.页面侧边栏设置............................................................................................................................. 14 4.导航栏添加列表页......................................................................................................................... 17 5.添加表单......................................................................................................................................... 19 6.在页面添加元素导航菜单............................................................................................................. 21

Transcript of 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1...

Page 1: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

1

目录

一、 响应式网站页面头部设置 ......................................................................................................... 2

1.LOGO 设置 .......................................................................................................................................... 2

2.添加页面,导航栏设置 ................................................................................................................... 3

3.添加统一的副头部 ........................................................................................................................... 5

二、 响应式网站页面内容设置 ......................................................................................................... 7

1.添加幻灯品片等元素操作 ............................................................................................................... 7

2.添加产品/文章/作品列元素操作 ................................................................................................... 9

3.行的设置 ......................................................................................................................................... 10

三、 响应式网站整体设置 ............................................................................................................... 11

1. 更改全局,颜色,字体 ............................................................................................................... 11

2.添加底板 ......................................................................................................................................... 12

3.页面侧边栏设置 ............................................................................................................................. 14

4.导航栏添加列表页 ......................................................................................................................... 17

5.添加表单 ......................................................................................................................................... 19

6.在页面添加元素导航菜单 ............................................................................................................. 21

Page 2: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

2

一、 响应式网站页面头部设置

1.logo 设置

1.1 进入可视化编辑页面

1.2 开始进行编辑,设置 logo,上传 logo

1.3 先勾选 logo 是否要链接首页,然后点击“浏览”

Page 3: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

3

2.添加页面,导航栏设置

2.1 更改页面名称(首页),按保存更改

2.2 添加页面

Page 4: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

4

2.3 设置导航栏

2.4 设置导航栏菜单位置,颜色,大小

2.5 同时设置头部布局,颜色,大小,图像等

Page 5: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

5

3.添加统一的副头部

在全局设置里面,把勾选隐藏副头部去掉,然后上传图片,调整高度(内边距)等

Page 6: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

6

Page 7: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

7

二、 响应式网站页面内容设置

1.添加幻灯品片等元素操作

1.1 完成导航栏这一区域,接来了进行添加元素幻灯片

编辑幻灯片元素

Page 8: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

8

1.2 更改行设置

添加新的区域,添加行元素

Page 9: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

9

1.3 添加文本,设置文本的大小,位置,动画

2.添加产品/文章/作品列元素操作

接下来是产品/文章/作品列,首先需要到后台进行产品/文章/作品添加,之后就添加新的列

Page 10: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

10

根据需要找到列表里面的元素

3.行的设置

3.1 新的区域编辑时候需要修改行的颜色时候,在行设置,这个区域需要对背景颜色进行设置

3.2 进行行的布局设置

Page 11: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

11

可以根据需要进行 12 份比进行设置,不过相加要等于 1。例如:?/12+?/12,

构架好之后就可以添加元素

三、 响应式网站整体设置

1.更改全局,颜色,字体

Page 12: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

12

2.添加底板

2.1 接下来添加底板这一区域,首先在左上角添加新的底板

2.2 添加底板名称,放置地点

Page 13: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

13

2.3 点击已经添加好的底板,就可以进入编辑

2.4 编辑好之后,回到首页在底部左下角,点击添加底板,选择保存

Page 14: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

14

2.5 对底部进行设置

3.页面侧边栏设置

Page 15: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

15

Page 16: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

16

添加侧边栏与添加底板是相同操作,只是添加时把放置地点换成侧边栏

Page 17: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

17

4.导航栏添加列表页

4.1 根据需求可以在菜单设置里面,把产品/作品/文章列表页放入导航栏

Page 18: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

18

4.2 调整产品/作品/文章列表页,详情页,在底板的系统自带模板进行设置

Page 19: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

19

5.添加表单

5.1 在左上角这一区域,添加表单,设置好表单名称,点击已做好的表单进入编辑

Page 20: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

20

5.2 编辑好表单,回到页面添加表单元素,设置选中需要的表单

Page 21: 1.2 logo · 2019-02-23 · 2 一、 响应式网站页面头部设置 1.logo 设置 1.1 进入可视化编辑页面 1.2 开始进行编辑,设置logo,上传logo 1.3 先勾选logo

21

6.在页面添加元素导航菜单

先在菜单设置创建新菜单,然后回到页面设置导航菜单