EP06. “WordPress Theme Customizer——Header 与 Footer Builder（Solace 主题）”

这篇笔记讲 Solace 主题自带的 Theme Customizer 怎么设计网站的 Header 和 Footer，以及跟 Elementor 样式系统之间容易冲突的地方要注意什么。每个 WordPress theme 都有自己的 Customizer，功能因主题而异，这里讲的是 Solace 主题专属的版本。入口：网站后台顶部 Customize 按钮。

重点内容

General 选项（📌 不建议用，容易跟 Elementor 冲突）

Global Color Palette：可以改标题文字颜色、背景颜色等

⚠️ 重要机制：如果颜色是在 Elementor 里被「直接设定」的（比如某个按钮手动设了橘色），Theme Customizer 这边改色板不会覆盖掉 Elementor 的设定；只有「没有被 Elementor 单独设置过」的元素才会跟着 Theme Customizer 的色板变化。

按钮颜色设置主要作用在 Commerce / Blog / Checkout 页面，跟 Elementor 页面里设计出来的按钮基本无关（那些按钮其实技术上是「链接」，不是这里说的 button）。字体设置同理：Base Font、H1/H2/H3 主要影响的是 Archive 类页面（blog 列表、WooCommerce 页面），不太影响用 Elementor 设计的首页。

Header Builder

• Solace 提供多个预设 Header 风格（logo 位置、菜单样式等组合）可以直接选用
• Header 分 Top row / Main row / Bottom row 三层，把元件拖到对应的 row 上就会自动生成新的一行

[截图：Header Builder 界面，Top row / Main row / Bottom row 三层结构和可拖拽的元件面板]

• 每一行都可以单独设计：齿轮图示 → 背景色 / 渐层背景等
• 可加的元件包括电话号码、email、网站连结（Add → 填内容 + 连结）等，每个元件都有自己的样式选项（文字颜色/按钮颜色/outline 等）
• ⚠️ Widgets 区块是 WordPress/Gutenberg 原生的 widget（不是 Elementor 元件），📌 不建议放在 Header（尺寸不好控制），比较适合放在 Footer

Footer Builder

逻辑跟 Header Builder 基本一样，差别是 Footer 更常用到 Widgets 和 HTML 元件：

• HTML 元件：其实就是纯文字/HTML 内容区块（比如放「Call us + 电话号码」这种文字）
• 可以加 Button（并设置对齐方式：靠左/居中/靠右）、加联系信息等
• Solace 提供多套预设 Footer 排版（比如「Logo + 文字 + 社媒图标」的简洁版），可以直接选用后再用 Widgets 填内容（比如 About Us 文字、Pages 列表、其他自定义内容）

[截图：Footer Builder 的预设排版选择列表，含"Logo + 文字 + 社媒图标"样式缩略图]

• 齿轮图示可调栏数（比如 4 栏改 3 栏）、调背景色

Page Settings

• Single Post：控制单篇文章页面宽度，Full Width 或 Box（居中盒状）
• Page（仅影响没有用 Elementor 设计的一般页面）：Full Width / Box / Custom（可自订具体宽度）——如果这个页面是用 Elementor 设计的，页面宽度由 Elementor 自己控制，这里设置不生效

Features → Scroll to Top

开启后网站右下角会出现回到顶部的图标，可调颜色和大小

Core / 网站身份设置

• 可以指定某个页面当作首页：Homepage Settings → 选 Static Page → 指定要用哪个页面当首页（要选 Static Page 才能正常显示，选 Latest Posts 的话首页会变成博客列表）
• 也可以另外指定 Posts Page（所有 blog 文章会显示在这个页面上）

常见误区

• ❌ 在 Theme Customizer 改了颜色/字体，以为 Elementor 设计的页面也会跟着变——Elementor 里已经手动设置过的元素不会被 Theme Customizer 覆盖，两套系统各管各的
• ❌ 把 WordPress 原生 Widgets 区块放进 Header——尺寸不好控制，这类区块更适合放 Footer
• ❌ 首页选了 Latest Posts 而不是 Static Page——首页会变成博客文章列表，不是预期的 Elementor 设计页面
• 💡 Footer 排版不知道怎么设计比较好看，直接套用 Solace 提供的预设样式（比如「Logo + 文字 + 社媒图标」），比自己从零拼版更容易有专业感

Sources

YouTube：

1. WordPress Theme Customizer - Header And Footer Builder — Daryl Wilson — https://www.youtube.com/watch?v=xXa8d3O-NK0

Blog / Website：

1. How to Customize Your WordPress Header (Beginner's Guide) — https://www.wpbeginner.com/beginners-guide/how-to-customize-your-wordpress-header/