EP486. “用 Gutenberg 实际编辑首页”

• 首页文案有一个万能公式：情绪标题 → 说明价值 → 展示内容 → 个人化收尾，四步走完首页骨架就成型了
• 页面已经发布过，编辑完不能直接点 Preview 看效果，要先点 Update 保存才行
• Gallery 图片的排列顺序就是上传顺序，先传的排最前面，想调整顺序得重新控制上传次序

重点内容

清理练习页面

1. Pages → All Pages，把之前练习用的测试页面（例子中叫 "About Me"）移到 Trash 删掉，因为它只是用来熟悉编辑器的。
2. 点击进入正式的 Home 页面开始编辑。
3. 回顾一下：Home 页面之前已经在主题设置（例子中是 OceanWP Settings）里设过 Content Layout = Full Width（去掉侧边栏）、Display Page Title = Disable（不显示"Home"字样）。这两项设好之后不需要再动，可以直接收起这个面板。

首页内容搭建流程

1. 加大标题（Heading）
   • 点击默认的第一个 Paragraph 区块下方/上方的 + 号，插入一个 Heading 区块。
   • 输入吸引人的标题文字（例子："There's no greater joy than watching beautiful testimonials of people achieving their goals and dreams."）。
   • 右侧对齐工具选 居中（Align Center）。
   • 在 Block 设置面板里把标题级别设为 Heading 1（数字越小字越大，首页大标题通常用 H1）。

1. 说明段落（Paragraph）
   • 把预先写好的说明文字粘贴进 Paragraph 区块。
   • 💡 如果一次性粘贴一大段包含多个自然段的文字，Gutenberg 会自动把每一段拆成独立的 Paragraph 区块，方便之后单独调整某一段。
   • 全部选中后统一设置 居中对齐。
   • 把字号从 Normal 调成 Medium，让说明文字更醒目一点。

1. 展示课程图片（Gallery）
   • 插入一个 Gallery 区块，上传两张图代表网站提供的两门课程（例子：Shopify 课程和 Digital Marketing 课程）。
   • 📌 图片在 Gallery 里的排列顺序 = 上传顺序，先上传的排左边。
   • 把图片宽度设为 Wide Width，让图片区块更宽、更醒目。
   • 给每张图片加 Caption（说明文字），简单介绍这张图代表的课程内容（例子："Start your online business with Shopify"、"Learn market research, how to attract an audience and how to sell"）。

1. 个人化结尾图片
   • 页面最下方加一个 Image 区块，放一张创始人/团队的照片，让首页显得更有人情味、更值得信任。
   • 把图片尺寸调小（不需要占太大空间），居中对齐。

1. 随时检查效果
   • 页面如果已经 Publish 过（Home 页面在 EP483 已经发布过一次），编辑后不能直接点 Preview 看到最新效果，要先点 Update 保存，再点 Preview 查看。
   • 也可以点 Switch to Draft 切回草稿状态编辑，这样改完不会立刻在前台生效；但示范中为了方便直接用 Update + Preview 的方式。

[截图：Home 页面编辑中，Heading + Paragraph + Gallery + 结尾 Image 的完整区块堆叠]

[截图：Preview 出来的首页最终效果]

首页文案结构拆解（可直接套用的模板）

作者把整个首页内容拆解成一个可复用的公式：

1. 大标题：抓住情绪、点出你是做什么的（例子：教学 + "passionate about teaching"，先建立情绪共鸣）。
2. 说明段落：回答"这跟我有什么关系（What's in it for me）"，展开讲你能带来什么。
3. 展示图 + Caption：用一到多张图片展示你提供的产品/课程/服务，配文字说明具体内容。
4. 个人化结尾：一张创始人/团队/品牌的照片，加一句有温度的话，拉近和访客的距离。

行动步骤

1. 删除练习用的测试页面。
2. 进入 Home 页面，用 Heading（居中、H1）做大标题。
3. 加 Paragraph 说明网站/品牌是做什么的，居中、字号调到 Medium。
4. 用 Gallery 区块展示 1-2 张代表产品/课程的图片，设为 Wide Width，加 Caption。
5. 页面底部加一张创始人/团队照片，做个人化收尾。
6. Update 保存后点击 Preview 检查效果，不满意就回编辑器继续调整。
7. 首页做完再进入下一课（免费设计素材/图片资源），如果目前没有图片可以先跳过看下一课再回来完成首页。

常见误区

• 页面已经 Publish 过之后，忘记先点 Update 就直接点 Preview，看到的还是旧版本内容。
• Gallery 图片上传顺序和排列顺序搞反——先上传的图片会排在最前面（通常是左边）。
• 觉得首页设计"必须"照抄示范模板——作者明确说没有标准答案，四段式结构（标题/说明/展示/个人化）只是一个参考框架。

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 486 Edit Your Home Page