全局样式与字体系统（Site Settings）（完整图文步骤）-WP独立站学院

生成摘要

AI 生成，仅供参考

一、为什么要先配全局样式

没有全局样式的站点是这样的：每个标题手动选色 #1a73e8，每个按钮手动设字号。做了 30 个页面后品牌色要换——恭喜你，30 个页面逐个改 😱。

全局样式的逻辑：颜色字体只定义一次，全站引用；改定义一处，引用处全部跟随。 这也是导入整站套件后要「先改全局样式」的原因——正规套件全都挂在全局系统上。

入口：任意页面进 Elementor 编辑器 → 左上角汉堡菜单 → Site Settings（站点设置）。

⚠️ 先做一件事：进入 Elementor → 设置 → 常规，勾选「禁用默认颜色（Disable Default Colors）」和「禁用默认字体（Disable Default Fonts）」——让 Elementor 不再注入自己的默认配色，全站样式完全由你的全局系统接管，避免两套体系打架。

后台 Elementor → 设置：勾选“禁用默认颜色”和“禁用默认字体”，让全站样式由全局系统接管

二、全局颜色（Global Colors）

🎨 2.1 系统颜色

Site Settings → Global Colors，自带 4 个系统色（不可删除，可修改）：

Primary（主色）：品牌主色——按钮、强调、图标
Secondary（次要色）：次要按钮、辅助强调
Text（文字色）：正文文字，深灰近黑
Accent（点缀色）：小面积装饰、标签

按你的品牌规范把 4 个系统色改掉——光这一步，全站引用系统色的元素就完成换色 ✅。

➕ 2.2 自定义颜色

点「Add Color」新增，建议加上：

Background Light：浅灰背景（如 #f7f8fa），用于区块打底
Dark：深色背景（如 #1a1a2e），用于页脚和深色区块
Border：边框灰（如 #e5e7eb）

💡 命名用语义名（主色/浅底/深底），不要用颜色名（蓝色/灰色）——换肤时语义名不用改，颜色名会对不上。

🔗 2.3 怎么引用

任何元素的颜色设置（文字色、背景色、边框色），点开色板，顶部一排就是全局颜色，点选即可。色板上有个小地球图标 🌐 的，就是全局引用。

纪律：从今往后，选颜色只从全局色板里选，不手输色值。 手输的颜色是「硬编码」，全局换肤时不会跟随。

三、全局字体（Global Fonts）

🔤 3.1 系统字体

Site Settings → Global Fonts，同样 4 个系统预设：

Primary：标题字体
Secondary：副标题/引言
Text：正文
Accent：按钮/标签文字

每个字体预设可以定义：字体族（Family）、字号、字重（Weight）、行高、字间距、大小写转换、装饰线。

全局字体面板：主要用 Montserrat、文本用 Inter，每行都可点编辑调整细节

🌍 3.2 字体选择要点

外贸站常用：Inter、Montserrat、Poppins、Roboto——Google Fonts 里直接选。
中文站点：系统默认字体栈最稳，或托管本地中文字体（Google Fonts 在国内服务器上加载慢，建议本地化托管）。
字号可以按设备分别设：全局字体的字号同样带响应式控制，手机端标题在这里统一调小，全站生效。

🔗 3.3 怎么引用

任何文字类小部件 → 样式 → 排版（Typography）→ 点地球图标，选全局字体预设。之后全站改字体只改 Site Settings 一处。

四、主题样式（Theme Style）

全局颜色字体是「素材库」，Theme Style 是把素材应用到 HTML 元素上的规则 ⚙️。Site Settings → Theme Style 下有四个面板：

📝 4.1 Typography（排版）

设置全站默认文字规则：

Body：正文颜色和字体（引用 Text 全局色 + Text 全局字体）、段落间距
Link：链接颜色、悬停颜色、下划线规则
H1–H6：各级标题的颜色、字体、字号（可按设备调）

设好后，文章正文、标题不用逐个设样式，自动继承。

🔘 4.2 Button（按钮）

统一定义全站按钮：文字排版、文字色、背景色、悬停态、边框、圆角（6px 万金油）、内边距。之后拖入的每个按钮小部件自动长这样。

🖼️ 4.3 Images（图片）

统一图片规则：圆角、边框、透明度、CSS 滤镜、悬停过渡时长。

📋 4.4 Form Fields（表单字段）

统一所有表单的输入框样式：标签排版、字段高度、背景、边框、聚焦态、圆角。全站表单风格由此统一。

五、站点设置的其他实用项

Site Settings 里剩下的这些，按需了解 🔧：

Site Identity：站点名称、描述、Logo、网站图标——在此统一上传，Site Logo 部件自动读取
Background：全站页面背景，默认留白即可
Layout → Content Width：全局内容宽度，默认 1140px，宽屏时代可设 1200px
Layout → Widgets Space：小部件默认间距，默认 20px
Layout → Default Page Layout：新页面默认布局，建议 Elementor Full Width
Breakpoints：响应式断点，默认三档够用，按需启用额外断点
Lightbox：图片灯箱（计数器、全屏、缩放、背景色），开启缩放和全屏体验更好
Custom CSS：全站自定义 CSS（Pro），少量使用，面板设置优先

六、和主题样式的关系（重要）

WordPress 主题自己也有一套颜色字体设置，两边同时管就会「打架」🥊。

处理原则：

用 Hello Elementor 主题：Elementor 官方「空白画布」主题，自身几乎不带样式，全部交给 Elementor——零冲突，最推荐。
用其他主题（Astra、WoodMart 等）：选定一个「话事人」。建议让 Elementor 管页面内容区，主题只管页眉页脚等主题区域；如果页眉页脚也用 Theme Builder 做了，就把主题样式的影响降到最小。
出现「设置了不生效」时，第一怀疑对象就是主题样式覆盖：检查主题的自定义器（Customize）里对应项，或在 Elementor 设置里勾选禁用默认样式后排查。

主题侧的样式设置（WoodMart → 主题设置 → 样式和颜色）：两边都管样式，分工要先理清

💡 4.x 版本的方向：Elementor 4.x 的 Atomic 编辑器引入了更现代的 Variables（变量）和 Classes（类）系统来管理设计资产，是全局样式思路的进化版。对于现在的站点，本课的全局系统依然是主力，两者会长期并存。

七、实战：10 分钟配好一套品牌样式

🎯 按顺序执行：

Elementor 设置里禁用默认颜色和字体。
Site Settings → Global Colors：
Primary 改品牌主色（如 #0d6efd）
Text 改 #1f2937
新增 Background Light：#f7f8fa
Site Settings → Global Fonts：
Primary：Montserrat，字重 700
Text：Inter，字号 16px，行高 1.7
Theme Style → Typography：Body 引用 Text 色 + Text 字体；H1–H3 引用 Primary 色 + Primary 字体，H1 设 40px/手机 28px。
Theme Style → Button：背景 Primary 色、圆角 6px、悬停时加深 10%。
回到页面：把已有元素的颜色字体全部换成全局引用（点色板顶部的全局色/字体）。