魏艾斯笔记Banner是网站导航栏与内容区域中间的横幅图片的统一称呼，GeneratePress主题官方叫 page hero。有了 Banner图片的润色使得整个网站不只是干巴巴的文字，让网站内容更加丰富多彩。魏艾斯笔记www.vpsss.net在本文中分享GeneratePress主题添加 Banner横幅图片的操作流程。
国外建站主题及插件选择2核4G内存3M带宽能流畅运行。国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱）， 不知道如何选择地域、配置请在页面右侧+老魏的联系方式，我们一起研究。
外贸网站、B2C/C2C等建议在国外注册域名。打开namesilo官网，在搜索框里输入要注册的域名，选择好之后注册，付费之前记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
1、需要使用 GP Premium高级插件才能实现本文功能，请关注GP Premium插件安装部署详细图文教程。
2、开启 Elements元素。点击 WordPress后台 > 外观 > GeneratePress > Elements，Active。
3、新建 Elements，选择 Header类型。
3、给这个新建 header起名叫 banner（或者你自定义）。
内容区域输入以下代码
<h1>{{post_title}}</h1>
{{post_author}} {{post_date}}
代码中 <h1> </h1>中间的内容可以用自定义文字代替。
autor作者和date时间也可以用别的元数据代替，或者取消掉。
4、下面是设置参数
Page Hero这里要设置的参数挺多。
- Container容器：可选 full width全宽还是 contained与容器宽度相同。
- Innner Cotainner内部容器：另外一种宽度设置方式。
- 这两种宽度方式的结果如下图所示，注意不同形式的背景图中文字的具体位置。
- 具体大家自己多设置几次，体会一下就明白了。
- Horizontal Alignment：水平对齐；
- Padding：决定图片大小尺寸，可选 px像素和百分比，点击小图标为PC端和移动端设置不同的尺寸；
- Background Image：如果不设置背景图片，那么就在下面选择一个 Background Color。或者设置 featured image或 custom image，从媒体库、本地电脑上传图片；
- Background Position：背景图片位置，可以看作“九宫图”的九个点位；
- Disable Featured Image：禁止特色图片。当Background Image选择特色图片时，在每个文章页面都会显示特色图片作为 banner；
- Background Overlay：使用背景色作为背景叠加层，在banner图片上面添加一层透明的颜色层当做文字背景。需要选择“特色图像”或“自定义图像”。操作方法：Background Color先选择合适颜色，再在右侧透明度上下拖动滑杆调整遮盖的透明度；
- Background Color：如果选择无背景图片，可以用颜色来替代作为文字背景。
- Text Color：文字颜色；
- Link Color：链接颜色；
- Link Color Hover：链接悬停颜色。
Site header网站页眉
主要是添加 Merge 融入效果，就是整个header文章内容都浮现在背景图上面的效果，比较震撼的一种浮动特效。
如下图所示，merge融入+overlay透明度的效果，包括网站logo、导航栏在内的网站页眉都浮动于背景图上方，还添加了 overlay透明度。
Display Rules展示规则
在哪里显示 banner或者排除某些页面。
- Entire Site整个网站，或者选择 blog、page、posts，还可以选择具体哪些页面、哪篇文章显示。
- Exclude是在哪些页面排除；
- Users：用户登录、未登录、管理员、编辑者、作者等多种状态下显示与否。
Internal Notes：注释说明。
GeneratePress主题添加 Banner横幅图片展示
下图是老魏在 GeneratePress主题添加的 banner横幅图片效果。
设置参数：
- container: full width；
- inner container: container；
- Background Image: featured image，并在媒体库选择一张合适尺寸的图片作为背景图。
- Disable Featured Image：勾选；
- Background Overlay：勾选；
- Background Color：浅灰色，透明度稍高；
- Display Rules：Entire Site
GeneratePress主题添加 Banner横幅图片并不复杂，需要添加两行代码，也可以自定义里面的文字。再搞清楚下面参数的具体含义，多加熟悉、练习，就能设计出符合自己心意的效果了。同样的效果在每款主题上都有自己的实现方法，GeneratePress主题添加 page hero不是可视化操作，不过与 Elementor编辑器相比倒也不算麻烦。