EP575-577. “设计 Start Here 页面（模板编辑 + 添加内容 + 内容模板化）”
🔒 登录后可标记已读- Start Here 页不是 About 页——它是销售漏斗的第二站，任务是把冷访客「暖化」，不是讲公司历史
- 品牌色号不用自己调，Google 搜「品牌名 Hex Color」，结果顶部直接给出色号
- 一个「标题+图片」的双列 Section 设计好之后，直接复制粘贴就能重复用，样式和间距全部保留，只需换内容
重点内容
EP575：Start Here 页面 — 模板编辑
Start Here 页面的定位： 用户路径：首页（CTA 按钮）→ Start Here（了解你是谁/你的课程）→ Courses 页（购买决策）
Start Here 页不是 About 页——它是一个销售漏斗页面，目标是「暖化」访客，不是介绍你的公司历史。
操作步骤：
- WordPress 后台 → Pages → All Pages → Start Here → Edit with Elementor
- 清除之前的内容（全选 Section → Delete）
- 点击「+」图标 → 选「Templates」→ Pages 标签
- 浏览模板，选择「Business / Homepage」风格的模板（其中包含双列布局、图标展示区、计数器区域）
- 点击「Insert」→ 允许覆盖 → Elementor 会加载完整模板
[截图：Elementor Templates 库 Pages 标签下浏览 Business/Homepage 风格模板]
模板里默认包含的区域（根据课程演示）：
- 上半部分：双列布局（大标题 + 介绍文字 + 图片）
- 中间：4 个图标展示卡（带 Hover 效果）
- 颜色区域：带渐变背景的描述区域
- 计数器区域：数字动态递增展示成果
- 团队介绍区（课程将其删除）
编辑上半部 Above the Fold：
- 删除默认按钮（Start Here 页不需要 CTA 按钮，目的是让用户向下滚动浏览内容）
- 修改标题 → 写「THE FUTURE IS ONLINE」
- Style → Typography → Transform → Uppercase；适当调整 Size
- 删除默认描述文字 → 粘贴准备好的文字（分三段：第一段谈困扰，第二段谈解决方案，第三段说结论）
- 图片保留默认（Pixabay 图片），也可以换成你自己的品牌图
编辑图标展示区（4 个卖点卡）： 模板里自带 4 个 Icon Box，配有 Hover 蓝色效果。修改内容为你的课程卖点：
- 实战课程，动手教学（Practical courses, hands-on teaching）
- 无限续期访问（Unlimited access）
- 无限高级支持（Unlimited premium support）
- 30 天退款保证（30-day money-back guarantee）
💡 保持 Icon Box 每个标题/描述字数大致相等（如果某一项太短，加「— Forever」等占位文字让高度对齐）
编辑渐变背景区域： 默认是粉色→蓝色渐变，不符合品牌色主题 → 改成品牌色渐变：
- Edit Section → Style → Background → Gradient
- 第一个颜色：粘贴品牌 Accent 色（如番茄红
#e04000） - 第二个颜色：可以用深蓝或黑色，位置调到末尾
- 调整 Location（渐变起点/终点位置）直到视觉满意
[截图：Elementor Background Gradient 设置面板与渐变效果预览]
编辑计数器区域： 点击每个计数器 Widget → Content → 填入：
- 课程数量：
21，标签：Courses - 学生人数：
14301，标签：Students - 评价数量：
4556，标签：Reviews
删除团队区域： 右键团队 Section → Delete（Start Here 页不需要团队介绍，节省篇幅）
添加「Learn More」按钮：
- 删除模板里不合适的按钮 → Widgets → Button → 拖入渐变区域底部
- Text：「LEARN MORE」→ 链接到 Courses 页
- Style → Typography → Transform → Uppercase
- Hover → 颜色稍浅 → Animation → Grow
EP576-577：添加内容 + 内容模板化
切换为 Elementor Full Width 布局： 模板默认是「Boxed」设计（内容有左右边距）。为了添加品牌颜色的全幅区域，需要改为全宽： Settings → Page Layout → Elementor Full Width
切换后所有区域铺满屏幕宽度，允许用品牌色作为全幅背景。
创建品牌颜色内容区（以 Shopify 为例）： Start Here 页的目的之一是「预览你的课程内容」，让访客对你能教的东西有具体感知。
- 新增 Section → 拖入 Heading Widget → 写「MASTER SHOPIFY DROPSHIPPING」
- Style → Typography → 调整大小
- Advanced → Padding → 70px（标准大字体间距）
- Edit Section → Style → Background → Classic → 颜色：
- 在新标签页搜索「Shopify Hex Color」→ 复制 Shopify 的绿色色号（
#96BF48） - 回到 Elementor → 粘贴色号
- 效果：整个 Section 使用 Shopify 品牌绿色作为背景，视觉上代表这是关于 Shopify 的内容
- 在新标签页搜索「Shopify Hex Color」→ 复制 Shopify 的绿色色号（
💡 任何品牌的 Hex Color：Google「[品牌名] Hex Color」→ 搜索结果顶部会直接显示色号。
添加图文内容（双列布局）：
- 在 Shopify 绿色 Section 下方新增 Section
- 点击「+」选择 2 列布局
- 左列：Heading（课程模块标题，大字，Uppercase）
- 右列：Image（相关内容截图，例：Shopify Dropshipping Business Model 图表）
- 保持白色背景（与绿色 Section 形成明暗对比）
复制 Section 加速内容编排（⭐ 核心技巧）： 一旦设置好了一个「标题 + 图片」的双列 Section，就不需要重新设计后续的：
- 右键该 Section → Copy
- 滚动到下方空白处 → 右键 → Paste
- 只需要替换图片内容和标题文字，样式、列宽、间距全部保留
[截图：右键 Section 后 Copy/Paste 菜单，快速复制双列内容区块]
设置内容间距（Margin 加「呼吸空间」）： 多个内容区域叠放时，中间的 Section 要加 Margin：
- Edit 中间 Section → Advanced → Margin → Top + Bottom → 150–200px
- 效果：每次滚动时视野里只出现一个内容区，有「聚焦感」
图片列宽调整（让图片更显眼）： 拖动两列之间的边界 → 左列 37%，右列 63%（或 37/37 的双列）→ 图片占更大比例
添加最终 CTA 按钮：
- 复制首页已经设计好的 Learn More 按钮（右键 → Copy → Paste）→ 已有正确的样式
- 更改链接到 Courses 页
- 改为 Large Size（大号，与内容区视觉匹配）
核心概念速查
| 概念 | 解释 |
|---|---|
| 页面模板（Page Template） | Elementor 预设的整页设计，Insert 后直接套用并编辑 |
| Elementor Full Width | 保留菜单/Footer，内容区全宽（无左右边距） |
| 品牌 Hex Color | 公司的官方色号，Google「品牌名 Hex Color」可查 |
| Gradient 背景 | 两种颜色之间渐变的背景效果 |
| 计数器 Widget | 数字动态从 0 递增到目标值，展示成果/数据 |
| Copy Section | 复制整个 Section 包括所有样式，只替换内容 |
| Section Margin | Section 之间的外部间距，大 Margin 创造「呼吸感」 |
行动步骤
模板搭建：
- Pages → Start Here → Edit with Elementor → 清空默认内容
- + → Templates → Pages → 选 Business 风格模板 → Insert
- Settings → Page Layout → Elementor Full Width
内容编辑：
- 标题改为「THE FUTURE IS ONLINE」→ Uppercase
- Icon Box × 4：填写课程卖点（等长描述）
- 渐变 Section：改为品牌色渐变 → 调整两种颜色 + 位置
- 计数器：填写课程数、学生数、评价数
- 删除团队 Section → 添加 Learn More 按钮
内容区域：
- 新增 Shopify 色 Section（搜「Shopify Hex Color」→ 粘贴色号）
- 双列：左边标题（大字 Uppercase）+ 右边图片
- 右键 Copy → Paste → 重复 2–3 个课程模块
- 中间 Section Margin → 150–200px（创造「每次只看一个」的聚焦感）
工具 & 资源
| 工具 | 用途 | 费用 |
|---|---|---|
| Elementor Templates Library | 免费页面模板 | 免费版可用 |
| Pixabay.com | 免费图片 | 免费 |
| Google「[品牌名] Hex Color」 | 查找任何品牌的官方色号 | 免费 |
常见误区
- ❌ Start Here 页放 Email Opt-in 或其他 CTA——Start Here 的目标是「暖化」访客并引导去 Courses，不是在这里收邮件
- ❌ 直接删除模板所有内容重建——利用模板已有的区域（计数器、图标卡）只改内容，大大节省时间
- ❌ 内容区块之间没有足够间距——每个区块之间至少 100–200px Margin，给访客「喘息感」
- ❌ 按钮没有链接——所有页面的 Button 都要在 Content → Link 填入正确 URL，否则是死按钮
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 575
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 576
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 577
Blog / Website：