用 Elementor 做页头、页脚与导航菜单

页头页脚是全站唯一「只做一个地方、改所有页面」的东西。用 Elementor Pro 的 Theme Builder 做，比在主题设置里调来调去可控。

先建菜单，再建页头

WordPress「外观 → 菜单」里把结构搭好：首页、产品、案例、新闻、联系，最多五个一级项，超过就合并。菜单只负责层级与链接，样式全交给 Elementor。

别在页头里手写六个文字链接：菜单改一次要每个模板都改，还要自己处理移动端。用 Nav Menu 部件绑定刚建好的菜单，位置（Primary）在主题里已注册。

Theme Builder 建 Header

1. 打开任意页面左下角的菜单图标，进入 Theme Builder
2. 选 Header，新建模板，命名 Site Header
3. 布局用容器：左侧 Logo，中间菜单，右侧 CTA 按钮
4. 发布时设 Display Conditions 为 Entire Site
5. 再加一条排除条件（比如首页用另一个透明页头），条件优先级 Elementor 会自动排序

Footer 同理，用 Entire Site。建议页脚分四栏：品牌与一段自我描述、产品与服务导航、教程分类导航、联系方式与订阅表单。导航全部指向真实页面，别留 # 空链接。

三个必做的响应式设置

• 移动端折叠：Nav Menu 的「Full Width / Collapse」断点设到平板断点，并确认折叠图标颜色在深底上可见
• 粘性页头：容器 Advanced → Motion Effects → Sticky，选 Top；同时给「Sticky 上偏移」留值，避免滚到页脚时跟着跑
• 透明页头：容器背景设无、页面标题留出上方内边距。这是最常见的前台事故：透明页头压住文章标题，见下面第 4 节

常见坑与解法

页头盖住正文标题

透明页头是绝对定位，正文在它下面。解决不是加一堆 padding，而是按页面类型关掉透明：单篇文章与归档页用普通页头模板，只有首页 Hero 用透明。用 Conditions 区分，而不是给每个页面手动调上边距。

改了主题页头还在

主题自己的 header 和 Elementor 模板会同时输出。要么在主题设置里关掉它，要么用 Elementor 的「页头页脚替换」选项，要么把主题模板换成 Elementor Full Width 或 Canvas。

菜单在手机上打不开

九成是缓存或 JS 合并把 Elementor 的前端脚本压坏了。先清缓存、关掉优化类插件的 JS 组合与延迟，再复现。

页脚链接换域名后全是旧地址

用相对路径写内部链接（/services/、/contact/），别把 https://旧域名 写死在部件里，迁移时能省一次搜索替换。

验收清单

1. 桌面、平板、手机三档各截一次页头与页脚
2. 点每个一级菜单，确认当前项高亮状态正确
3. 透明页头页面滚动到底，检查有没有遮住的文字
4. 禁用所有缓存插件后再走一遍，排除是缓存造成的假象

页头页脚做完的标准不是好看，是「以后加页面不用再改它」。加一篇新文章，导航、页脚、面包屑、相关商品全都自动出现，才算搭对了。

想在页头里加询盘按钮并弹出表单，见 Elementor 表单做询盘收集。