页眉
现在我们就正式开始搭建我们的网站。
首先我们来创建网站的页眉和页尾。
我们在这个视频中会介绍两种方式。
第一种方式是使用主题自带的页眉和页尾控件，它做出来的样式相对简单，但优势是加载速度快。
第二种是使用 Elementor 编辑器完全自定义样式，显示更丰富，但可能会对加载速度有影响。
我们会介绍这两种方式。
首先选择第一种，使用主题自带的。
在 Appearance 中点击 Customize。
可以看到 Header Builder，这里有三条区域：Above Header、Primary Header 和 Below Header。
通常我们使用的是中间的 Primary Header。
我们来为网站添加 Logo。
可以点击右边 Primary Header 区域，也可以点击左边的 Site Title & Logo 控件。
点击后选择 Logo，从媒体库中选择 313×313 像素的图片。
跳过裁剪。
Logo 建议使用透明背景。
添加后默认显示很大，并且右侧还带有站点标题。
我们要关闭站点标题：在左边找到 Site Title Visibility，将桌面、平板和手机的显示全部关闭。
接着调整 Logo 尺寸，在 Logo Width 处将大小调整为 60。
现在为 Header 添加菜单。
在 Logo 右侧点击加号，添加 Primary Menu 控件。
此时 Primary Menu 还没有任何项目。
点击 Publish 保存设置并关闭自定义器。
回到后台 Appearance → Menus。
创建一个新的菜单，命名为 Main Menu。
将显示位置设置为 Primary Menu。
点击 Create Menu 并保存。
现在我们添加页面项。
因为目前没有页面，所以我们先到 Pages 创建页面。
依次添加：Home、About、Contact。
发布后回到菜单编辑页刷新页面。
勾选刚刚创建的页面，点击 Add to Menu 添加到菜单中。
通过拖拽调整顺序，将 Home 放在最上面。
点击 Save Menu 保存。
回到 Customize 的 Header Builder 界面刷新页面，菜单项 Home、Contact、About 已显示。
如果你还没有页面，但想先搭建框架，也可以使用 Custom Links 添加占位菜单。
例如输入 FAQ，URL 填写“#”，点击 Add to Menu。
这种链接点击无效，仅用于站位。
同样添加 Products 链接。
保存后刷新 Header Builder 可看到所有菜单项。
其中 Home、Contact、About 有链接，FAQ、Products 没有链接。
如果你偏好先搭页面再建菜单，就用 Page 项添加菜单项。
如果你偏好先搭菜单架构，就用 Custom Links 添加站位，之后再替换。
我选择先创建基本页面，不添加内容，仅先发布。
新增页面：FAQ、Services、Blog、Products。
再次刷新 Pages 页面，已有七个页面。
将 Home 设置为首页：进入 Settings → Reading，将 Homepage 设置为 Home，将 Posts Page 设置为 Blog，保存。
现在 Home 显示为 Front Page，Blog 显示为 Posts Page。
回到菜单编辑页面，删除原来的 Custom Links 的 FAQ 和 Products。
刷新后在 Pages 中将所有页面项添加进菜单，调整顺序为：
Home、Products、FAQ、Services、Blog、About、Contact。
点击 Save Menu 保存。
回到 Header Builder 页面刷新，可看到菜单项目全部显示。
如果菜单靠 Logo 太近，可拖动 Primary Menu 控件将其居中。
点击 Publish 保存设置。
打开无痕浏览器输入网址，可看到 Logo、菜单正常居中显示。
接着在 Header 右侧添加搜索框和社交图标。
点击加号添加 Search 控件和 Social 控件。
调整 Search 图标大小为 16，在 Design → Margin → Top 中设置顶部间距为 5。
关闭联动按钮后单独调整 Top。
设置图标颜色为黑色。
调整 Social 控件样式：
Color Type 选择 Official 或 Custom，尺寸设置为 16。
自定义颜色时，Normal 设为黑色，Hover 设为蓝色。
可以添加更多社交平台图标，如 YouTube、Email。
Email 图标 URL 格式为：mailto:info@bdwebtek.com。
点击 Publish 保存设置。
再次打开无痕浏览器测试，点击 Email 图标，Outlook 会自动打开发邮件。
最后设置移动端显示样式。
在 Header Builder 页面左下角切换到 Tablet 或 Mobile 视图。
可见菜单显示为 Off Canvas 折叠菜单。
确认 Appearance → Menus → Main Menu 勾选了 Off Canvas Menu 显示位置。
在 Off Canvas 下方添加 Search 和 Social 控件。
测试点击菜单按钮，折叠菜单中出现搜索与社交图标。
如果不想放在菜单中，也可以拖动 Search 控件至菜单按钮旁边，将 Social 控件放回折叠菜单中。
调整不同设备的 Logo 尺寸，例如 Tablet 设置为 50，Mobile 设置为 45。
点击 Publish 保存。
最后设置 Header 宽度：
在 Design 中的 Width 选择 Content Width（与页面内容一致）或 Full Width（占满全屏）。
项目不多时建议使用 Content Width。
预览后确认效果良好，Header 设置完成。
