EP17. “Hero 区域设计”
🔒 登录后可标记已读- 访客进你的网站，会花多久决定要不要继续看下去？答案是 3 秒——比读完这句话还短
- Hero Section（主视觉区）就是这 3 秒要打赢的仗：一眼让人知道你是谁、卖什么、为什么值得留下来
- 在 Elementor 里，把标题文案、CTA 按钮、背景图、遮罩、产品图这些零件，组装成一个真正拦得住人的 Hero
所需工具
WordPress + Elementor + Sydney 主题
重点内容
Hero 区域必须包含的元素
| 元素 | 内容 / 设置 | 说明 |
|---|---|---|
| 主标题（Heading） | Clean Water Anywhere | 短、直接说核心利益，不要讲功能 |
| 副文案（Body Text） | 产品简介（来自 Starter Pack） | 扩展标题，说明针对谁 |
| CTA 按钮（Button） | Shop Now | 驱动访客行动 |
| 背景图 | 生活方式图片（符合品牌） | 传达品牌调性 |
| 背景遮罩（Overlay） | 黑色，不透明度 0.2 | 让文字在图片上清晰可读 |
| 产品图 | 放在右侧 | 让访客立刻看到产品 |
| 最小高度 | 900px | 实现「tease scroll」效果 |
设计步骤（Elementor 编辑器）
在首页点击 Edit with Elementor
- 标题：选中 Heading Widget，输入「Clean Water Anywhere」。
- 副文案：添加 Text Widget，填入产品简介。
- CTA 按钮：
- 按钮文字：Shop Now
- 颜色：黑色按钮，白色文字
- Border-Radius：150（实现圆角胶囊形状）
[截图：Elementor 编辑器里 CTA 按钮的 Style 设置面板，含颜色和 Border-Radius 参数]
- 背景图：
- 点击 Section（最外层容器）→ Style → Background
- 选择 Image，上传高质量生活方式图片
- 背景遮罩：
- Section → Style → Background Overlay
- 颜色：黑色（#000000）
- 不透明度（Opacity）：0.2
- 产品图：在右侧栏添加 Image Widget，上传产品图。
- 最小高度（Min Height）：
- Section → Layout → Min Height
- 设为 900px
- 文字颜色：确认标题和副文案颜色为白色（#ffffff），与背景图形成对比。
- 点击 Update 保存。
[截图：完成后的 Hero 区域最终效果，含标题、副文案、Shop Now 按钮、背景图和产品图]
「Tease Scroll」效果的原理
设置 900px 最小高度后，页面加载时 Hero 区域几乎铺满屏幕，但在屏幕底部会露出一点下一个区域的内容。
这个视觉提示会让访客产生「下面还有东西」的好奇心，自然地向下滚动继续浏览——不用一句话催促，页面自己就把人往下带。
这是电商网站提升页面停留时间的常见技巧，一个数字设对了，比写十句推销文案还有效。
常见误区
- 不要用堆砌产品功能的标题（「UV-C Technology Self-Cleaning Bottle」），要用利益导向（「Clean Water Anywhere」）。
- 不要忘记设遮罩，没有遮罩的话图片上的白色文字很难看清。
- 遮罩不透明度不要太高（超过 0.5 会挡住图片），0.2 是合适的起点。
行动步骤
- 在首页打开 Elementor 编辑器。
- 设置 Hero 标题、副文案、Shop Now 按钮（黑色，Border-Radius 150）。
- 设置背景图，加 0.2 不透明度黑色遮罩。
- 添加产品图到右侧。
- 设置最小高度 900px，文字颜色为白色。
- Update 保存，访问网站确认效果——花 3 秒看一眼自己的 Hero，问自己：一个完全不认识你的人，看得懂吗？
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 3, Lecture 17 Hero Section