EP404-406. “网站结构与设计：页面整理、菜单设置、字体配色”
🔒 登录后可标记已读- 隐私政策写完了却忘了在 Settings → Privacy 里正式指定这个页面——等于白写，Google 照样判定不合规
- 配色统一之前先别手动微调局部颜色，不然后面 ChatGPT 生成整体配色方案时风格会互相打架
- 浅色模板硬要改深色主题，工作量至少多三倍，不如让 ChatGPT 顺着模板本身的明暗基调给配色
重点内容
页面整理（Pages）
Starter kit 导入后会因为主题本身 + starter kit 各自带一批页面而产生大量重复页面，需要先清理。
操作步骤：
- Pages → All Pages，找出重复的页面（例如两个 Cart、两个 Shop、两个 Sample Page），只保留正在被使用的那个，其余勾选后 Bulk Actions → Move to Trash → Apply
- 改名 + 改 slug：菜单栏空间有限，页面标题要短，例如把「My Account Page」改成「Account」，「My Blog Page」改成「Blog」，「My Front Page」改成「Home」。用 Quick Edit 同时把 Slug（网址中
/xxx的那部分）也改成一样的名字（例如 title=Contact、slug=contact），方便以后在文章里快速插入内部连结，也方便访客记网址 - 三个法律页面（这是让网站合法运营的底线，不是可有可无）：
- Privacy Policy（隐私政策）：说明网站收集了访客哪些信息（Google Analytics 追踪、email、cookies）、为什么收集、访客如何要求删除自己的信息，涉及 GDPR（欧盟数据保护法）合规
- Terms and Conditions（条款）：声明访客在网站上的行为风险自负，网站不承担连带责任，非法律强制要求但建议有
- Refund and Returns Policy（退款/退货政策）：说明退货条件、天数（demo 用 30 天）、卖的是实体产品还是数字产品会影响条款内容
- 生成方式：打开 Guidebook → Pages 章节，复制对应 prompt 到 ChatGPT，填入网站名、产品、niche、email、地址、日期等信息即可生成完整页面文案。ChatGPT 输出长文时经常写到一半中断，这时候直接打「continue」让它接着写完（📌 现状更新：现在的模型通常不需要这样中途续写，可以先尝试直接要求生成完整长度的文案，遇到确实被截断的情况再用「continue」接着写）
- 生成后复制粘贴进对应页面的编辑器，点击 Publish
- 隐私政策页面必须额外设置：Settings → Privacy → Select a privacy policy page，选刚建好的 Privacy Policy 页面并 Use this page（Google 会检查网站是否合规，这一步不做等于白写了政策）
📌 注意：课程反复强调「我不是律师，法律页面最终责任在你自己」，ChatGPT 生成的文本要读过、确认适合自己的实际情况（尤其是实体/数字产品、退货天数、地址等信息要填对）。
头部与底部菜单（Header & Footer Menu）
页面建好后要加进菜单，访客才有办法点进去。
操作步骤：
- Customize → Menus → Menu 1（Header 菜单），点击 Add Items，依序把 Home、Shop、Blog、Contact 加进去
- 菜单顺序建议按重要性排：Home（首页是主要销售页，大多数人会先落地在这）→ Shop（卖货的地方，次重要）→ Blog（建立关系用）→ Contact（少数人才会用到）
- Publish 后如果出现重复菜单项（starter kit 常见 bug），手动刷新页面、进菜单里删掉多余项，只留一份
- Sticky Header（吸顶菜单）：菜单栏会跟着滚动条一直显示在顶部，方便访客随时点击购物车；如果不是电商网站可以考虑取消，但电商网站建议保留
- 如果 logo 尺寸让 sticky header 显得太占空间，回到 Header → Site Identity 调小 Logo Height（例如从 85 调到 65）
- Footer（底部菜单）：Customize → Footer → Footer Widgets，默认是三栏布局，课程建议改成两栏：左边一个较大的 About Us 区块，右边一个 Useful Links（放法律页面链接：Privacy Policy、Terms and Conditions、Refund and Returns）
- About Us 文案同样用 Guidebook 里 Header & Footer Menu 章节的 prompt 生成：「Act as a copywriter. Write me a two-paragraph-long about us page with the following information: 网站名 / 创办人 / 卖什么 / 为什么创立」
- Footer 第二栏选 Menu → Footer Menu，Add Items 把三个法律页面加进去（同样注意会出现重复项，需要手动清掉）
- 版权栏（Copyright bar）：可以在这里删掉主题自带的「Proudly powered by Sydney」这类广告文字，改成自己想要的版权声明
📌 注意：课程建议先不要在这个阶段手动调颜色（Style 里的局部颜色设置），因为下一课要用 ChatGPT 统一配色，提前微调局部颜色反而会让配色不协调、后面要重改。
字体与配色（Fonts & Colors）
字体和颜色直接影响网站的可读性和品牌辨识度：字体搭配不好（比如标题太粗、内文太花）会显得不专业；颜色则会引发情绪联想，也是跨渠道品牌识别（logo、网站、社媒统一配色）的关键。
操作步骤：
- Customize → Typography，先设标题字体（Headings），再设内文字体（Body）
- 用 Guidebook 里 Fonts & Colors 章节的 prompt：「Act as a web designer, recommend a header and body font for [niche] websites selling a product」，把 niche 和产品填进去。课程示范得到 Montserrat（标题）+ Roboto（内文） 的组合，符合 gaming 网站要的未来感
- 在 Font Family 里搜索并选中推荐的字体，Publish 即可看到全站文字风格变化
- 配色：用另一个 prompt「Act as a web designer, what menu color, background and text background color, primary color, all the heading colors and button colors would you recommend for a [niche] website... make the theme light, provide hex codes」，ChatGPT 会给出完整的一整套 hex 色码
- 特别提醒：如果 starter kit 本身是浅色（light）主题，prompt 里要求「make the theme light」，因为把浅色模板改成深色主题工作量至少多三倍（要逐一微调很多地方），除非你打算大改，否则建议顺着模板的明暗基调走
- 拿到色码后逐一贴到对应设置：
- Header（菜单）背景色、文字色：在 Customize → Header → Main Header Style 单独设置（不在 Colors 分类里）
- Customize → Colors：Background Color、Primary Color、Body Text Color、Heading 1-6 依序贴上对应色码
- Buttons Color：同样在 Colors 分类里设置
- 如果配色跟已经做好的 logo 不搭，可以回 Shopify Logo Maker 重新编辑 logo 颜色，让 logo 去配合网站新配色（比逐一改网站配色去配 logo 容易）
- 按钮的颜色需要进到 Elementor（Pages → Home → Edit with Elementor）单独设置：选中按钮 → Style → Color 贴入 hex 码，再设置 Hover（鼠标悬停）状态用稍微加深的同色系颜色，做出「悬停变深」的微交互效果；文字颜色如果需要也在 Text Color 里改成白色等
- 多个按钮想套用同样样式，可以右键第一个按钮 → Copy，右键另一个按钮 → Paste Style，快速同步样式
- Starter kit 有时会出现「重新载入套件」的提示（Recreate Kit），点击确认即可，这是 starter site 常见的小 bug，不影响正式网站
[截图：Customize → Colors 设置面板]
[截图：Elementor 按钮 Style/Hover 颜色设置]
核心概念速查
| 术语 | 解释 | 例子 |
|---|---|---|
| Slug | 页面网址中跟在域名后面的那一段路径 | 域名.com/contact 里的 contact |
| Sticky Header | 滚动页面时始终固定显示在顶部的菜单栏 | 电商网站常用，方便随时点购物车 |
| Hover 效果 | 鼠标悬停在元素上时触发的样式变化 | 按钮鼠标悬停时颜色变深 |
| Elementor | 所见即所得的可视化页面编辑器插件，用拖拽方式设计页面 | 用它调按钮颜色、字体大小、间距 |
行动步骤
- 清掉 starter kit 重复的页面，剩下的按短名字改标题和 slug（保持两者一致）
- 用 ChatGPT 生成隐私政策、条款、退款政策三份法律文案，贴进对应页面并 Publish，隐私政策还要在 Settings → Privacy 里指定为官方隐私政策页
- Header 菜单按 Home → Shop → Blog → Contact 顺序加入；Footer 改成 About Us + Useful Links 两栏，法律页面链接放进 Useful Links
- 用 ChatGPT 生成字体建议（标题+内文）和完整配色 hex 码，逐一填进 Customize 的 Typography、Colors、Header 设置
- 按钮颜色和 Hover 效果去 Elementor 里单独设置，多个按钮可以用 Copy / Paste Style 快速同步
工具 & 资源
| 工具 | 用途 | 费用 |
|---|---|---|
| ChatGPT | 生成法律页面文案、About Us 文案、字体/配色建议 | 免费/付费版皆可 |
| Elementor | 可视化页面编辑器，调整按钮样式、颜色、间距 | 免费版即可满足本阶段需求 |
常见误区
- 页面标题和 slug 不一致（比如标题改了但 slug 还是英文默认值），以后做内部链接时容易搞混
- 写好隐私政策却忘了在 Settings → Privacy 里正式指定这个页面为隐私政策页，等于白做
- 在配色统一之前就手动微调局部颜色，导致后面用 ChatGPT 生成整体配色方案时风格互相打架
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 30, Lecture 404 (Pages)
- The Completed Digital Marketing Guide 27 in 1 — Section 30, Lecture 405 (Header & Footer Menu)
- The Completed Digital Marketing Guide 27 in 1 — Section 30, Lecture 406 (Fonts & Colors)
PDF 资料：
- [Marketing+Strategy+Guidebook.pdf](sources/Section 30 - Digital Marketing Strategy with Chatgpt/Marketing+Strategy+Guidebook.pdf)