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")
- 概述
- 系统简介
- 功能介绍
- 优势特点
- 系统安装
- 服务器环境与安装准备
- 本地安装
- 本地搭建joomla运行环境
- 本地网站创建与配置
- 本地安装原版纯净版Joomla
- 本地安装joomla快速建站包
- 在线安装
- 在线安装原版纯净版Joomla
- 在线安装joomla快速建站包
- 安装joomla快速建站包升级包
- 基本设置
- 网站基本信息设置
- 网站后台地址及修改
- 网站LOGO修改
- 修改网站名称、关键词、描述
- 修改底部联系信息及版权
- 修改右侧在线交流客服
- 修改地址栏的ICON小图标
- 幻灯片banner管理
- 添加banner大图轮播图片
- 添加banner按钮
- 添加手机端底部菜单按钮
- 图片设置
- 设置图片存储目录以及上传支持的图片类型
- 图片上传
- 图片设置缩略图以及自动裁剪图片
- 栏目(菜单)管理
- 栏目(菜单)介绍
- 菜单管理
- 菜单项管理
- 菜单项的详细介绍
- 菜单项的添加
- 菜单项的编辑
- 菜单项的删除
- 菜单项的排序
- 菜单项的移动
- 菜单项的复制
- 简介管理
- 简介的添加和编辑
- 关于我们直接跳转到公司简介
- 文章管理
- 默认设置
- 新建菜单项(文章分类)
- 新建文章
- 编辑文章
- 删除文章
- 移动文章
- 复制文章
- 文章排序
- 自定义字段组管理
- 自定义字段管理
- 文章列表管理
- 产品管理
- 默认设置
- 新建菜单项(产品分类)
- 新建产品
- 编辑产品
- 删除产品
- 移动产品
- 复制产品
- 产品排序
- 自定义字段组管理
- 自定义字段管理
- 产品列表管理