EP543-547. “首页设计实战：背景图、标题、描述与 CTA 按钮”

• 背景图尺寸永远选 Cover，不要用 Default 或 Contain，不然图片没办法铺满整个 Section
• 首页大标题不该用 H1——H1 要留给搜索引擎识别页面主题，首页标题用 H2 就够了
• 按钮没有 Hover 效果会显得很死板，加一个 Grow 动画，悬停时微微放大，点击率立刻不一样

重点内容

EP543：首页背景图设计（Part 1）

颜色拾取器（Color Picker）设置： 先把你的品牌色加到 Elementor 的快速拾色器里： Elementor 菜单 → Default Colors → 复制 Accent 色号 → 菜单 → Color Picker → 把品牌色替换一个默认格子

找背景图：

• 免费图库：Pixabay.com（免费，无需署名）
• 付费图库：Shutterstock.com
• 关键词建议：用能传达你品牌「感觉」的词（inspiration、freedom、success），不一定是产品本身

选图注意事项：

• 选横向（Horizontal）图片，适合 Full Width 设计
• 注意焦点（Focal Point）：如果图里有人/产品，焦点要在中间偏中的位置，这样缩小到手机版时主体不会被裁掉
• 下载时不要选最大尺寸——网站整体控制在 3–5MB 以内，选次大尺寸（通常 1920×1080 左右）即可

操作步骤（添加背景图）：

1. 在 Elementor 里拖一个 Heading Widget 进页面（先建立 Section）
2. 点击 Section 中间的「Edit Section」
3. Style → Background → Normal → Classic → 点击 + 号 → Upload Files → 上传图片 → Insert Media
4. Layout → Height → Minimum Height → 输入 700（像素）
5. Style → Background → Size → 改成 Cover（永远用 Cover，让图片铺满整个 Section）

[截图：Elementor Section Style 设置背景图]

EP544：背景图高级设置（Part 2）

Layout 选项：

• Content Width：选 Boxed（内容有左右边距，背景铺满）——比 Full Width 更专业
• Minimum Height：手动设置 Section 高度，700px 是很好的起点
• Fit Screen 效果通常不理想，不推荐

响应式调整（很重要！）：

1. 在编辑 Section 时，点底部的 Tablet 或 Mobile 图标
2. 检查背景图在不同屏幕尺寸的显示效果
3. 如果焦点被裁掉 → Style → Background → Position → 调整焦点位置（Center Center / Bottom Right 等）

背景图类型：

• Classic（图片）→ 用 Cover 铺满
• Gradient（渐变色）→ 用颜色渐变作为背景
• Video（视频背景）→ 设置 YouTube 链接或媒体库链接，设定开始/结束时间，需设置「Background Fallback」图片（手机端不能播放视频）

Background Overlay（颜色叠加层）⭐ 重要功能： 效果：在背景图上叠加一层半透明品牌色，让图片颜色与品牌色融合，极大提升专业感。

操作步骤：

1. Style → Background Overlay
2. Background Type → Classic → Color → 选你的 Accent 品牌色
3. Opacity（不透明度）→ 调低到 0.1–0.2（微微叠色，自然融入）→ 不要太高否则图片看不清

Shape Divider（区块分隔效果）： 在 Section 顶部或底部加上波浪/三角形/云朵等分隔线，让不同 Section 之间的过渡更自然好看。 Style → Shape Divider → Top 或 Bottom → 选择形状 → 调整颜色、高度

EP545：设计首页标题（Title）

标题写作原则： 直接说你能提供什么价值，不要只说你是谁。

✅ 好标题：「Business Made Easy. Let us show you how.」（仿 Pat Flynn 风格）

参考例子：

• Pat Flynn：「Let me help you build a passive income driven online business」
• WPBeginner：「Beginner's Guide for WordPress / Start your WordPress blog in minutes」

操作步骤：

1. 点击页面上的 Heading 元素 → Content → Text → 输入你的标题
2. HTML Tag → H2（不用 H1，H1 留给搜索引擎识别页面主题，标题用 H2 足够）
3. Alignment → Left（与描述和按钮左对齐，整洁）
4. Style → Text Color → 选白色（深色背景图上白色最显眼）
5. Style → Typography → Transform → Uppercase（全大写，增强视觉冲击）
6. Size → 调整到合适大小（XXL 或 Custom，通常 40–50px）

调整位置： 用 Spacer Widget（从 Widgets 面板拖入，放在内容上方）来推高或推低文字位置。

EP546：设计首页描述（Description）

描述 = 标题下方的一两句补充说明，解释具体能帮访客做什么。

写法要点：

• 针对目标受众说话（不是介绍自己）
• 激发好奇心，让他们想点「Learn More」
• 例：「Are you looking to build or expand your business but don't know where to start? Let us show you how. Literally.」

操作步骤：

1. Widgets 面板 → Text Editor → 拖到 Heading 下方
2. 粘入或输入描述文字
3. Style → Text Color → 白色
4. Style → Typography → Size → 23–27px（比标题小，形成层次）
5. Line Height → 调整行间距，让文字更舒适

微调背景图位置： 文字有时会跑进图片里的不合适位置 → Edit Section → Style → Background → Position → Center Center → Preview Changes → 满意再 Update

EP547：设计 CTA 按钮（Call to Action Button）

CTA 按钮是「把访客引导到下一步」的关键。

按钮文字选择：

• 「Learn More」→ 给好奇的访客一个低门槛的行动理由
• 「Start Here」→ 更主动，适合已经想开始行动的访客
• 「Get Started」「Subscribe」「Contact Us」等 → 按你的首页目标决定

操作步骤：

1. Widgets 面板 → Button → 拖到 Text 下方
2. Content → Text → 写上按钮文字（例：「LEARN MORE」）
3. Content → Link → 粘入你的 Start Here 页面 URL
4. Content → Alignment → Left（与标题/描述左对齐）
5. Content → Size → Medium

Style 设置：

• Typography → Weight → Bold、Transform → Uppercase、Size → 14px
• Border → Border Radius → 5（轻微圆角，精致感）
• Padding → 解锁联动 → Top/Bottom 改为 15px，Left/Right 保持 20px（让按钮变扁宽，更现代）

Hover 效果（⭐ 重要）： 没有 Hover 效果的按钮看起来很死板，Hover 效果让按钮感觉更可点击。

1. 点击上方「Hover」标签
2. Style → Hover Animation → 选 Grow（按钮悬停时微微放大，专业感最强）
3. Style → Background Color → 粘入 Accent 色号 → 稍微提高亮度（比原色浅一点）→ 悬停时有「被选中」的高亮感

[截图：按钮 Normal 和 Hover 对比效果]

核心概念速查

行动步骤

1. Pixabay → 搜索传达品牌感觉的关键词 → 选横向图片（focal point 居中）→ 下载次大尺寸
2. Edit Section → Style → Background → Classic → 上传图片 → Layout → Minimum Height 700 → Size → Cover
3. Style → Background Overlay → 品牌色 → Opacity 0.1–0.2
4. 拖入 Heading Widget → Text 写标题 → H2 → 白色 → Uppercase → Size XXL
5. 拖入 Text Widget → 写 1–2 句描述 → 白色 → 23–27px
6. 拖入 Button Widget → 「LEARN MORE」→ 链接到 Start Here 页 → Medium → Bold → Uppercase → Border Radius 5 → Padding Top/Bottom 15px
7. Hover 标签 → Hover Animation → Grow → Background Color 略浅于 Accent 色
8. Preview Changes → Update

工具 & 资源

常见误区

• ❌ 背景图尺寸选 Default 或 Contain——永远用 Cover，否则图片无法铺满 Section
• ❌ 标题用 H1——H1 留给 SEO，首页大标题用 H2
• ❌ 按钮没有 Hover 效果——没有反馈感，按钮显得死板，点击率低
• ❌ 背景图太大（原始分辨率）——会严重拖慢网站加载速度，下载时选 1920px 左右的版本

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 543
2. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 544
3. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 545
4. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 546
5. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 547

Blog / Website：

1. Pixabay.com
2. Shutterstock.com