魏艾斯笔记Elementor Header & Footer Builder 是一款在 Elementor页面编辑器中添加页头（页眉）和页脚（页尾）的插件。而这两个部分只在 Elementor Pro版本中提供，在 Elementor 免费版中不提供。如果你使用了 Elementor免费版，可以用 Elementor Header & Footer Builder 插件来自定义个属于你自己的页头、页脚部分。
如你已经买过 Elementor Pro 就不要安装这个插件，直接用Elementor Pro制作页头和页脚。
1、安装 Elementor 插件
使用Elementor Header & Footer Builder的前提是预先安装 Elementor 插件免费版。
Elementor页面编辑器 点我直达 Elementor pro插件官网，快速建站，容易上手。入门点击购买Elementor Pro插件和下载安装激活_WordPress页面编辑器。 更多Elementor插件内容请看Elementor专题学习、小网站选择 1核2g配置的服务器起步，国外主题建站选择 2核4g配置，适当搭配运行流畅。
国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱） 不知道如何选择地域、配置请在页面右侧+老魏的联系研究。
外贸、B2C/C2C等网站在国外注册域名。打开namesilo官网，在搜索框里输入并选择好后注册，记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
在安装使用之前，我们先来了解这个插件的功能、特色。它支持使用 Elementor 创建布局并设置页眉、页脚、在页脚之前、块（用在网站的任何位置）。
另外还提供了超多的内置小部件，比如站点徽标、站点标题、网站标语、导航菜单、页面标题、视网膜图像、WooCommerce 菜单购物车、版权、搜索等。
在 WordPress后台 > 插件 > 安装插件搜索“ Elementor Header & Footer Builder ”，下载安装并启用。
国内网站如果下载不顺利，可以去官网下载插件，并手动上传到插件目录，解压缩后使用。
此时你的网站插件至少有以下两种：
Elementor插件和 Elementor Header & Footer Builder插件
这是正常使用 Elementor Header & Footer Builder 的前提。
如果插件启用后看到一条通知
Elementor Header & Footer Builder 插件不支持您当前的主题，请单击此处查看可用的兼容性方法。（Your current theme is not supported by Elementor Header & Footer Builder plugin, click here to check available compatibility methods.）
请定位到 WordPress后台 > 外观 > Elementor Header & Footer Builder > 主题支持，选择下图中的一种方法添加主题支持。如果还是不管用就只能联系你的主题作者请求他们支持插件了 。
4、添加模板
插件使用起来很简单，大体步骤如下：
- 在 Elementor Header & Footer Builder 添加新模板
- 选择合适的“模板类型”：页眉/页脚之前/页脚/块
- 设置显示位置和用户角色，发布
- 使用 Elementor 编辑设计
- 保存
安装好后我们从 WordPress后台 > 外观 > Elementor Header & Footer Builder 进入插件设置。
如上图所示点击“添加”，开始添加模板。
如下图所示，一般来说如果用于页头就写页头或 header都行。
- 模板类型：页头、页脚之前、页脚、自定义内容块
- 显示在：可选整个网站、详情页、页面、文章页等，此模板应该出现的位置，默认选择“整个网站”。
- 添加排除规则：不显示该模板的位置
- 用户角色：哪些用户能看到此模板。默认选择“所有”即可。
- 为Elementor画布模板启用布局：使用 Elementor画布模板在页面上显示此模板。
- 选择完成后在右侧点击“发布”按钮。
5、把元素添加到模板中
点击“使用 Elementor 进行编辑”。从这里面从头开始设计页眉或页脚模板。
先添加列元素，选择要使用几列。
然后从左侧添加设计元素。比如图标、菜单等常见元素。
Elementor免费版可以添加的是基本元素、常规元素、站点元素、单页元素和 Elementor Header & Footer Builder 元素等（拉动到最下面）。
免费的 Elementor 插件不附带菜单小部件，而在 Elementor Header & Footer Builder 元素中提供了以下小部件：
- 网站标志
- 网站标题
- 网站标语
- 导航菜单
- 页面标题
- 视网膜图像
- 版权
这些小部件对我们创建页头/页脚都是很有用处的，拖拽到右侧列中，再进行设置参数即可。
比如在下图中把左侧的“视网膜图像”拖拽到右侧列中，再添加 png格式的网站logo图片。
把“导航菜单”拖拽到右侧合适的列中，就出现了我们实现添加好的菜单内容了。
这样我们就完成了一个最基本的页头模板了。
如果你还没有创建 WordPress菜单或者不会创建，请阅读 WordPress菜单设置教程。
如上所讲解的设置导航、完成模板并根据需要添加所有元素后点击“更新”按钮。
6、响应式设计
另外一件重要的设置是做响应式设计。
大家都知道移动端菜单空间小，无法容纳上面那种在 PC端桌面上显示的元素宽度。所以我们还要继续对平板 和手机做自定义设计。
Elementor响应模式的开关在页面左下角，如下图所示。
此时来到页面最上面，如下图所示看到有三种图标，依次是：桌面端、平板端、手机端。
前面已经设计好了 PC端，依次点击 平板端 或 手机端，会看到新的页眉或页脚元素在平板电脑和智能手机上的显示状况（所见即所得），你可以从左侧的内容、样式、高级设置中根据需要设计各种参数。
当你设计完成这三种终端的样式、布局后，退出到 WordPress仪表盘，点击“更改”按钮发布。
新的自定义页眉和页脚元素在发布后会自动填充到整个网站中！是不是很方便？有没有很舒服呢？
如下图所示是老魏用 Elementor Header & Footer Builder+ Elementor免费版设计了一个简单的页头，这是一个基本的网站logo+菜单的模板。所以你可以开动脑筋创建属于你自己的页头、页脚。
如果你的网站主题不支持 Elementor Header & Footer Builder ，但是你还想添加页眉或页脚，请在 WordPress 添加新页面时，选择 Elementor Canvas 画布模板。
把模板添加到 Elementor Canvas 画布页面属性，然后网页就能使用插件生成的页眉或页脚模板自动填充了。
8、自定义内容块
如果你创建的是自定义内容块，那么会自带一个短代码。
先用 Elementor创建快的内容，后面使用短代码可以放到网站任何位置，相当有灵活性。
如果是一个广告放到网站很多的位置，将来只需要修改这个内容块，网站上所有的广告内容都会跟着变化，特方便。这个功能与老魏前面分享过的 Header Footer Code Manager插件（简称HFCM插件）是类似的， HFCM 插件只能设计简单的内容，而本文中的插件使用 Elementor页面编辑器能设计出更漂亮的内容来，所以功能上强大很多。
总结：借助 Elementor 免费版+ Elementor Header & Footer Builder 插件，现在你可以很容易的按需设计出网站页头、页脚等部分。最重要的是这些功能都十分容易上手，还不花钱！