EP533-538. “Elementor 入门：设置、预设计与全局字体”
🔒 登录后可标记已读- Elementor 样式不更新时，先别急着重装插件，点一下 Regenerate CSS 就能解决 99% 的问题
- 全局字体一次设置好，整个网站自动套用——省去后面逐页手动调整字体的重复工作
- 全局字体设完，菜单和 Footer 的字体不会自动跟着变，还得手动去 Customize → Typography 同步一次
重点内容
EP533：Elementor 是什么（Introduction）
Elementor = 可视化网页设计工具（Page Builder）
- 免费（90% 功能完全免费，够用）；Pro 版约 $99–$199/年 📌 具体价格请以 Elementor 官网当前信息为准，会员方案经常调整
- 实时预览（Live Editing）：边拖边看效果，不需要发布再预览
- 大量模板：不会设计没关系，直接套模板改文字/图片
- 无需写代码
- Elementor Canvas：可以清空整个页面（包括 Header、Footer、菜单），从完全空白开始设计
适合用在： 首页、Start Here 页、Resources 页、Landing Page——任何需要视觉设计的页面。
EP534：Elementor 基础设置（Elementor → Settings）
进入 Elementor → Settings 检查一遍，基本不需要改太多：
Settings 标签：
- Post types：默认勾选 Posts + Pages，够用
- Disable default colors / Disable default fonts：先不要勾选，我们之后会设置自己的全局值
- Improve Elementor：匿名数据收集，可以不勾选（减少轻微性能负担）
Tools 标签（最常用）：
- Regenerate CSS：遇到样式不更新的问题，点这个 → 大部分情况能解决
- Sync Library：下载的模板不显示时，点这个同步
- Replace URL：迁移网站或更换域名时使用（先备份再操作）
- Version Control：插件更新后出问题 → 点此回滚到之前版本
- Maintenance Mode：网站维护期间显示「Coming Soon」页面
Role Manager 标签： 控制不同角色（Editor / Author）能否使用 Elementor 编辑。
📌 记住这一条： 遇到 Elementor 样式不更新 → Elementor → Tools → Regenerate CSS，99% 的情况能修复。
[截图：Elementor → Settings → Tools 标签页，Regenerate CSS 按钮位置]
EP535：首页预设计（Home Page Pre-Design）
在用 Elementor 设计首页之前，先做好这些准备工作：
步骤：
- Pages → Add New → 命名「Home」→ Publish
- Pages → All Pages → 找到「Start Here」→ Quick Edit → 把 Slug 改成
start-here→ Update - 找到「Home」→ Quick Edit → Slug 改成
home→ Update - Settings → Reading → Your Homepage Displays → 选「A Static Page」→ Homepage 选「Home」→ Save Changes
- 现在首页 = Home，Start Here 是独立的引导页（不在菜单里也不是首页）
隐藏所有页面标题：
- Appearance → Customize → General Options → Page Title → Style → 改成 Hidden
- 这样所有页面的 H1 标题区域消失，设计更干净
- Publish
打开 Elementor 编辑器： Pages → Home → Edit with Elementor → Settings → Page Layout → 选 Elementor Full Width （保留主题的 Header/Footer，但去掉侧边栏——推荐）
💡 如果你想要完全从零开始、不要 Header 和 Footer，选「Elementor Canvas」；想保留菜单和 Footer 就用「Elementor Full Width」。
EP536：Elementor 编辑器界面导览（Dashboard & Functions）
左侧面板：
- Widgets（元素）：Basic（Heading、Text、Image、Video、Button...）、General（Gallery、Star Rating、Icon List...）、WordPress Widgets
- 所有元素都是拖放（Drag & Drop）操作
编辑器主要功能按钮：
| 功能 | 位置 | 说明 |
|---|---|---|
| Widgets 面板 | 左上角方格图标 | 回到元素列表 |
| Navigator | 左下方 | 快速查看/跳转页面上的所有 Section/Column/Element |
| History | 左下方 | 所有编辑记录，随时撤回 |
| Revisions | 左下方 | 自动保存的历史版本，可回滚 |
| Responsive Mode | 底部图标 | 切换查看桌面/平板/手机版效果 |
| Preview Changes | 底部眼睛图标 | 在新标签页查看真实效果 |
| Update | 底部绿色按钮 | 保存并发布更改 |
| Save as Template | Update 旁边 | 保存当前设计为模板，可复用 |
Page Templates： 点击左上角方格图标 → 点击文件夹图标 → 浏览大量免费页面模板 → 选中 → Insert → 直接套用，然后改内容即可。
[截图：Elementor 编辑器整体界面，左侧 Widgets 面板/Navigator/History 等功能按钮位置]
三个基本概念（Section > Column > Element）：
- Section（区块）：页面的每一行，是最大的容器
- Column（列）：Section 内的列，可以 1–6 列
- Element（元素）：列里的内容（Heading、Image、Button 等）
EP537：设置全局字体（Set Global Values - Fonts）
全局字体 = 一次设置，整个网站自动应用。
进入方式： Elementor 编辑器 → 左上角菜单按钮 → Default Fonts
四种字体类型：
| 类型 | 用在哪 | 课程选择 |
|---|---|---|
| Primary Headline | H1–H6 所有标题 | Open Sans ExtraBold（weight 800） |
| Secondary Headline | 少数特殊 Widget 的标题 | Libre Baskerville |
| Body Text | 正文内容 | PT Sans |
| Accent Text | 按钮、侧边栏等强调元素 | Prata |
如何选字体（不会设计也没关系）：
- 前往 Canva 的字体配对指南（canva.com/learn/the-ultimate-guide-to-font-pairing/）
- 按你的行业/风格找推荐的字体组合（科技感、优雅、亲切...）
- 前往 fontpair.co 输入主字体，找合适的配对字体
字体心理学简要：
- 衬线字体（Serif，如 Libre Baskerville）= 权威、经典、可信赖 → 适合金融、法律、出版
- 无衬线字体（Sans-serif，如 Open Sans）= 现代、友好、易读 → 适合科技、博客、服务
- 字体配对原则：标题和正文要有对比（一个粗一个细，或者一个衬线一个无衬线）
设置步骤：
- 在 Default Fonts 里分别为四种类型选择字体
- 按 Apply
- 立刻在页面上看到效果
[截图：Elementor Default Fonts 面板，四种字体类型设置界面]
EP538：将字体匹配到菜单和 Footer
全局字体设置后，菜单和 Footer 的字体还没有自动更新，需要手动同步。
操作步骤：
- 在 Elementor 记下你选的 Secondary Headline 和 Body Text 字体名称
- 退出 Elementor → Appearance → Customize → Typography
要改的三个地方：
| 位置 | 使用哪种字体 |
|---|---|
| Main Menu（主菜单） | Secondary Headline 字体（例：Libre Baskerville），字号 14px |
| Footer Copyright（版权文字） | Body Text 字体（例：PT Sans），字号 13px |
| Footer Menu（底部菜单） | Body Text 字体（例：PT Sans），字号 13px |
- 每个位置都修改完后 → Publish
💡 建议让 Footer Copyright 和 Footer Menu 用同一字体（Body Text），而 Main Menu 用 Secondary Headline 字体——两者有对比，视觉上更有层次感。
核心概念速查
| 概念 | 解释 |
|---|---|
| Global Values（全局值） | 在 Elementor 设置的默认字体/颜色，全站自动应用 |
| Section | Elementor 中的行容器，页面被切分成多个 Section |
| Column | Section 内的列，决定水平排列方式 |
| Element/Widget | Column 里的内容单元（标题、图片、按钮等） |
| Regenerate CSS | Elementor 样式不更新时的万能修复按钮 |
| Elementor Canvas | 完全空白的画布模式，去掉 Header/Footer |
| Elementor Full Width | 保留 Header/Footer，去掉侧边栏的页面布局 |
行动步骤
- Elementor → Settings → Tools → 熟悉「Regenerate CSS」的位置（以后遇到样式不更新靠它）
- Pages → 创建 Home 页 → Settings → Reading → 设为首页
- Appearance → Customize → General Options → Page Title → Hidden → Publish
- Pages → Home → Edit with Elementor → Settings → Page Layout → Elementor Full Width
- Elementor 菜单 → Default Fonts → 参考 Canva 字体配对指南 → 选好 4 种字体 → Apply
- Appearance → Customize → Typography → 修改 Main Menu、Footer Copyright、Footer Menu 字体 → Publish
工具 & 资源
| 工具 | 用途 | 费用 |
|---|---|---|
| Elementor（WordPress 插件） | 可视化页面设计工具 | 免费版已足够 |
| Canva Font Pairing Guide | 按行业推荐字体组合 | 免费 |
| fontpair.co | 字体配对工具 | 免费 |
常见误区
- ❌ 跳过 Global Values 直接设计每个元素——全局值能省去 80% 重复调整工作
- ❌ 选了太多种字体——整个网站 4 种字体已经是上限，越少越专业
- ❌ 遇到 Elementor 显示问题就重装插件——先试 Regenerate CSS，大部分问题能解决
- ❌ 只设置 Elementor 字体，忘了更新菜单和 Footer——要手动在 Customize → Typography 里同步
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 533
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 534
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 535
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 536
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 537
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 538
Blog / Website：