EP578-586. “设计内容页面：课程页、关于页、资源页、联系页 + 设计完成后”

• 关于页写太多公司历史和成就，访客根本不关心——他们想看的是「你能帮我做什么」
• 资源页没写 Affiliate 声明是道德红线，透明告知联营链接不是可选项
• 一个「标题+图片」的课程卡片区块做好之后，复制粘贴就能批量铺出十几门课程，样式全部保留

---

重点内容

---

EP578：设计课程页（Courses）— ATR 区域

课程页（Courses Page）的目的： 用户路径：首页 → Start Here → Courses（购买决策页） 课程页是漏斗里最接近「转化」的地方。用户到这里通常已经被「暖化」，只需要最后一推。

操作准备：

1. Pages → Courses → Edit with Elementor
2. Settings → Page Layout → Elementor Full Width

添加「致访客的信（Letter from Us）」区块（ATR = Above The Recall）： 在展示课程之前，先加一个个人化的自我介绍区域，建立情感连接：

1. Elementor → Templates → Blocks（区块模板）（不是整页模板，是单个区块）
2. 搜索带有「人物照片 + 文字」布局的 Block → 选择一个照片在左、文字在右的简洁版本 → Insert

[截图：Elementor Templates Blocks 标签搜索「人物照片+文字」区块模板]

1. 更换照片：点击图片 → Choose Image → 上传创作者合照 → Style → Max Width 约 85%
2. 编辑文字：
   • 删除默认文字 → 粘贴准备好的自我介绍（强调社交证明：「超过 2700 条五星好评」）
   • 落款改为「Robin & Jesper」
   • Style → Typography → Transform → Default（取消 Uppercase，名字要正常大小写）
   • 选中落款文字 → 点击「I」（Italic）→ 斜体，像真正签名
3. Edit Section → Advanced → 调整 Padding（左右各 50px）让内容不贴边

---

---

EP579：设计课程页 — Column Design（课程卡片从模板复制）

提取首页课程卡片作为模板：

1. 退出 Courses 页 → Exit to Dashboard → Pages → Home → Edit with Elementor
2. 滚动到课程展示 Section（Showcase Section）
3. 右键该 Section → Save as Template → 命名「Three Column Courses Template」→ Save
4. 退出首页 → 回到 Courses 页

在 Courses 页插入模板并改造：

1. Elementor → Templates → My Templates → 找「Three Column Courses Template」→ Insert
2. Settings → Page Layout → Elementor Full Width（插入模板后页面布局可能重置）
3. 改造模板：
   • Edit Section → Style → Background → 删除背景色 → 改为白色
   • 删除每列的 Hover 绿色效果：Edit Column → Style → Hover → Opacity 调至 0（全透明）
   • 用Paste Style快速复制同样的 Hover 设置到其他列
   • 删除「View All Courses」按钮（课程页里不需要，用户已经在这里了）
   • 删除默认标题（Business Courses 标题已在上方 ATR 区域建好）

添加 Box Shadow（课程卡片投影效果）： Edit Column → Style → Border → Box Shadow → 点击开启 → 自动添加轻微投影 效果：卡片在白色背景上「浮起来」，视觉层次更强。

• Copy → Paste Style → 应用到其他列

[截图：课程卡片加上 Box Shadow 后的浮起效果]

调整卡片 Padding（让卡片更细长）： Edit Column → Advanced → Padding → 解锁 → 左右各 70px（加大左右内距让卡片变窄）

添加课程区域分类标题：

1. Edit Section → Style → Background → 品牌红色
2. Heading Widget → 文字：「BUSINESS COURSES」→ Uppercase → 白色文字
3. Advanced → Padding → 50px

---

---

EP580：设计课程页 — Column Template（批量复制）

两列（大课程）区域：

1. 复制 Business Courses 的标题 Section → Paste → 修改文字：「COMPLETE DIGITAL MARKETING COURSES」
2. 复制 Business Courses 的卡片 Section → Paste → 改成两列布局（两门大课）
3. 更换每张卡片的图片和标题

三列（小课程）区域：

1. Elementor → Templates → My Templates → 插入「Three Column Courses Template」
2. 调整背景为白色、Remove Hover 效果 → Copy → Paste Style
3. 重复 4 次（4 行 × 3 列 = 12 门课程）
4. 再复制两行两列布局（最后 4 门课）

关于 Section Margin： 每个课程组的 Section → Advanced：

• Top Margin：100px
• Bottom Margin：70px
  效果：滚动时每次只看到一组课程，不会信息过载。

在底部添加 Email Opt-in：

1. Elementor → My Templates → 插入「Email Opt-in V2」（之前保存的紧凑版模板）
2. Settings → Page Layout → Elementor Full Width（插入模板后记得重设）

确保所有按钮正确链接： 每个课程卡底部的「Learn More」按钮 → Content → Link → 填入 Udemy 课程 URL → 勾选「Open in New Window」（在新标签页打开，不让用户离开你的网站）

---

---

EP581：设计关于页（About Page）

关于页的地位： 如果首页/Start Here 页已经详细介绍了你和你的品牌，About 页的重要性相对较低。但它是一个加分项——让想进一步了解你的访客有地方深挖。

用模板快速搭建：

1. Pages → About → Edit with Elementor
2. Settings → Page Layout → Elementor Full Width
3. Elementor → Templates → Pages → 搜索「about」→ 选一个简洁的两列布局（人物图片 + 文字）→ Insert
4. 删除不需要的区域：视频区域、图片轮播（Image Carousel）、心形图标 → 右键 Delete

编辑内容：

1. 背景区域：保留（课程演示的橙红色背景与品牌色调相近）
2. 文字：「About Us」标题保留
3. 社交图标：
   • 删除 Twitter 图标（不使用 Twitter）
   • 点击 Instagram 图标 → Content → Icon → 搜索「Instagram」→ 替换
   • Style → 找到 Instagram 官方红紫色 Hex（搜索「Instagram hex color red」→ 找到 #C13584）→ 粘贴到 Icon Color 和 Title Color

[截图：About 页社交图标区域，替换成 Instagram 图标并改色后的效果]

「Our Story」区域： 写一段公司/品牌故事，强调：

• 你们是怎么开始的（2016 年，一个问题：如何从零开始在网上赚钱？）
• 学到了什么
• 现在想把这些分享出去

底部添加 CTA 按钮（Start Here）： About 页最底部 → Widgets → Button → 「START HERE」→ 链接到 Start Here 页 → Uppercase → Medium → Hover → Grow

逻辑：访客看完关于页，被你的故事打动了 → 引导他们「从这里开始」进入漏斗。

---

---

EP582：设计资源页（Resources）— Part 1

资源页的双重价值：

• 为访客提供真实使用过的工具推荐
• 通过 Affiliate Links 产生被动收入（每次有人点击购买，你拿佣金）

获取页面 Block 的技巧： 除了从「Blocks」标签搜索，还可以：

1. Elementor → Templates → Pages → 找一个里面有你想要的 Block 风格的整页模板
2. Insert 整页 → 然后删掉不需要的区域 → 只保留你想要的 Block
   这样可以用到在 Blocks 标签里找不到的独特设计。

资源页标题区（从模板来）：

1. 插入一个带标题栏的页面模板 → 保留顶部标题区域，其他全删
2. 修改文字：「THE RESOURCES WE USE」
3. 副标题：「Here is a collection of all our most valuable resources that we use and warmly recommend.」
4. 在副标题下方另起一行：「Disclaimer: Some links will be affiliate links.」（透明声明联营链接）

资源卡片设计（Logo + 描述 + 按钮）： 每个资源 = 一个两列 Section（左边小，右边大）：

• 左列（28% 宽）：资源 Logo 图片（居中，Medium 尺寸）
• 右列（72% 宽）：Heading（资源名称）+ Text（描述）+ Button（「TRY NOW」）

给资源卡片加边框（Box Design）： Edit 左列 → Style → Border → Border Type：Solid → Width：1 → 设置上/下/左边框（右边去掉） Edit 右列 → Style → Border → Border Type：Solid → Width：1 → 设置上/下/右边框（左边去掉） 效果：两列合成一个完整的矩形边框，视觉上像一个独立「卡片」。

[截图：资源卡片 Logo+描述+按钮 加上边框后的卡片效果]

Section Padding（控制卡片宽度）： Edit Section → Advanced → Padding → 左右各 300–400px（很大！）→ 卡片变窄，更像展示区 目的：资源展示不需要全幅，收窄到屏幕中央更聚焦。

---

---

EP583：设计资源页（Resources）— Part 2

批量复制资源卡片：

1. Edit 第一个资源 Section → Advanced → 移除 Bottom Padding（为 0）
2. Edit 第二个资源 Section → Advanced → 移除 Top Padding（为 0）
3. 效果：两个 Section 的边框「无缝连接」（看起来是一个大框里的两行）
4. 右键 Section → Copy → Paste → 重复添加其余资源（课程演示总共 6 个资源）

但要注意相邻 Section 的边框处理： 当多个 Section 叠放时，相邻边会出现「双线」（上方 Section 的下边框 + 下方 Section 的上边框各一条）：

• Edit 下方 Section 的两列 → Style → Border → 把 Top Border 设为 0

统一样式（Paste Style 批量操作）： 完成第一张资源卡的样式（字体大小、Padding、边框颜色）后：

• Copy 第一张左列样式 → 右键其他左列 → Paste Style
• Copy 第一张右列样式 → 右键其他右列 → Paste Style
• Copy 标题 Widget → Paste Style → 应用到所有资源标题
• Copy 描述 Widget → Paste Style → 应用到所有描述

图片居中 + 垂直居中：

• 图片：点击图片 → Content → Alignment → Center
• Logo 列：Edit Column → Layout → Vertical Align → Middle（Logo 在列高度里居中）

按钮样式： TRY NOW 按钮 → Uppercase → Small Size → Hover Animation → Grow

最后：加 Pretty Links： 所有资源的 Affiliate 链接 → 先转为 Pretty Links（例：yourdomain.com/bluehost）→ 再填入按钮的 Link 字段。

---

---

EP584：设计联系页（Contact Page）

联系页的设计原则： 访客点进联系页只有一个目的：联系你。不要在这里放 Email Opt-in、不要塞大量介绍文字——直接让联系表单成为主角。

操作步骤：

1. Pages → Contact → Edit with Elementor
2. Settings → Page Layout → Elementor Full Width（联系表单在 Full Width 模式下铺满更好看）
3. 原有的 Contact Form 7 表单代码（Shortcode）在 Elementor 里显示为代码，但实际页面会正确渲染 → 不用担心

添加背景图片（增加视觉趣味）： 联系页默认是白底 + 表单，可以加一张背景图片让它不那么单调：

1. Edit Section → Style → Background → Classic → Choose Image
2. 从 Pixabay 找一张「背景感」强的图片（例：城市夜景、抽象纹理）→ 上传
3. Style → Background → Size → Cover

加白色 Overlay 让背景图「退后」： 背景图颜色太强烈会喧宾夺主（表单才是主角）→ Edit Section → Style → Background Overlay → Classic → Color → 白色 → 调整 Opacity

• Opacity 越高 → 背景图越淡，越接近纯白
• 找到一个「隐约可见」的程度（约 70–80% Opacity）→ 背景图变成微妙的纹理，不抢眼

[截图：联系页背景图加白色 Overlay 后的最终效果]

---

---

EP585：完成设计后的持续优化清单

设计完所有页面后，还有几件重要的事：

1. 对每个页面进行速度测试： 之前只测了首页，Start Here、Courses、About、Resources、Contact 都是独立的 URL，都需要单独测速：

• uptime.com/freetools → 逐一测试每个页面
• 重点检查：从模板插入的图片是否太大（模板自带图片通常未压缩）

2. 对每个页面做手机/平板适配： 每个设计完的页面都需要在 Elementor → Responsive Mode → Mobile / Tablet 检查并调整：

• 检查 Padding 是否过大（桌面 70px 在手机上很浪费）
• 检查文字是否被截断或过小
• 检查按钮位置是否在拇指绿区

3. SEO 优化（留到 SEO 章节深入讲）： 把这些页面的标题、描述、H 标签 → 用你在 SEO 章节学到的关键词知识进行优化。

4. 监控跳出率（Bounce Rate）： WordPress 后台 → Insights → Reports → 查看每个页面的 Bounce Rate：

• 正常范围：40–55%
• 高于 55% 要研究原因（内容不相关？加载太慢？设计有问题？）
• 某些页面（下载页、感谢页）天然跳出率高，属于正常

5. 随时更新设计： Elementor 是拖拽工具，更新设计不需要程序员。要养成随时更新的习惯：

• 推出新课程 → 在 Courses 页加新卡片
• 获得新的媒体曝光 → 加到 Social Proof 区域
• 用户反馈某区域不清楚 → 随时修改

---

---

EP586：Elementor 模板与自定义设计作业

完成以下所有页面设计代表这一组通关：

---

核心概念速查

---

行动步骤

课程页：

1. Insert Block 模板（人物照片 + 文字）→ 换图换字 → 签名斜体 → 调 Padding
2. 从 My Templates 插入三列课程模板 → 白色背景 → Box Shadow → 左右 Padding 70px
3. 添加品牌红色「BUSINESS COURSES」标题 Section
4. 重复三列模板 × 4（三列区）+ 两列模板 × 2（两列区）
5. 按钮全部链接 Udemy URL → Open in New Window
6. 底部插入 Email Opt-in V2 模板

关于页：

1. 搜索 about 模板 → Insert → 删多余区域
2. 改社交图标（Twitter → Instagram）→ 修改颜色（Instagram 紫红 #C13584）
3. Our Story 文字 → 底部加「START HERE」按钮

资源页：

1. 两列 Section（28/72 宽比）→ Logo + 名称/描述/按钮
2. 两列各加边框（内侧边去掉）→ 形成完整卡片
3. Section Padding 左右 300–400px
4. Copy → Paste × 6 个资源 → Paste Style 统一样式
5. 所有链接用 Pretty Links 短链接

联系页：

1. Full Width → 背景图 Cover → 白色 Overlay（Opacity 约 75%）

---

工具 & 资源

---

常见误区

• ❌ 关于页写太多历史和成就——访客想看的是「你能帮我做什么」，不是公司简介
• ❌ 资源页没有 Affiliate 声明——透明地告知联营链接是道德要求，不做会损害信任
• ❌ 联系页放了太多额外内容——联系页只需要表单，其他内容分散注意力
• ❌ 设计完成后不测各页面速度——模板图片通常未压缩，可能导致子页面加载很慢

---

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 578
2. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 579
3. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 580
4. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 581
5. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 582
6. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 583
7. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 584
8. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 585
9. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 586

Blog / Website：

1. Pixabay.com
2. uptime.com/freetools/website-speed-test