EP548-550. “首页设计：社交证明与 Email 订阅区域”

• 用 Margin 给带背景色的 Section 加间距，背景色会在中间断层——该用的其实是 Padding
• 评价文字用斜体是业界惯例，能让引用内容一眼被认出跟正文不一样
• Email Opt-in 没给访客任何理由订阅，转化率注定很差——免费课程、PDF、折扣码，总得给点什么

重点内容

EP548：添加社交证明（Testimonial）

为什么需要 Social Proof： 访客看到你的网站，最本能的疑问是「我能信任你吗？」社交证明（用户评价、媒体背书、合作品牌 Logo）直接回答这个问题。没有品牌知名度 → 社交证明更重要。

两种常见形式：

1. Testimonial（客户评价）：真实用户的文字评价 + 头像 + 姓名
2. Featured In（媒体背书）：在哪些媒体/平台出现过的 Logo 列表

使用 Testimonial Widget（课程演示）：

1. Widgets 面板 → 找到「Testimonial」→ 拖到 Above the fold Section 下方（会自动创建新 Section）
2. Content → 填写：
   • Text：客户评价的完整文字（用真实好评，越具体越有力）
   • Image：上传评价者头像（选 Thumbnail 尺寸，减小加载体积）
   • Name：评价者姓名
   • Title：职位/网站（例：「Founder, kijostore.com」）
   • Image Position：Side（头像在侧面，省空间，更专业）

Style 调整：

• Content → Text Color：深灰（白色 Section 上更易读）
• Content → Typography → Size：21px；Style → Italic（评价用斜体，是业界惯例，让引用内容「脱颖而出」）
• Image → Size：50px；Border Radius：50（正圆形头像）
• 评价里的关键数据（如「$1,200 within the first week」）→ 用 HTML <b> 标签加粗：<b>$1,200 within the first week</b>

[截图：Elementor Testimonial Widget 内容设置面板，含头像/姓名/评价文字栏位]

Margin vs Padding（⭐ 重要区别）：

Edit Section → Advanced → Padding → Top/Bottom 各设 50–80px

EP549：Email Opt-in 设计（Part 1）

Email Opt-in 是把访客变成长期粉丝的关键步骤。这一讲用「两列全幅背景」的设计，左边放文字+表单，右边放背景图中的人物。

操作前准备——在 MailPoet 里创建 List 和 Form：

步骤一：创建专属 MailPoet List

1. WordPress 后台 → MailPoet → Lists → Add New
2. 命名（例：「Homepage - Digital Marketing Hacks」）
3. Description 里写上这个 List 里会发什么内容（仅自己看）→ Save

步骤二：创建 MailPoet Form

1. MailPoet → Forms → Add New
2. 命名（例：「Homepage Digital Marketing Hacks Form」）
3. 绑定上面创建的 List
4. Fields 设置：
   • 添加「First Name」字段 → Edit Display → Label Inside（标签显示在输入框内，更美观）→ 不设必填
   • Email 字段：Label Inside → 必填（默认）
   • Submit Button：修改文字（例：「Send Me the Hacks」）→ Done
5. Save

[截图：MailPoet Forms 编辑器，First Name/Email 字段与 Submit Button 设置]

Elementor 设计步骤：

1. 首页底部 → 点击「+」新增 Section → 选2 列布局
2. 左列将放：Heading + Text + MailPoet Form
3. Edit Section → Style → Background → 上传第二张背景图（Pixabay → 搜索「freedom」→ 选有人物、有空白空间的横向图 → 下载次大尺寸）
4. Layout → Minimum Height → 750px
5. Style → Background → Size → Cover
6. Style → Background Overlay → 品牌色 → Opacity 约 0.15（与首屏背景颜色感一致）

EP550：Email Opt-in 设计（Part 2）

继续 Elementor 设计：

添加 Heading：

1. 拖 Heading Widget 到左列
2. 文字：「GET DIGITAL MARKETING HACKS FOR FREE」（全大写）
3. Style → Text Color → 白色；Transform → Uppercase；调整 Size

添加描述 Text：

1. 拖 Text Editor Widget 到 Heading 下方
2. 填入描述，例：

Get the latest hacks for Digital Marketing — Facebook, YouTube, Instagram, LinkedIn, SEO, plus the Content Creation Machine. $99 of value, for free. Sign up below and we'll send it to you.

1. Style → Text Color → 深灰（与白色背景对比）；Size → 22–24px

添加 MailPoet Form：

1. Widgets 面板 → WordPress Widgets → MailPoet Form → 拖入左列
2. 选择你创建的 Form → 它会显示「First Name」「Email」「Send Me the Hacks」按钮

修改 MailPoet 输入框样式（可选）： 默认 MailPoet 输入框是透明的。如果想改为白色背景且并排显示：

1. MailPoet → Forms → 选你的 Form → 点击「Styles」标签
2. 找到 .mailpoet_paragraph 下的 line-height: 20px; 这一行
3. 在它下方加入以下 CSS 代码：

   background: white;
   display: inline-block;

1. Save → 回 WordPress 更新页面

效果：First Name 和 Email 并排显示，背景变白色，更干净。

[截图：修改样式后的 Email Opt-in 区块完整效果，左列表单+右侧背景图]

保存模板： 在删除这个 Section 之前（下一讲要展示另一种设计）→ 右键 Section → Save as Template → 命名「Email Opt-in Full Section」→ Save （以后任何页面都可以从 Saved Templates 调用）

核心概念速查

行动步骤

Social Proof Section：

1. Widgets → Testimonial → 拖到 Above the fold 下方
2. 填写真实评价内容（文字、头像、姓名、职位）
3. Image Size → Thumbnail；Border Radius → 50
4. Style → Italic；Text Color → 深灰；Size → 21px
5. Edit Section → Advanced → Padding → Top/Bottom 设 60–80px（不要用 Margin）
6. Edit Section → Style → Background → Classic → Color → White

Email Opt-in Section：

1. MailPoet → Lists → 新建 List（命名清楚）→ Forms → 新建 Form（绑定 List）→ 简化字段设置
2. Elementor → 新增 2 列 Section → 上传背景图（人物类，有空白空间）→ Cover → Overlay 品牌色
3. 左列：Heading（提供的福利名称）+ Text（描述）+ MailPoet Form Widget
4. 如需修改输入框样式 → MailPoet → Form → Styles → 加 CSS
5. 完成后 → 右键 Section → Save as Template（备用）

工具 & 资源

常见误区

• ❌ 用 Margin 来给 Section 内容加间距——Margin 会在 Section 之间产生颜色断层，应该用 Padding
• ❌ Email Opt-in 不给访客任何理由订阅——必须提供有价值的东西（免费课程、PDF、折扣码）
• ❌ MailPoet Form 用默认样式不美化——透明背景的输入框在深色背景上看不清楚
• ❌ Testimonial 用假评价——真实评价才有说服力，假评价一旦被发现会彻底破坏信任

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 548
2. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 549
3. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 550

Blog / Website：

1. Pixabay.com
2. MailPoet.com