EP539-542. “Elementor 全局颜色、菜单颜色与区块结构”

• 只改了 Elementor 的 Default Colors，忘记去 Customize → General Styling 更新——菜单 Hover 效果照样是主题原本的蓝色
• 品牌色不用自己瞎猜，从 Logo 图片直接提取色号，配色天然就和视觉资产统一
• 一个页面就是 Section → Column → Element 三层结构，理解这个骨架，设计任何页面的思路都通用

重点内容

EP539：设置全局颜色（Set Global Values - Colors）

进入方式： Elementor 编辑器 → 左上角菜单按钮 → Default Colors

四种颜色类型：

颜色设计技巧：

• 如果你的设计主要用大背景图/纯色块 → 标题用黑色或白色最安全
• 品牌主色放在 Accent，用于按钮和强调 → 视觉统一感强
• 颜色不必复杂：2–3 个颜色够了

从 Logo 提取品牌色（推荐方法）：

1. 前往 Canva Color Palette Generator → 上传 Logo 图片 → 系统自动生成配色
2. 或使用 html-color-codes.info/colors-from-image → 上传图片 → 鼠标悬停在颜色上 → 复制色号

颜色心理学参考：

• 红色/橙色 = 热情、行动、紧迫感（适合 CTA 按钮）
• 蓝色 = 信任、专业（金融、科技）
• 绿色 = 成长、健康、自然
• 黑色/白色 = 极简、高端
• 注意：没有绝对对错，但遵循行业惯例能让用户有熟悉感

额外工具（进阶）： Adobe Color Wheel → 调出你喜欢的颜色 → 系统自动生成和谐配色

设置步骤：

1. Elementor 菜单 → Default Colors → 点开四种颜色类型
2. 为每种类型粘贴色号或用拾色器选颜色 → Apply

[截图：Elementor Default Colors 面板，四种颜色类型设置界面]

EP540：将颜色同步到菜单和 Footer 链接

全局颜色设置后，菜单的 Hover（悬停）效果和超链接颜色还是原来主题的蓝色，需要手动改。

操作步骤：

1. 退出 Elementor → Appearance → Customize → General Options → General Styling

要改的颜色：

Ocean WP 主题特殊规则： Primary Color 在 Ocean WP 里控制的是 Hover 颜色（不是显示颜色），所以把 Hover 和 Primary 都设成同一个品牌色。

[截图：Customize → General Options → General Styling 颜色设置面板]

移除 Top Bar（顶部条）： Appearance → Customize → Top Bar → 取消勾选「Enable Top Bar」→ Publish （去掉多余的上方横条，让菜单区域更干净，同时消除多余的 Border Line）

Border Color（分隔线）：

• Main Border Color 控制菜单下方的细线
• 想要菜单和内容区融合 → 设为白色（分隔线消失）
• 想保留分隔感 → 保持默认颜色

Publish 保存所有更改。

EP541：Elementor 区块结构（Anatomy of Sections）

理解这三层结构是设计任何页面的基础：

Section（行）
  └── Column（列）
        └── Element（元素 / Widget）

Section（区块）：

• 页面里的每一「行」就是一个 Section
• 宽度默认占满整个页面（Full Width）
• 一个 Section 内可以有多个 Column

Column（列）：

• Section 内的水平分割
• 1 Column = 1 整行、2 Columns = 左右各一半、最多可以有 6 列
• 每个 Column 可以独立添加内容

Element/Widget（元素）：

• Column 里放的内容块
• 种类：Heading、Text Editor、Image、Video、Button、Testimonial、Icon List、Google Map…等等

实际应用（以 Pat Flynn 首页为例）：

建议原则： 每个主要内容区块 = 1 个 Section。不要把太多不相关内容堆进同一 Section，否则很难管理。

EP542：Elementor 设计阶段作业

完成以下步骤代表 Elementor 基础设置全部完成：

1. ✅ 预设计首页（创建 Home 页 + 设置为前页 + 隐藏标题）
2. ✅ 设置全局字体（Global Values → Default Fonts）
3. ✅ 设置全局颜色（Global Values → Default Colors）
4. ✅ 将菜单和 Footer 字体与全局字体匹配（Customize → Typography）

参考资源：

• Canva 字体配对指南
• fontpair.co
• Canva 调色板生成器
• html-color-codes.info 颜色提取工具
• Adobe Color Wheel

核心概念速查

行动步骤

1. 上传 Logo 到 Canva Color Palette Generator → 记下你的品牌色色号
2. Elementor 菜单 → Default Colors → 设置 Primary（黑）、Secondary（灰）、Text（灰）、Accent（品牌色）→ Apply
3. Appearance → Customize → General Options → General Styling → 更新 Primary Color、Link Color、Link Hover Color
4. Customize → Top Bar → 取消勾选 → Publish
5. Publish 所有更改

工具 & 资源

常见误区

• ❌ 用太多颜色——2–3 个颜色已经足够，超过会让设计显得凌乱
• ❌ 只更新 Elementor Default Colors，忘记更新 Customize → General Styling——菜单 Hover 会仍然是蓝色
• ❌ 按钮和标题用同一个颜色——Primary（标题）和 Accent（按钮）要有区分，视觉层次更清晰
• ❌ 不参考颜色心理学——随意选色可能与你的行业期望不匹配

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 539
2. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 540
3. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 541
4. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 542

Blog / Website：

1. Canva Color Palette Generator
2. html-color-codes.info 颜色提取
3. Adobe Color Wheel
4. Canva 网站配色案例