EP551-556. “首页设计收尾：Email Opt-in V2、Showcase Section、滚动菜单与首页审核”

• 三张展示卡的描述文字长短不一，按钮高度就会跟着参差不齐——必须让文字长度大致相等
• 首页有一个 5 秒测试：截图发给陌生人，5 秒内说不出这网站是做什么的，首页就没设计明白
• 访客已经在首页了，菜单里再放一个「Home」纯属多余，白白占掉一个位置

重点内容

EP551：Email Opt-in Version 2（紧凑版）

V1 的订阅区用了全幅两列背景图，V2 是更紧凑的「居中卡片式」版本，适合不想占太多屏幕的页面。

设计思路： 与其把表单铺满整个区域，不如把表单「收窄」到页面中间，视觉更聚焦，转化效率更高。

操作步骤：

1. 新增 Section → 选 3 列布局
2. 左列和右列设为 15% 宽度（纯空白占位列）
3. 中间列设为 70% 宽度 → 在这里放 Heading + MailPoet Form
4. Edit Section → Style → Background：
   • 选一张抽象图（Pixabay → 搜索 abstract → 下载次大尺寸）
   • Size → Cover
5. Background Overlay → 颜色选黑色，Opacity 约 0.7（够暗，让白色文字清晰）
6. 表单文字设为白色
7. 设计完成后 → 右键 Section → Save as Template（「Email Opt-in V2」）

EP552：Showcase Section（Part 1）— 课程展示卡

Showcase Section = 首页上展示「你能提供什么」的区域，通常是几个并排的卡片，每张卡片代表一门课程或服务。

使用 Image Box Widget： Image Box = 图片 + 标题 + 描述 三合一 Widget，比单独拖 Image + Heading + Text 更整齐。

操作步骤（3 列展示卡）：

1. Widgets 面板 → 搜索「Image Box」→ 拖进新 Section
2. 设置为 3 列布局（Inner Section 嵌套）
3. 每个 Image Box：
   • Image：课程封面图
   • Title：课程名称
   • Description：1–2 句课程介绍
4. 让三个 Image Box 的文字长度大致相等（⭐ 重要）：
   • 文字长短不一 → 卡片底部按钮高度不齐 → 页面凌乱
   • 解决方法：手动补一行文字让短描述变长，或截短长描述

复制样式快捷键： 设计好一个 Image Box 的样式（字体大小、颜色、间距）之后，右键那个 Widget → Copy → 右键下一个 Widget → Paste Style（只复制样式，不覆盖内容）

列 Hover 效果（悬停背景色）： Edit Column → Style → Hover → Background Color → 选浅绿色（或品牌色的浅版） 效果：鼠标悬停在某张卡片时，整列背景轻微变色，增加可点击感。

EP553：Showcase Section（Part 2）— 卡片样式与 Margin vs Padding

给卡片加白色背景： 每张 Image Box 所在的列 → Edit Column → Style → Background → Classic → White 效果：卡片变成白色，从浅灰页面背景「弹」出来，有立体感。

卡片之间加间距： Edit 中间列 → Advanced → Margin → 左右各 30px 效果：卡片之间有空隙，不会粘在一起。

⭐ Margin vs Padding 核心区别（非常重要）：

实际应用规则：

• 想让两个 Section 之间有空白间隔 → 用 Margin
• 想给某个 Section 内部加上下空间，同时保持背景色连续 → 用 Padding
• ❌ 错误：用 Margin 给有背景色的 Section 加上下内距 → 背景色会在 Margin 处断开

添加「View All Courses」按钮：

1. Widgets → Button → 拖到 Showcase Section 底部
2. Text：「View All Courses」→ 链接到 Courses 页
3. Style → Border → Border Radius → 30（大圆角，现代感）
4. Style → Background Color → 绿色（与课程主题呼应）
5. Hover Animation → Grow

EP554：Scrolling Menu（黏性导航菜单）

默认菜单在用户滚动时会消失——Sticky Menu 让菜单始终固定在屏幕顶部，随时可以导航。

安装 My Sticky Menu 插件： WordPress 后台 → Plugins → Add New → 搜索「My Sticky Menu」→ Install → Activate

配置步骤：

1. WordPress 设置 → My Sticky Menu
2. CSS Selector：填入 #site-header-inner（Ocean WP 主题菜单容器的 ID）
3. Opacity：调为 100（完全不透明）
4. Background Color：设为白色（菜单在深色内容区上方滚动时保持干净）

添加菜单阴影（让菜单与页面内容分离）： 在 My Sticky Menu 的设置里找「Shadow CSS」，输入：

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

效果：菜单底部出现细微阴影，视觉上「浮」在页面上方，层次感更强。

Logo 变透明（解决 Border 破图问题）： 如果 Logo 文件有白色背景，在深色菜单或有颜色 Overlay 时会出现白色方框 →

1. 前往 LunaPic.com
2. Upload → 上传 Logo → Edit → Transparent Background
3. 下载 PNG 格式（PNG 支持透明）
4. WordPress → Customize → Header → Logo → 替换为透明版本

[截图：Sticky Menu 在页面上方固定显示效果]

EP555：首页设计审核（Home Page Design Analysis）

设计完成后，用这 5 条标准检查首页是否合格：

EP556：首页设计作业

作业资源清单（完成以下所有设计后算通关）：

✅ Email Opt-in V2 设计完成

✅ Showcase Section 设计完成（Image Box，3列，等高卡片）

✅ Sticky Menu 配置完成（My Sticky Menu 插件，白色背景，阴影效果）

✅ Logo 替换为透明版本（LunaPic 处理）

✅ 用 5 条标准审核首页 → 全部通过

核心概念速查

行动步骤

Email Opt-in V2：

1. 新增 3 列 Section（15% - 70% - 15%）→ 中间列放表单
2. 背景：Pixabay 抽象图 → Cover → 黑色 Overlay Opacity 0.7
3. 右键 Section → Save as Template

Showcase Section：

1. 新增 3 列 Section → Image Box Widget × 3
2. 保持三个 Image Box 描述文字等长
3. Edit 中间列 → Margin 左右 30px（卡片间距）
4. Edit Column → Style → Background → White（卡片白色背景）
5. 底部加「View All Courses」按钮（Border Radius 30，绿色）

Sticky Menu：

1. 安装 My Sticky Menu → CSS Selector：#site-header-inner
2. Opacity 100，背景白色，添加阴影 CSS
3. LunaPic 处理 Logo 为透明 PNG → 替换 WordPress 中的 Logo

工具 & 资源

常见误区

• ❌ 用 Margin 给 Section 内部加上下空间——Margin 会让 Section 背景色出现断层，应该用 Padding
• ❌ Showcase 三张卡片的描述文字长短不一——按钮高度不齐，视觉很乱，必须让描述等长
• ❌ Logo 用白色背景 PNG 配透明 Overlay——Logo 会出现白色方框，需用 LunaPic 去背景
• ❌ Sticky Menu 没有加白色背景——菜单在深色内容区上滚动时字迹看不清

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 551
2. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 552
3. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 553
4. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 554
5. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 555
6. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 556

Blog / Website：

1. Pixabay.com
2. LunaPic.com