EP407. “首页设计：用 Elementor + ChatGPT 打造产品主页”

• 产品图默认背对页面中心，一个 Flip Horizontal 水平翻转，就能把视觉焦点拉回来
• 首页按钮别急着写「Shop Now」——访客还不认识你、不了解产品，先用「Learn More」建立信任更符合心理
• 桌面版调好间距不代表结束，一半以上流量来自手机，Responsive Mode 必须单独检查一遍

重点内容

Elementor 基本操作

Elementor 是「所见即所得」的页面编辑器，不需要写代码：

• 点击任何一个区块可以选中它，右侧面板可以改文字、图片、颜色、间距
• 鼠标悬停在区块上方会看到该区块（Section）的控制条，点击垃圾桶图标可以整块删除
• 页面结构是「Section（大区块）→ Column（列）→ Widget（元素，如文字/图片/按钮）」三层嵌套，删除时要注意点在哪一层
• 拖动区块左上角的方形手柄（拖拽点）可以调整区块顺序，上下移动
• 编辑时偶尔会出现图片暂时消失、区块显示异常的情况，这是 Elementor 编辑模式的显示 bug，刷新一下或看正式网站就没事，不影响最终效果
• 改完一定要点击 Update（或 Publish）保存

进入首页编辑：Dashboard → Pages → All Pages → Home → Edit with Elementor

第一步：决定区块去留与顺序

Starter kit 默认首页会带一堆卖衣服相关的区块，逐个检查：

• 保留：最上方的产品主打区块（左图右字或反之）、评论/评价区（Reviews，社会认同很重要）、Features/Benefits（产品优势卖点）
• 删除：不需要的「多产品展示」「Top Products」等区块（demo 只有一个产品，用不到）
• 改用途：某些「左图右文」的区块结构可以直接留着改造成 Blog 引流区，不用重新搭建
• 顺序调整逻辑：把用户最需要先看到的内容往上排。课程的排法是：产品主打 → Features/Benefits（免运、退货、折扣、加密支付等信任背书）→ Reviews（评论，先说服用户）→ Blog 引流区（还没被说服的人，用博客内容进一步培养关系）→ About Us

第二步：产品主打区（Hero Section）

1. 点击默认商品图，Choose Image → Upload → 选择 demo 产品图。课程提示准备了两个版本：有背景色的原图 和 去背景的透明版本（Transparent PNG），两种都试一下看哪个跟区块底色更搭，最后选了透明版，效果比较干净不会跟区块背景断层
2. 产品朝向心理学：人的视线习惯从左读到右、聚焦在页面中间。如果产品图默认朝外（背对中间），选中图片 → Advanced → Transform → Flip Horizontal，让产品「面朝中间」，把视觉焦点拉向页面中心
3. 主标题文案：打开 Guidebook → Home Page 章节的 Product Landing Page Text prompt，粘到 ChatGPT：「写落地页最高转化文案，一段不超过 8 个字，另一段不超过 20 个字」，同时把 Guidebook 里「My Data」章节存好的 目标受众 persona 一起粘进 prompt，让生成内容真正针对目标客群
4. 生成结果如果不满意直接点 Regenerate Response 重来，课程示范试了 6 次才选中「Level up. Game longer.」这句短标题，配一句稍长的副标题描述产品卖点
5. 把生成的短句填入主标题，Style → Typography 调大字号、加粗，让它「跳出来」；副标题文案填入下方小字区域
6. 按钮文案从默认的「Shop Now」改成 「Learn More」：因为访客刚进站还不认识你、不了解产品，直接喊「来买」转化率反而低，先引导「了解更多」建立信任更符合购买心理，之后才引导购买
7. 用 Advanced → Margin/Padding 微调整个区块的上下留白，让内容不要太贴近顶部菜单栏；margin 是区块外部的间距，padding 是区块内部的间距，效果不同，可以分开调
8. 用 Column 的 Margin（甚至负值）微调左右列的相对位置，让排版不要太挤在中间
9. 文字区块可以调 letter spacing（字距） 和 line height（行高）让阅读更舒服

第三步：Features/Benefits 信任背书区

把这个区块往上挪到产品主打区正下方，展示几个核心卖点/保证，例如：

• 满 $99 免运费
• 30 天退货保证（呼应之前写好的退款政策）
• 专属折扣（预告后面要做的邮件订阅拿折扣码，用来收集 email）
• 256-bit 加密安全支付（大部分人看不懂技术细节，但看到「加密」「安全」字样会更放心下单）

这些文字都可以直接点击修改，不需要额外生成 prompt，按自己实际提供的服务据实填写即可。

第四步：评论/评价区（Reviews）

评论区是建立信任、推动首购和复购的关键区块，课程强调「不管卖什么、不管是不是刚起步，都要想办法尽早拿到评论，哪怕先找家人朋友帮忙写」。

操作步骤：

1. 删除模板默认不需要的评论卡片（例如「We aim to please our clients」这类空话）
2. 点击评论文字框，替换成真实（或课程示范用的授权测试）评论内容
3. 点击头像图片，Choose Image → Upload，换成对应的人物照片
4. 换上姓名
5. 让不同来源的头像风格统一：选中图片 → Advanced → Mask 打开，把方形图片裁成圆形，再用 Position（如 Top-Center）微调裁切位置，避免裁掉人脸的重要部分

第五步：Blog 引流区

把原本卖衣服的区块改造成博客预告区，目的是把还没被说服购买的访客往博客方向引导，用内容建立权威感、加深关系。

操作步骤：

1. 图片换成跟 niche 相关、免费可商用的图片：用 Unsplash.com 搜索关键词（例如 gaming），下载前确认图片标注 Unsplash License（可商用，但不能把图片本身单独卖钱），下载 Medium 尺寸（Large 太大拖慢加载速度，Small 画质太差）
2. 文案用 Guidebook → Home Page 章节的 Short Blog Description prompt：「写一段 8 个字的段落，再写一段不超过 50 字的段落」介绍博客主题
3. 用 Advanced → Transform → Scale 把图片适度放大（例如 1.1 倍），加强视觉张力

第六步：移动端检查（Responsive Mode）

桌面版做完后，务必切到 Responsive Mode → Mobile Portrait 检查手机上的显示效果，因为一半以上流量来自手机：

• 检查文字、按钮是否还是清楚可读
• 常见问题：桌面版设置的大 margin/padding 在手机上会变成一大片空白，需要针对 Mobile 单独调整（例如某个区块底部 margin 桌面用正值撑开空间，手机上反而要用负值把内容拉近，避免滚动太久才看到下一个区块）
• Elementor 的样式设置是按「桌面/平板/手机」分别储存的，调手机版不会影响桌面版显示
• 两边都确认无误后再算完成

[截图：Elementor 编辑器整体界面]

[截图：Hero 区块桌面版 vs 手机版对比]

[截图：Reviews 区块圆形头像效果]

核心概念速查

行动步骤

1. 先梳理首页区块：删掉不需要的（多产品展示等），保留产品主打、Features、Reviews，挪一个区块改造成 Blog 引流区，按「最想让用户先看到的内容」重新排序
2. 换上产品图（优先试透明背景版），需要的话用 Flip Horizontal 让产品朝向页面中心
3. 用 ChatGPT + 目标受众 persona 生成主标题短文案和副标题，按钮文案改成「Learn More」而非「Shop Now」
4. Reviews 区换上真实评论、头像，用 Mask 统一裁成圆形
5. Blog 引流区去 Unsplash 找合规免费图，配合 ChatGPT 写的简短文案
6. 全部做完后切到 Mobile Portrait 检查手机显示效果，单独调整移动端的间距

工具 & 资源

常见误区

• 产品图直接用原图不检查朝向，导致产品「背对」页面中心，视觉焦点分散
• 主标题按钮写「Shop Now」，访客还不了解产品/品牌就急着喊他买，转化效果反而不如「Learn More」
• 只在桌面版调好间距就收工，没检查手机版，导致移动端出现大片空白或文字挤压
• 评论区图片不做圆形裁切统一处理，不同来源的头像大小、比例不一致显得杂乱

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 30, Lecture 407 (Home Page)

PDF 资料：

1. [Marketing+Strategy+Guidebook.pdf](sources/Section 30 - Digital Marketing Strategy with Chatgpt/Marketing+Strategy+Guidebook.pdf)

Blog / Website：

1. Unsplash