如何使用Bebuilder页面编辑器制作网站页头（Header）

经过之前的Betheme主题和Bebuilder编辑器的介绍后，应该对此有了大概的了解，那本篇文章将学习如何制作一个外贸企业独立站的页头（Header）模板部分。

PS：以下统一称“页头”为 Header

Bebuilder使用Pre-Built一键快速导入Header

Bebuilder预设了14种风格不同的Header模板，在编辑器中快速导入，步骤如下：

1. 打开 WordPress 后台 -> 点击左侧 Templates 。

2. 点击上方 Add New 添加新模板。

3. 选择模板类型为 Header。

4. 输入模板名称，**英文！**这里的名称会转变为URL，编辑模版时可以把标题改回中文。

5. 点击 Create template 创建模板。

6. 点击左侧 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 框架

1. 点击右侧 Start creating ，并添加三列 Wrap 。

2. 第一个 Wrap 中添 Icon 与 Column Text 文本，第二个 Wrap 中添加 Promo Bar ，第三个 Wrap 中添加四个 Icon 作为社交图标。

3. 新建一个 Section ，并添加三列 Wrap，同样的方式，第一个 Wrap 中添 Logo，第二个 Wrap 中添加 Menu 导航菜单（需提前在WordPress菜单管理界面添加菜单以保证预览效果），第三个 Wrap 中添加 Search搜索按钮图标。

4. 这样一个基本的 Header 框架就做好了，下面开始着重更改每个Item的样式设计。

自定义 Item 元素的内容和样式

1. 更改 Section 背景颜色，点击第一个 section pencil icon 图标，可打开该 Section 的设置选项，点击 advanced ，进入高级设置，里面可以自定义 Section 的各个部分，选择 background ，将 color 改为“#3b76a7”，或者根据自己的审美，使用调色板选取适合的颜色。所有的 Section、Wrap、Item都有 Advanced 选项的设置，里面可以自定义模块的尺寸、间距、定位、背景、边框、响应式设计以及CSS代码等等，可以以同样的方式更改其他模块的背景颜色、字体颜色。

2. 选择 Column Text 元素的 Pencil icon 图标，可打开该元素的设置选项，其中会出现 WordPress 经典编辑器，可修改该元素的内容上方 Style 中有一个 Typography 排版功能，可以修改文字大小、行高、出现动画、字体等等。所有可添加文字的模块都可以使用 Typograph 功能。

3. 选择 Logo 元素的 Pencil icon 图标，可打开该元素的设置选项，输入 Logo 链接，或者从 WordPress 媒体库中选择 Logo 图标即可跟改；打开高级设置后，可更改尺寸、间距、定位、背景、边框等等。

4. 选择 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 很快就能完全上手。