多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
banner大图就是下图红框部分,由一张banner图片、图片标题、图片描述以及图片按钮组成,具体介绍看下图: ![1691725810189694.png](https://www.ecoxiu.com/images/202308/1691725810189694.png "1691725810189694.png") ## **一、管理入口** 操作路径:网站后台--基础设置--Banner管理; ![1691724413947580.png](https://www.ecoxiu.com/images/202308/1691724413947580.png "1691724413947580.png") ## **二、添加Banner** 点击新建可以增加banner ![1691724923302784.png](https://www.ecoxiu.com/images/202308/1691724923302784.png "1691724923302784.png") 点击新建后,会跳转到新建banner页面 ![1691724974181817.png](https://www.ecoxiu.com/images/202308/1691724974181817.png "1691724974181817.png") ### **2.1 名称** banner标题; ### **2.2 别名** 自动生成,无需填写; ### **2.3 状态** 选择发布,不发布前台不显示; ### **2.4 分类** 一般默认分类就可以; ### **2.5 图片** banner显示大图,可通过图片上传组件,自定义上传Banner图片; **【注意】** Banner图片的尺寸需根据使用的网站模板而定,一般建议1920px\*高度自定义; 同一栏目(页面)上传多张图片展示时,建议Banner图片尺寸保存一致; Banner图片的文件大小应尽量控制在300kb以内,过大的图片文件会严重影响网站访问速度; 如无艺术字体展示效果需要,建议不要将文字直接设计在图片上,而是使用系统自带的文字展示功能添加文字,具体可参考图片标题及图片描述文字设置部分。 ### **2.6 Banner高度与尺寸** 网站模板采用响应式布局,可按浏览设备终端自适应显示,一般是根据浏览器屏幕宽度自适应缩放Banner宽度,因此建议Banner图片的宽度设计为1920px,手机端图片宽度设计为750px左右,而图片高度可以根据自己的需要设计,但需要保持所有相同展示端图片尺寸一致。 图片上传后,还可以在Banner管理页面和添加编辑页面设置电脑、平板、手机端的显示高度,如下图,但无特殊需要,此处设置建议为0,让系统自适应高端显示Banner。 如设置高度,则同一栏目(页面)所有的Banner图片同一设备端高度需保持一致。 ![1691741892295960.png](https://www.ecoxiu.com/images/202308/1691741892295960.png "1691741892295960.png") ### **2.7 图片标题** 每张Banner图片都支持自定义图片标题,并可设置标题的颜色和文字大小。 添加或编辑Banner时,可自定义设置图片标题、标题颜色、字体大小等,如图,留空则不显示。 ![1691742254761658.png](https://www.ecoxiu.com/images/202308/1691742254761658.png "1691742254761658.png") 展示效果如下图: ![1691742334111429.png](https://www.ecoxiu.com/images/202308/1691742334111429.png "1691742334111429.png") **【注意】** 此功能需要网站模板支持,部分模板制作者可能并未兼容此功能; 字体大小和颜色留空时,网站前台将使用网站模板默认参数; 字体大小可以自定义输入数字,例如14,则表示字体大小是14px(14像素); 字体颜色可在颜色选择器中选择,也可以直接输入十六进制颜色代码,如“#000000”; 图片标题显示位置可自定义设置,具体参考:2.12。 ### **2.8 图片描述** 图片标题的补充,功能与图片标题一致,可参考2.7章节,图片标题和图片描述可以独立存在,也可以全部填写。 添加或编辑Banner时,可自定义设置图片描述、文字颜色、字体大小等,如图,留空则不显示。 ![1691742544824144.png](https://www.ecoxiu.com/images/202308/1691742544824144.png "1691742544824144.png") 展示效果如图 ![1691742555602574.png](https://www.ecoxiu.com/images/202308/1691742555602574.png "1691742555602574.png") **【注意】** 此功能需要网站模板支持,部分模板制作者可能并未兼容此功能; 字体大小和颜色留空时,网站前台将使用网站模板默认参数; 字体大小可以自定义输入数字,例如14,则表示字体大小是14px(14像素); 字体颜色可在颜色选择器中选择,也可以直接输入十六进制颜色代码,如“#000000”; 图片描述的显示位置和标题保存一致,可自定义设置,具体可参考2.12。 ### **2.9 链接地址** 每张Banner图片都支持添加超链接地址,链接地址需要包含http或https,并可设置是否新窗口打开,建议不要给同一张图片同时使用链接地址和按钮链接。  ![1691743245141564.png](https://www.ecoxiu.com/images/202308/1691743245141564.png "1691743245141564.png") ### **2.10 是否新窗口打开** 添加或编辑Banner时,可自定义设置Banner链接地址及链接打开方式,默认新窗口打开。 ![1691743286793867.png](https://www.ecoxiu.com/images/202308/1691743286793867.png "1691743286793867.png") ### **2.11 图片替代文字** 图片替代文字,一般不需要填写。 ![1691743297263310.png](https://www.ecoxiu.com/images/202308/1691743297263310.png "1691743297263310.png") ### **2.12 图片文字位置** 文字显示的位置,一般显示在左侧居中 ![1691743325429754.png](https://www.ecoxiu.com/images/202308/1691743325429754.png "1691743325429754.png") 显示具体位置如下图。 ![1691742936172788.png](https://www.ecoxiu.com/images/202308/1691742936172788.png "1691742936172788.png") ### **2.13 所属菜单** 同一张Banner图片可显示在全站,也可以只显示在指定的栏目(页面),一个栏目(页面)下可添加多张Banner图片轮播显示,多张Banner需要保持图片尺寸一致。添加或编辑Banner时,设置Banner图片所属栏目,可选择所有栏目或自定义勾选 ![1691743395136594.png](https://www.ecoxiu.com/images/202308/1691743395136594.png "1691743395136594.png") **可以切换到手机版,对手机版进行单独banner设置:** ![1691743541104977.png](https://www.ecoxiu.com/images/202308/1691743541104977.png "1691743541104977.png") ### **2.14 手机端图片地址** 添加或编辑Banner时,可通过图片上传组件,自定义上传手机端Banner图片 ### **2.15 手机端图片标题** 留空显示2.7章节设置的“图片标题”,设置此参数后,可让手机端显示不一样的标题。 ### **2.16 手机端图片描述** 留空显示2.8章节设置的“图片描述”,设置此参数后,可让手机端显示不一样的描述。 ### **2.17 手机端图片文字位置** 用于控制手机端图片标题、描述、按钮(按钮设置可参考2.9章节)在手机端Banner图片显示的位置,此功能需要网站模板支持。 ## **三、编辑Banner** 点击对应banner后面的编辑就可以进行编辑,具体操作同添加banner ![1691725291404948.png](https://www.ecoxiu.com/images/202308/1691725291404948.png "1691725291404948.png") ## **四、删除Banner** 点击对应banner后面的删除就可以进行删除单个banner,或者选中需要删除的banner,然后点击:操作-》放入回收站; ![1691744126392919.png](https://www.ecoxiu.com/images/202308/1691744126392919.png "1691744126392919.png") 【注意】此操作是暂时将banner放入回收站,如果要彻底删除,可进入回收站彻底删除; 首先状态筛选框选择回收站,可以点击对应banner后面的【X】删掉单个banner,也可以勾选需要删除的banner,然后点击【彻底删除】按钮彻底删除对应的banner。 ![1691744306971566.png](https://www.ecoxiu.com/images/202308/1691744306971566.png "1691744306971566.png") ## **五、Banner排序** 点击表格每行空白区域上下拖曳后即可改变排序 ![1691745117941407.png](https://www.ecoxiu.com/images/202308/1691745117941407.png "1691745117941407.png")