EP523-527. “网站专业化：Logo、Favicon 与首页策略”
🔒 登录后可标记已读- 访客 3 秒内就决定留不留，第一印象几乎全靠视觉——Logo 和 Favicon 这些细节比想象中更重要
- Logo 已经是首页的入口按钮，菜单里再放一个「Home」只会让导航看起来更乱
- Above the Fold（不滚动就能看到的区域）决定了 80% 的用户会不会继续留在网站，这块区域的设计优先级最高
重点内容
EP523：专业化网站的前期准备（Section 简介）
进入这一章之前，你应该已经完成：
- WordPress 安装 + 所有必要插件
- 基本页面（Blog、About、Privacy Policy 等）
- 法律页面（Privacy Policy、Terms & Conditions）
这一章的核心理念：
- 第一印象靠视觉，访客 3 秒内决定留不留
- 「Less is more」：干净简洁 > 信息堆砌
- 用户体验（UX）优先：访客应该立刻知道这个网站是做什么的，以及他们能获得什么
接下来的重点：Elementor 页面设计（下一节），现在先做好基础准备工作。
EP524：用 Canva 创建 Logo
操作步骤：
- 前往 canva.com
- 搜索「logo」→ 从模板中选一个符合你品牌感觉的
- 点击文字区域 → 替换成你的品牌名称和 Slogan
- 调整颜色（建议保持 2–3 个颜色，与品牌色一致）
- 下载为 PNG（背景保持白色，与菜单栏背景一致）
📌 重要尺寸设定： 用 Custom Dimensions（1000×1000px）而不是 Canva 自带的 Logo 模板（500×500px），图片质量更高。
上传 Logo 到 WordPress：
- Appearance → Customize → Site Identity → Logo
- 上传 PNG 文件
- 设置「Max Width」（最大宽度）：建议 200px，「Max Height」：280px
- Publish
Logo 做不来怎么办？ 前往 fiverr.com 搜索「business logo」→ 从 $15 起找设计师代做。
[截图：Canva Logo 模板选择界面]
EP525：制作 Favicon（网站浏览器小图标）
Favicon 是浏览器标签页上显示的那个小图标，让你的网站在一堆标签页里可以被识别。
制作步骤：
- 打开你在 Canva 里的 Logo 文件
- 删除所有文字，只保留图形/图标部分（Favicon 太小，文字看不清）
- 下载为 PNG
- 前往 LunaPic → 上传这张 PNG → 点击「Transparent Background」去除白色背景
- 下载透明背景版本
上传 Favicon 到 WordPress：
- Appearance → Customize → Site Identity → Site Icon（Favicon）
- 上传透明背景的 PNG
- Publish
💡 上传后需要清除浏览器缓存（Ctrl+Shift+Delete）才能看到 Favicon 更新。
EP526：研究成功网站定制你的方向（Tailor Your Website）
在开始设计之前，先研究同行和不同领域的成功网站，偷师他们的设计逻辑。
课程分析了五个案例：
| 网站 | 特点 | 适合借鉴的做法 |
|---|---|---|
| Gary Vee（garyvaynerchuk.com） | 大量社交证明 + 个人品牌 | 首页显示媒体曝光 / 合作背书 |
| Tim Ferriss | Blog + Podcast 为核心 | 内容驱动的首页 |
| Pat Flynn（smartpassiveincome.com） | Start Here 页、Learn More 按钮、Resources 页（附联营链接） | Start Here 概念 + Resources 页变现 |
| Cookie and Kate | 美食博客，内容即首页 | 适合内容博客直接展示 |
| Bourne Fitness | 服务 + 视频 + 邮件订阅 | 服务类网站首页结构 |
研究后采取的实际行动（课程示例）：
- 把 Home 菜单项目改名为「Start Here」
- 新建空白 Resources 页面
- 将 Resources 加入顶部菜单
📌 研究时做笔记：「我想要什么 / 不想要什么」——不要只看截图，要问自己「为什么这样有效？」
EP527：首页设计的心理逻辑（Copy Success）
首页的核心任务： 定义好「访客来到这里应该做什么」——不要一股脑放所有内容，只放一个主要行动方向。
两种首页设计模式：
| 类型 | 描述 | 适合情况 |
|---|---|---|
| 直接展示内容型 | 首页直接展示文章列表/最新内容 | 内容博客（Cookie and Kate 风格） |
| 引导到内容页型 | 首页引导访客到 Start Here / About，再深入浏览 | 个人品牌、服务、课程类网站 |
关于菜单的重要逻辑：
- Logo = 首页的入口按钮，不需要在菜单里额外放「Home」项目
- 菜单里保留 Home 只会分散注意力、让菜单看起来更乱
Above the Fold 法则：
- 「Above the fold」= 访客打开页面，不滚动就能看到的内容
- 这块区域决定了 80% 的用户是否继续待在你的网站
- 首页 Bounce Rate（跳出率）直接影响 SEO 排名
核心概念速查
| 概念 | 解释 |
|---|---|
| Favicon | 浏览器标签页上的小图标，让网站可被识别 |
| Above the Fold | 不滚动就能看到的页面区域，是设计优先级最高的位置 |
| Bounce Rate | 访客进入页面后没有任何互动就离开的比率，越低越好 |
| Start Here 页 | 引导新访客了解网站的专属页面，帮助他们找到最适合自己的内容 |
行动步骤
- Canva → 用 1000×1000px Custom Dimensions 设计 Logo → 下载 PNG → Appearance → Customize → Site Identity → 上传设置
- 在 Canva 把 Logo 文字删除 → 下载 PNG → LunaPic 去背景 → 上传为 Favicon
- 研究 3–5 个同行或参考网站，记下「我想要什么 / 不想要什么」
- 决定首页类型（内容型 vs 引导型）
- 把菜单里的「Home」替换成「Start Here」或直接删除 → 新建 Resources 页面加入菜单
工具 & 资源
| 工具 | 用途 | 费用 |
|---|---|---|
| Canva | 设计 Logo / Favicon | 免费 |
| LunaPic | Favicon 去白色背景 | 免费 |
| Fiverr | 委托专业设计师做 Logo | 从 $15 起 |
常见误区
- ❌ 直接用 Canva 的「Logo」模板（500×500px）——画质不够，建议用 1000×1000px 自定义尺寸
- ❌ Favicon 带白色背景——在深色标签栏上会出现白色方块，不好看
- ❌ Logo 放大后模糊——下载时选最高画质 PNG
- ❌ 菜单里保留「Home」——Logo 已经是首页入口，重复放只会让菜单更乱
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 523
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 524
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 525
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 526
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 527
Blog / Website：