经过之前的Betheme主题和Bebuilder编辑器的介绍后，应该对此有了大概的了解，那本篇文章将学习如何制作一个外贸企业独立站的页头（Header）模板部分。
PS：以下统一称“页头”为 Header
Bebuilder使用Pre-Built一键快速导入Header
Bebuilder预设了14种风格不同的Header模板，在编辑器中快速导入，步骤如下：
- 打开 WordPress 后台 -> 点击左侧 Templates 。
- 点击上方 Add New 添加新模板。
- 选择模板类型为 Header。
- 输入模板名称，英文！这里的名称会转变为URL，编辑模版时可以把标题改回中文。
- 点击 Create template 创建模板。
- 点击左侧 Pre-built headers ，这里所有的 Header 预设模板，喜欢哪一个就点击 insert 插入即可。
插入预设 Header 后可以在此基础上再二次设计，Logo、菜单、图标等等都替换下，以保证符合网站的整体风格。
Bebuilder创建自定义Header模板
有时候自带的模板 Header 并不能满足我们的需求，Bebuilder也可以创建出任意的Header，而不仅仅局限于主题，这也是本篇文章要学习的方式。
1 至 5 的步骤跟上方是一样的，打开Bebuilder页面编辑器后，在右侧可以点击 Start creating 可以创建新的 Section 和 Wrap，Wrap最多可分为三个，各占 1/3。
如果没有设计灵感的话，第一可以参考Bebuilder的预设，第二可以参考竞争对手的网站Header。
比如：我所卖的产品为“激光切割机（laser cutting machine）”，那么，打开谷歌，搜索该英文关键词，找出搜索结果中的前十名的独立站，非电商平台，分别打开并学习他们网站是如何设计Header的。
关键词排名在首页的独立站无论是页面设计、页面交互（UX）还是页面内容，肯定有可取的地方，因此，模仿竞争对手的网站风格是页面设计思路之一。
通过竞争对手确定整体 Header 风格后，我门可以得出 Header 中需要包含以下内容：
- 促销信息
- 社交平台分享图标
- 网站Logo
- 导航栏菜单
- 搜索功能
- 联系信息
由于是B2B类型的，因此可以不添加登录、注册、购物车、语言切换等功能，当然这还是取决于自己的业务和想法。下面就以此为例，设计一个简单的B2B外贸企业站 Header。
设计基本的 Header 框架
- 点击右侧 Start creating ，并添加三列 Wrap 。
- 第一个 Wrap 中添 Icon 与 Column Text 文本，第二个 Wrap 中添加 Promo Bar ，第三个 Wrap 中添加四个 Icon 作为社交图标。
- 新建一个 Section ，并添加三列 Wrap，同样的方式，第一个 Wrap 中添 Logo，第二个 Wrap 中添加 Menu 导航菜单（需提前在WordPress菜单管理界面添加菜单以保证预览效果），第三个 Wrap 中添加 Search搜索按钮图标。
- 这样一个基本的 Header 框架就做好了，下面开始着重更改每个Item的样式设计。
自定义 Item 元素的内容和样式
- 更改 Section 背景颜色，点击第一个 section pencil icon 图标，可打开该 Section 的设置选项，点击 advanced ，进入高级设置，里面可以自定义 Section 的各个部分，选择 background ，将 color 改为“#3b76a7”，或者根据自己的审美，使用调色板选取适合的颜色。所有的 Section、Wrap、Item都有 Advanced 选项的设置，里面可以自定义模块的尺寸、间距、定位、背景、边框、响应式设计以及CSS代码等等，可以以同样的方式更改其他模块的背景颜色、字体颜色。
- 选择 Column Text 元素的 Pencil icon 图标，可打开该元素的设置选项，其中会出现 WordPress 经典编辑器，可修改该元素的内容上方 Style 中有一个 Typography 排版功能，可以修改文字大小、行高、出现动画、字体等等。所有可添加文字的模块都可以使用 Typograph 功能。
- 选择 Logo 元素的 Pencil icon 图标，可打开该元素的设置选项，输入 Logo 链接，或者从 WordPress 媒体库中选择 Logo 图标即可跟改；打开高级设置后，可更改尺寸、间距、定位、背景、边框等等。
- 选择 Icon 元素的 Pencil icon 图标，可打开该元素的设置选项，点击 Icon 图标可自定义图标样式，Bebuilder 含有两个图标库可供选择，之后就可以编辑元素的尺寸、间距、定位、背景、边框等等设置。PS：（其实可以先编辑一个图标，设置好内外边距喝对其后，使用复制按钮，快速复制，或者先保存为一个 Pre-set 样式，再对其他元素使用该样式即可。）
最终效果如下：
Bebuilder中每个模块的设置都有所不同，以上仅简单讲了一些元素必要的设置。
设置页面响应式
桌面端的页面已经设计完了，但是还需要适配移动端，Bebuilder提供了响应式设计功能，也可以实时预览页面在不同设备的情况，响应式设计建议最好在完成页面内容填充后再做更改调整。
鼠标移动至左下脚即可选择不同的设备，此时右侧会看到该页面（模板）的预览，若有样式不对的元素可以再继续做调整，调整过程中不会影响到桌面端的显示效果。
设置显示条件，保存更新或发布
完成所有设计后，点击左下角 Publish 按钮，此时会出现 Display Conditions （显示条件），可以自定义设计的模板显示都应用至哪些页面，其中有两个选项，Include 和 exclude ：
- Include（包含）：表示规则为包含，右侧显示了页面包含的条件。
- exclude（不包含）：表示规则为不包含，右侧显示了不包含的条件。
由于此模板设计的为 Header ，因此将规则应用为 Include + Entire Site，点击 Save 保存即可。
以上就是使用Bebuilder页面编辑器从从零开始设计一个外贸独立站 Header 的内容，对于新手来说，可能英文是比较困难的，这个问题需要再对Bebuilder加以熟悉，多记一些常用的单词，自然而然就会了。多去找一些常规的、排名靠前的外贸独立站的首页，不断模仿、练习，我相信Bebuilder 很快就能完全上手。
