EP05. “AI Website Builder：表单、Logo、SEO、移动适配、预约电商与上线”
🔒 登录后可标记已读这篇笔记接着《AI Website Builder：生成网站与编辑器基础》，讲网站编辑器里更细的功能——联系表单设置、换上自己的 Logo、每个页面单独做的 SEO、移动端适配、预约功能（Beta）与电商产品设置，最后怎么正式上线。
重点内容
联系表单（Contact Form）
- 双击表单 → Edit Form
- ⚠️ 一定要确认收件邮箱是自己能收到的邮箱——所有访客填写的联系表单内容都会寄到这个邮箱
- 可以加新字段：点箭头新增一个 short answer 字段，改名（例如「legal issue」）、设置提示文字（placeholder，例如「explain your situation」），可以设为必填（required）
- 表单的按钮样式、动画也能单独调整
Logo / Header / Footer
- 上线前务必换上自己的 Logo：点站名文字位置 → Replace Image 上传 logo 图
- 💡 没有现成 logo：可以去 Fiverr（fiverr.com）花约 10~20 美元找人设计一个。不建议用免费 logo 生成器——那类免费 logo 通常有版权问题，不能真正商用
- Header（导航栏）在 Layout Settings 里可以调整：菜单样式、是否显示 logo / social icons / 按钮、logo 尺寸、Header 背景颜色（或设置成透明无背景）
SEO 设置（每个页面单独做）
- 左侧 Pages and Navigation → 选中某个页面（例如 Homepage）→ Generate New SEO Information
- AI 会引导几步：描述你的业务 → AI 给出几个关键词建议（例如：family law、criminal law、legal representation）→ 预览这个页面在 Google 搜索结果里会怎么显示（SEO 标题 + meta description），可以手动改标题和描述文案
[截图：Generate New SEO Information 流程里 Google 搜索结果预览画面，显示 SEO 标题与 meta description]
- 确认后点 Finish，页面旁边会出现绿色勾勾，表示这个页面 SEO 已优化
📌 每个页面都要单独重复这个流程，不是设一次全站生效。
页面管理 / 导航 / 全站样式
- Pages and Navigation：可以拖动调整页面在导航栏里的顺序（比如把 Services 排到 Contact 前面）
- Coming Soon 模式：想先隐藏网站但不想完全下线，可以开启 Coming Soon 横幅，访客看到的是「即将上线」页面而不是完整网站
- Website Styles（全站样式）：
- 默认背景色、全站字体——改了字体会套用到全站所有元素
- 按钮样式：圆角、方角、或更锐利的方角，几种预设可选
- Animations：全站元素的动画效果，💡 建议谨慎使用（用太多显得杂乱），可以直接选 No Animation
- AI Generator（全局）：可以用 AI 生成图片、生成整个页面、生成整个 section
- General Settings：Favicon（网站顶部分页图标）、Cookie banner（是否显示）、Link preview image（分享到社媒时显示的预览图）、Form Submissions（查看联系表单的历史提交记录）、Analytics（查看网站访问数据）
移动端适配
[截图：编辑器右上角手机图标切换到 Switch View 后的手机预览画面]
- 编辑器里可以切换「手机预览」视图（点击手机图标 → Switch View）
- 手机版可以针对个别元素单独设置 show/hide（例如桌面版有两个按钮，手机版只保留一个，隐藏另一个）
- 手机版文字大小、图片显示也能单独调整，跟桌面版设置互不影响
- 调整完手机版记得点 Update Website 保存，再切回桌面视图继续编辑桌面版
预约功能（Appointments，测试阶段）+ 电商产品
📌 Appointments 功能目前是 Beta 阶段，可能会遇到 bug，属于正常情况。
左侧 Manage Store：
- 先在 Appointments 里点 Enable Appointments
- Edit Availability 设置可预约的星期/时段（例如周一到周五营业，周末休息），保存
- 到 Products → Add a Product，产品类型选 Appointments（而不是实体商品）
- 填写：名称、上传封面图（上传图片后 AI 会自动尝试生成标题/副标题/描述文案，通常还需要手动微调）、定价（可以先设免费 free，价格类型也支持串接 Stripe / PayPal 收费）、地点/形式（例如 Zoom call）、时长（例如 30 分钟）
- 保存后，需要另外建一个页面来展示这个预约产品：Add Page → Empty Page（例如命名 Appointments）→ 在这个新页面里 Add Section → Online Store → Single Product → Edit Section 选择刚建好的产品
- 回到首页，把某个按钮（例如「Make Appointment」）的链接目标改成这个新建的 Appointments 页面
效果：访客点击按钮会跳转到预约页，直接在网站上完成预约；预约成功后系统会自动发送确认邮件给客户（AI 自动生成邮件内容，包含时间、价格等信息）。
电商方面：Manage Store 里同样可以 Add a Product 卖实体商品，可整合 Stripe / PayPal 收款。
网站上线（Go Live）
- 顶部点 Go Live，网站即正式发布上线
- 点 View Site 可以直接查看已发布的网站效果
- 上线后仍可以继续编辑调整，改动记得保存/更新
常见误区
- ❌ 用免费 logo 生成器做出来的 logo 直接商用——这类免费 logo 通常有版权问题，法律上站不住脚，建议花小钱在 Fiverr 找人定制
- ❌ SEO 设置只做了首页，以为全站自动套用——每个页面的 SEO 信息都要单独跑一次 Generate New SEO Information 流程
- ❌ 移动端显示没有单独检查——桌面版调整好看，不代表手机版排版也没问题，务必切到 Switch View 手机预览再检查一次
- ❌ 联系表单没确认收件邮箱是自己能收到的——访客填写的内容全部会寄到这个邮箱，设错了会漏掉客户咨询
- 📌 Appointments 功能是 Beta 阶段，遇到 bug 属于正常情况，不代表设置错误
Sources
YouTube：
- Hostinger AI Website Builder Tutorial — https://www.youtube.com/watch?v=A6ZKWcv8PRQ
官方文档：