主题构建器：自定义页眉与页脚（完整图文步骤）-WP独立站学院

生成摘要

AI 生成，仅供参考

一、主题构建器是什么

平时用 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 模板

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

🧱 2.2 搭页眉骨架

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

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

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

🖼️ 2.3 放 Logo

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

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

🧭 2.4 放导航菜单

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

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

🚀 2.5 发布并设显示条件

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

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

三、制作全站页脚

🏗️ 3.1 新建 Footer 模板

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

🧱 3.2 三栏页脚骨架

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

添加大容器：方向横向、Gap 40px、Padding 上下 60px 左右 40px。
大容器里加一个小容器，宽度 33%，再复制两个。
大容器样式 → 背景：深色（如 #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 底部版权条（可选）

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

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

🚀 3.5 发布

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

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

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

📌 4.1 吸顶页眉（Sticky Header）

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

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

吸顶设置：Motion Effects → Sticky 选 Top、Effects Offset 设 100

🎬 4.2 滚动时页眉变形

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

在 Motion Effects 里开「Scrolling Effects」。
给容器背景设透明度过渡，或用自定义 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 缓存。