主题构建器：自定义页眉与页脚（完整图文步骤）

一、主题构建器是什么

平时用 Elementor 编辑的只是页面的「内容区」。页面的页眉（Header）、页脚（Footer）、文章模板、归档页、404 这些骨架，一直由 WordPress 主题说了算——主题给什么你用什么。

Theme Builder（主题构建器）就是把这些骨架也交给你用拖拽方式设计 🎯。新版能建的模板类型有十种（部分类型需配合 WooCommerce 等插件）：

• Header（页眉）：全站页眉——Logo、导航、搜索、按钮
• Footer（页脚）：全站页脚——版权、链接、联系方式
• Single Post（文章页）：文章详情页模板
• Single Page（页面）：页面模板
• Archive（归档页）：分类、标签、博客列表页
• Search Results（搜索结果）：搜索结果页
• Error 404（404 页）：404 错误页面
• Single Product（产品页）：WooCommerce 单个产品页
• Products Archive（产品归档）：WooCommerce 商店 / 产品列表页
• Loop Item（循环项）：Loop 网格用的「卡片」模板

入口：后台 → 模板 → 主题生成器（Theme Builder）。页面列出全部模板类型（Site Parts，站点部件），每个类型下可以建多个模板，通过「显示条件（Display Conditions）」控制各自出现在哪里。

💡 核心概念：显示条件。每个页眉/页脚模板发布时都要设条件——「全站（Entire Site）」还是「仅某页面」。比如你可以给首页单独做一个透明页眉，其余页面用常规页眉，两个模板靠条件分工。

---

二、制作全站页眉

🏗️ 2.1 新建 Header 模板

1. 后台进入 模板 → 主题生成器（Theme Builder）。
2. 找到 Header 卡片，点 「Add New（添加）」——页面直接进入 Elementor 编辑器。
3. 模板会先以默认名创建（如「Elementor Header #36919」）；想改中文名，之后到 模板 → 所有模板 列表点标题进编辑页改即可。
4. 新版不再弹「选择模板」窗口，直接进空画布。本课从零做起，先把结构理解透。

🧱 2.2 搭页眉骨架

经典页眉 = 左 Logo + 右菜单。用容器套容器实现：

1. 添加一个大容器：
2. 方向（Direction）：横向（→）
3. 内容对齐（Justify Content）：Space Between
4. 项目对齐（Align Items）：Center（垂直居中）
5. 高级 → Padding：左右 40px、上下 0
6. 在大容器里添加小容器A，宽度 20%。
7. 复制小容器A 得到小容器B，宽度改 80%。

骨架就是：大容器（横向、两端对齐、垂直居中）里套两个小容器——小容器A（20%）放 Logo，小容器B（80%）放菜单。

🖼️ 2.3 放 Logo

1. 拖一个 图像（Image） 小部件到小容器A。
2. 选择你的 Logo 图片，宽度设为 100–150px。
3. 对齐选「左对齐」，链接设为首页。

💡 也可以用 Site Logo 小部件（Pro）：它自动读取站点设置里的 Logo，以后换 Logo 只改站点设置一处。

🧭 2.4 放导航菜单

1. 拖一个 WordPress Menu（Nav Menu） 小部件到小容器B。
2. 如果显示为空——说明还没建菜单。先去后台 外观 → 菜单：
3. 创建菜单，勾选需要的页面，保存。
4. 回到页眉编辑器，保存草稿后刷新页面，菜单就出现了。
5. 菜单对齐设为「右对齐」。
6. 在「样式」标签调整：字体、字号、文字颜色、悬停颜色、菜单项间距。

💡 Nav Menu 小部件自带移动端汉堡菜单：切到手机视图，它会自动折叠成汉堡图标，点开是全屏菜单。在「内容 → Mobile Dropdown」里可以设断点和样式。

🚀 2.5 发布并设显示条件

1. 点 「发布」，弹出「PUBLISH SETTINGS（发布设置）」窗口——条件就在这里设。
2. 点 「Add condition」：条件行默认「Include（包含）+ Entire site（全站）」，保持默认直接确认即可；要精细分工（比如排除某个页面）也在这里改。
3. 点 「Save & Close」，出现「Your site part is live」提示，发布完成。

✅ 访问前台，所有页面顶部都应该换成了你的新页眉。忘设条件也不怕：点编辑器顶栏 「保存选项」→「Display Conditions」，就能随时补设或修改条件。

---

三、制作全站页脚

🏗️ 3.1 新建 Footer 模板

同样从 模板 → 主题生成器（Theme Builder） 的 Footer 卡片点 「Add New」，直接进入编辑器。

🧱 3.2 三栏页脚骨架

标准企业站页脚：品牌简介 + 快捷链接 + 联系方式。

1. 添加大容器：方向横向、Gap 40px、Padding 上下 60px 左右 40px。
2. 大容器里加一个小容器，宽度 33%，再复制两个。
3. 大容器样式 → 背景：深色（如 #1a1a2e）。

骨架就是：深色背景的大容器（横向）里等宽排列三个小容器——第一栏放 Logo + 简介，第二栏放快捷导航，第三栏放联系方式。

🧩 3.3 填充三栏内容

第一栏：品牌区
1. 拖入图像小部件放 Logo（深色背景记得用浅色版 Logo）。
2. 拖入文本编辑器，写 2–3 行公司简介，文字颜色改浅灰。

第二栏：快捷链接
1. 拖入标题小部件，文字「快速链接」，白色。
2. 拖入 WordPress Menu 小部件，选页脚菜单（没有就去 外观 → 菜单 新建一个）。
3. 菜单布局设为「垂直（Vertical）」，文字浅色。

第三栏：联系方式
1. 拖入标题小部件，文字「联系我们」。
2. 拖入 图标列表（Icon List）：加几行——📍 地址、📧 邮箱、📞 电话，每行可带链接（邮箱用 mailto:、电话用 tel:）。
3. 可加一排社交图标（Social Icons 小部件）。

💡 统一风格技巧：右键已调好的标题 → 复制样式（Copy），右键另一个标题 → 粘贴样式（Paste Style），字体颜色一秒统一。

📄 3.4 底部版权条（可选）

在三栏大容器下方再加一个容器：

1. 方向横向、内容居中，顶部边框 1px 半透明。
2. 放一行文本：© 2026 你的公司名. All Rights Reserved.

🚀 3.5 发布

同页眉：点 「发布」 → 「Add condition」 → 确认 Entire site（全站） → 「Save & Close」。

---

四、进阶：让页眉「高级」起来

基础页眉完成后，这几个 Pro 技巧按需取用 ✨。

📌 4.1 吸顶页眉（Sticky Header）

滚动页面时页眉钉在顶部：

1. 选中页眉的大容器 → 高级 → Motion Effects。
2. Sticky（粘性） 选 Top。
3. 可设「Effects Offset」（滚动多少像素后生效，如 100）。

🎬 4.2 滚动时页眉变形

配合 Sticky，可以做「滚动后页眉缩小/加深背景」的效果：

1. 在 Motion Effects 里开「Scrolling Effects」。
2. 给容器背景设透明度过渡，或用自定义 CSS 针对 .elementor-sticky--effects 状态写缩小样式。

🎭 4.3 多页眉分工

• 首页：全宽透明页眉叠在 Banner 上（模板条件：仅首页）。
• 内页：白底常规页眉（模板条件：全站，排除首页）。

条件规则支持「包含 + 排除」组合，在 「保存选项」→「Display Conditions」 里逐条添加。

---

五、常见问题排查

⛔ 5.1 菜单小部件显示空白

• 菜单还没创建：去 外观 → 菜单 建菜单。

• 菜单建好了还是空：保存草稿后刷新编辑器页面，菜单小部件才会重新读取。

• 仍空白：确认在 Nav Menu 的「内容 → Menu」里选对了你建的菜单。

⛔ 5.2 页眉发布后前台不显示

• 九成是显示条件没设：到 模板 → 所有模板 列表看该模板的 Instances 列，确认显示「Entire site」；没有就打开该模板的编辑器，用顶栏 「保存选项」→「Display Conditions」 补设。

• 条件冲突：两个页眉模板都设了 Entire Site 之类重叠的条件，Theme Builder 列表里会显示警告标志，检查并调整各自的条件分配。

• 缓存：清缓存插件和 CDN 缓存。

⛔ 5.3 吸顶页眉盖住了页面内容

• Sticky 生效后页眉脱离文档流，页面内容会顶上去。给页面第一个容器加上 Padding Top，值等于页眉高度。
• 或在页眉容器的高级 → Margin 给底部一个负值补偿——优先用第一种。

⛔ 5.4 手机端汉堡菜单点不开

• 检查是否有其他插件（尤其是 JS 优化类）延迟或合并了 Elementor 的前端脚本，把 Elementor 相关 JS 从延迟列表里排除。
• 切换 Mobile Dropdown 的断点设置，确认当前屏宽落在「显示汉堡」的范围内。

⛔ 5.5 页脚在手机上三栏挤在一起

切手机视图：把大容器方向改为纵向，或把三个小容器宽度都改为 100%，并适当增加 Gap 和各栏 Padding。