EP04. “AI Website Builder：生成网站与编辑器基础”

这篇笔记讲 Hostinger AI Website Builder 这个工具本身怎么用（跟传统 Website Builder 是两种不同的产品/流程，AI 版本需要 Business 或以上方案，见《为什么选Hostinger与选购方案》）——包括怎么用 ChatGPT 帮忙写 prompt 生成第一版网站、以及元素/区块编辑器的基本操作。表单、Logo、SEO、移动适配、预约/电商、上线这些进阶功能看《AI Website Builder：表单、Logo、SEO、移动适配、预约电商与上线》。

重点内容

用 AI 生成第一版网站

完成选方案/注册流程、选了「AI 建站」选项后，会进入一个填写品牌名称 + 业务描述的页面。

1. 先让 ChatGPT 了解「我要给 Hostinger AI website builder 写一个很详细的 prompt」这个任务
2. 具体描述你的业务，明确指定你想呈现的人物种族/地区（例如：律师事务所网站，指定人物是「白人美国人」）
   • 📌 原因：如果不 specify，AI 会从世界各地随机抓人物图片和文案，甚至混入不相关语言的文字，观感很奇怪
   • 同理，如果没指定国家，配图建筑物也会随机来自各国，显得不搭调
3. 让 ChatGPT 把这段详细描述压缩到 700 字符以内——因为 Hostinger AI builder 的 prompt 输入框上限就是 700 字符

把压缩好的 700 字符 prompt 复制贴到 Hostinger 的输入框，点击 Create a Website。AI 会在几十秒内根据 prompt 生成完整网站，包含：首页（含视频背景、Call to Action）、About us 区块、服务介绍、客户评价、底部联系表单。右侧会提供配色方案（color palette）可以直接点选切换整站配色，不需要额外要求 AI 生成配色。选好喜欢的配色后点顶部 Continue 进入详细编辑器。

[截图：Hostinger AI Website Builder 根据 prompt 生成的完整首页效果，右侧显示可切换的配色方案]

编辑器基础操作

• 文字元素：双击任意文字元素即可编辑——可改文字内容、颜色、字号、字体，也能加粗体/斜体/底线/项目符号
• 移动元素：点选后直接拖拽到想要的位置
• 按钮元素：点选按钮 → Edit Button，可以设置：
  • 按钮文字
  • 链接目标（站内某个页面，或设置成新分页打开 / 不可点击）
  • Style（文字颜色、字号、边框颜色等）
  • Hover 效果（鼠标悬停时的样式变化，例如背景变黑）
  • Animation（元素动画效果）
• 通用元素操作：每个元素都能 duplicate（复制）、hide（隐藏）、delete（删除）；删错了可以用 Undo 按钮复原
  • 常见做法：复制一个按钮、拖到旁边，做成首页常见的「双按钮」布局，再分别改颜色、分别设置不同的链接目标（例如一个链去 About us，一个链去 Contact）

Section（区块）编辑

双击某个 section → Edit Section，可以把背景改成：

• 纯色（flat color）
• 图片
• 视频

• Section Height：可以调整整个区块的高低
• 背景图片：点 Replace Image 后可以直接用 Unsplash（unsplash.com）的免费图库，站内搜索关键词（例如 "lawyer"）就能挑对应主题的图，选好后 Add to Page；下方还能调整图片透明度、固定背景（parallax 效果）、调整图片位置

[截图：Edit Section 面板里 Replace Image 弹出的 Unsplash 图库搜索界面]

• AI 生成图片：编辑器也提供 AI 生成图片功能，但不太推荐——AI 图片经常抓不到想要的效果，反而更花时间调整，实际用 Unsplash 现成图更省事
• 视频背景：可以直接贴 YouTube 视频链接插入，也能调整视频显示尺寸
• 调整 section 顺序：Move Up / Move Down 按钮可以把整个区块往上或往下移
• 隐藏/删除 section：双击 section → 垃圾桶图标删除；也可以针对「特定设备」show/hide（比如只在手机上隐藏这个区块）

添加元素 / 添加 Section

• 左侧 Add Elements：可以把文字、按钮、图标等元素拖拽到网站任意位置
• 左侧 Add Section：新增区块时，Hostinger 把可选区块样式按分类整理好（About us、Services、Contact form、Subscribe form 等），选 Main 分类下再挑一个具体样式插入即可
• 插入后的图片/文字跟前面一样可以双击替换

常见误区

• ❌ 给 AI 写生成网站的 prompt 时没有指定人物种族/地区/语言——容易出现文案语言混杂、配图人种/建筑与预期不符的问题，写 prompt 时越具体越好
• ❌ 过度依赖 AI 生成配图——AI 生成图片经常抓不准需求，反而更花时间调整，不如直接用 Unsplash 等免费图库现成图片更快
• ❌ 直接在网站上临时想 prompt 文案——先让 ChatGPT 帮忙写好详细描述再压缩到 700 字符以内，效果比临时现想好很多

Sources

YouTube：

1. Hostinger AI Website Builder Tutorial — https://www.youtube.com/watch?v=A6ZKWcv8PRQ

官方文档：

1. How to Use Hostinger AI Website Builder