曾几何时，搭建网站就像一个必须雇人完成的项目。但现在不再如此。
我一直在使用 Hostinger Website Builder，在本指南中，我将从登录的那一刻到网站上线的那一刻，为你逐步讲解整个过程。
让我们开始吧。
什么是 Hostinger Website Builder？
Hostinger Website Builder 是一款内置于你的 Hostinger 帐户中的 AI 驱动、可拖放的网站构建工具。
你无需安装任何组件，不需要懂代码，也不需要设计背景。你只需描述你的需求，AI 就会为你构建完整的网站，然后你可以根据品牌进行定制。
它是从零到上线，打造专业网站的最快方式之一。
第 1 步：登录并导航到构建器
当你登录 Hostinger 帐户时，你会来到 hPanel。这里是 Hostinger 的主面板，你可以在此管理所有内容，包括网站、域名、电子邮件和账单。
在左侧边栏，你会看到一列导航选项。点击 Websites。它下方会出现一个小下拉菜单，包含两个选项：Websites list 和 Migrations。点击 Websites list。
现在你处于 Websites list 页面，这里显示了所有与你的帐户关联的网站。
在页面右上角，你会看到一个紫色的 + Add website 按钮。点击它。
一个小下拉菜单出现，包含四个选项：
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- 以及自定义 PHP/HTML 网站
你需要点击 Hostinger Website Builder，它被描述为“AI 驱动的可拖放网站构建工具”。
第 2 步：向 AI 描述你的网站
选择 Hostinger Website Builder 后，你将进入标题为 “Let AI create your online presence.” 的设置界面。
在这里你向 AI 描述你想要构建的网站类型。
你会看到一个带有占位文本“Describe your website or business.”的大文本框。这是你的提示框，你在这里输入的内容决定了 AI 为你生成的一切。你提供的细节越多，结果就越好。
在文本框下方，你还会看到一排快速启动建议按钮，包括“Create a business website”、“Create an online store”、“Design a portfolio”、“Launch an appointments website”、“Start a blog”、“Launch a restaurant website”和“Create a one pager website”。
点击任意一个即可填充初始提示，之后可以对其进行编辑和扩展。
在屏幕底部，你会看到两个额外链接： Pre-made templates 和 Link in bio website。如果你想跳过 AI，浏览现成设计，可点击 Pre-made templates。
如果你只需要一个用于社交媒体资料的简单单页网站，可以看看 Link in bio 选项。
但对于大多数要真正构建网站的用户来说，AI 提示框是正确的起点。
如何编写优秀的 AI 提示
这是整个过程最重要的部分。把 AI 提示当作你给设计师的简报。你沟通得越清晰，结果就越接近你真正想要的。
以下是我为本指南使用的提示。我正在为一家创意机构构建网站：
“构建一个现代、专业的创意机构网站，提供品牌设计、平面设计、网页设计和数字营销服务。网站应兼具创意、大胆和可信度，同时保持简洁易导航。采用现代布局，配以强视觉效果、合理间距和时尚排版。包含以下页面：主页、关于、服务、作品集、博客和联系。在主页添加一个具有强力标题、简短价值导向描述和明确行动号召按钮（如‘开始项目’或‘获取报价’）的 Hero 区块。撰写简洁、有说服力的文案，说明我们的服务、目标客户及交付成果。确保网站对移动设备友好、加载迅速，并进行基础 SEO 优化。”
注意这个提示有多具体。它涵盖了行业、语气、布局风格、所需页面、主页结构和内容目标。如此详尽的细节为 AI 提供了良好的基础。
输入描述后，你会在文本框右上角看到一个 “Improve description” 按钮。
建议在提交前点击此按钮。AI 会扩展并完善你的提示，通常会补充一些你没有想到的细节。
准备就绪后，点击文本框右下角的紫色 箭头按钮（发送图标）提交提示并开始生成。
第 3 步：等待 AI 构建网站
提交提示后，Hostinger 的 AI 会立即开始工作。你会看到一个深紫色背景的全屏加载动画，提示 “Looking for matching pictures…” 以及显示进度的进度条。
此阶段通常需 30 到 60 秒。在这段时间内，AI 会进行大量操作：生成页面布局、撰写网站文案、从图库中选择匹配图片、构建导航并根据提示结构化整个站点。
加载时请不要关闭标签页，耐心等待即可。
第 4 步：查看 AI 构建的内容
AI 完成后，你会看到新网站的预览。看到生成结果的那一刻非常振奋人心。
屏幕左侧显示生成的网站实时预览。右侧有一个名为 “Your idea summary” 的面板，展示你提交的提示摘要，并带有 “Edit idea” 按钮，可返回修改和重新生成提示。
以我的案例为例，AI 将网站命名为 “BoldCraft Studio”，并生成了一个包含标题“Crafting Bold Brands That Shine”、支持性描述以及“Start Now”和“Get Quote”两个行动号召按钮的主页。
导航栏包含我所需的六个页面：主页、关于、服务、作品集、博客和联系。
在预览界面左上角，你还会看到两个按钮： Previous versions，可循环查看 AI 考虑的其他设计；以及 Rate site，用于对生成结果提供反馈。
在预览右上角，你会看到桌面和移动预览切换图标。请在继续之前用它们检查网站在手机上的展示效果。养成早期检查的好习惯。
如果你对整体方向满意，点击右侧面板的紫色 Continue 按钮，进入完整编辑器，开始真正的自定义。
如果不满意，点击 Edit idea，修改提示并重新生成。你可以根据需要多次尝试。
第 5 步：熟悉编辑器
编辑器是你大部分时间要使用的地方。初次进入时，请先花点时间了解布局，再开始点击操作。
编辑器主要分为两个区域：
- 中央的大画布区域是你的网站画布，可实时查看和交互网站。
- 左侧的窄垂直侧栏是控制面板，包含所需的所有工具。
下面是侧栏中各项的功能：
- Setup 用于访问站点基本设置、已连接域名和套餐信息。
- Elements 打开可拖放内容块面板，可向任意页面添加新模块。我稍后会详细介绍。
- Pages 显示所有页面，可在此切换、添加、重命名、调整顺序或删除不需要的页面。
- Styles 控制全站设计，可设置字体、调色板和按钮样式。此处的更改会应用到整个站点，是做大范围设计调整的正确位置，而不是逐个区块修改。
- AI tools 提供 Hostinger 写作和内容 AI，可用来重写文案、生成新文本等。
- Blog 如果站点包含博客，可在此创建和管理文章。
- Store 如果出售产品，可在此设置在线商店。请注意，开启电商功能需要更高套餐。
- SEO 打开内置 SEO 管理器，可为每页设置 meta 标题、描述及其他搜索优化细节。
- More 展开第二级菜单，包含 Appointments、General settings、Integrations、Form submissions、Analytics、Media library、多语言支持、Manage backups、Export content to WordPress 及 Help and Resources 等附加工具。
在编辑器顶部，你还会看到主工具栏。从左到右依次是：桌面和移动预览切换、撤销和重做按钮、Connect domain 按钮、Preview 按钮，和绿色的 Go live 按钮。
第 6 步：编辑你的内容
现在轮到你个性化网站了。点击网站画布上的任意位置开始编辑。
当你将鼠标悬停在页面任一区块上时，区块左上方会出现蓝色标签，显示该元素类型，例如“Section”或“Header”。同时，一个浮动工具栏会出现在该区块上方，提供编辑选项。
区块工具栏从左到右提供以下控制：Edit section 打开区块设置面板，可更改背景图或颜色、调整内边距及布局选项。
紧接着是 Generate image，用于打开 AI 图像生成器。
然后是复制图标、隐藏/显示切换、删除图标、上下移动箭头以重新排序区块，以及三点“更多选项”菜单。
要编辑页面上的文本，只需直接点击文本并开始输入。文本元素会变为可编辑状态，并出现格式化控制，可直接更改字体大小、粗细、对齐方式和颜色。
要更换图片，点击它。你会看到选项，可用本地文件替换、浏览 Hostinger 的图库，或使用 AI 重新生成一张。
建议先完善首页，然后在 Pages 面板中切换到其他页面，依次编辑。
第 7 步：使用 AI 图像生成器
一个值得重点说明的功能是 AI image generator，如果你没有专业照片，这功能非常有用。
要使用它，将鼠标悬停在页面任一区块上，点击浮动工具栏中的 Generate image。右侧会弹出一个面板。
在面板中，你会看到一个“Image description”文本框。输入你想要生成的图像描述。
描述越具体、越具象，输出效果就越好。面板显示 3,000 字符限制和实时质量指示器，告诉你描述是否足够完善。
例如，当我输入“一个现代创意机构的办公空间，设计师围坐在笔记本电脑和大屏幕前，展示品牌设计、网站原型和数字艺术。明亮、干净且时尚的办公室”时，面板显示“Great description!” 并且质量条已满。
确认描述后，点击 Create images 按钮，AI 会为你生成一组图像供选择。
请注意：AI 图像生成器需要 Business 套餐或更高版本。如果你使用的是 Premium 套餐，面板底部会出现升级提示。
第 8 步：向任意页面添加新元素
如果你想添加页面上没有的内容块，点击左侧侧栏的 Elements 打开“Add elements”面板。
你会看到所有可用元素的网格，包括文本、按钮、Affiliate link、Add to bag、图片、画廊、视频、形状、卡片、地图、Instagram feed 及联系表单等。要将任一元素添加到页面，只需将其从面板拖拽到画布上相应位置。
放置后，点击该元素即可访问其单独设置和样式选项。
这种拖放方式让你不受 AI 生成布局的限制，可随意添加、删除及重排元素。
第 9 步：管理页面
点击左侧侧栏的 Pages 可查看所有页面列表。点击任一页面名称即可跳转并编辑该页面。
要添加新页面，使用加号按钮。要调整导航中页面的顺序，可在列表中上下拖动。
如果 AI 生成了不需要的页面，可在此删除。同样，如果需要 AI 未包含的页面（例如客户评价页或定价页），也可在此添加，然后使用 Elements 面板进行构建。
第 10 步：设置 SEO
在发布前，你需要设置 SEO。这一步很多人会跳过，但这是个错误。
花 15 分钟认真填写 SEO 设置，能显著提高你的网站在 Google 上的可见性。
点击左侧侧栏的 SEO，打开名为 “Let’s be found on Google (SEO).” 的 SEO 面板。
面板分为两部分。左侧是页面列表，右侧是 Website overview，显示你的商业名称和网站语言。如有误可点击 Edit 进行更新。
在网站信息下方，有一个标为 “Some pages require your attention.” 的区域。
每个需要关注的页面旁会有橙色警告图标。点击左侧列表中的任一页面，即可打开该页面的 SEO 设置，填写相应的 meta 标题和 meta 描述。
逐个页面完成设置。优秀的 meta 标题应清晰、包含主要关键词且少于 60 字符；优秀的 meta 描述应简要概括页面内容且少于 160 字符。这些会显示在 Google 搜索结果中，值得为每页花几分钟。
第 11 步：连接你的域名
如果尚未为网站连接自定义域名，现在就该操作。点击编辑器顶部工具栏的 Connect domain 按钮。
你有两个选项。如果已拥有域名，可通过更新 DNS 设置将其指向 Hostinger 服务器；如果尚未拥有域名，可在同一界面直接从 Hostinger 购买。
在连接域名之前，你的网站会以临时 Hostinger 子域名（如 yoursite.builder-preview.com）访问，仅适合测试；正式分享前务必使用正式域名。
第 12 步：预览并上线
你已近在咫尺。在点击发布前，点击工具栏右上角的 Preview 按钮。
这会打开全屏预览，展示访客看到的真实效果。使用预览屏幕顶部的桌面和移动切换图标，检查两种视图下的展示效果。
特别注意首页 Hero 区块在移动端的展示、导航的折叠方式，以及图片是否出现不当裁剪。
确认无误后，返回编辑器并点击右上角的绿色 Go live 按钮。你的网站将正式上线。
第 13 步：探索集成
网站上线后，值得探索可用的集成。在左侧侧栏依次点击 More > Integrations。
Integrations 面板允许你将网站与外部工具和服务连接。当前选项包括用于生成运单和管理订单的 Shippo、用于创建和销售按需印刷产品的 Printful、用于电子邮件营销和发送通讯的 Hostinger Reach、用于投放付费广告的 Google Ads，以及用于添加自定义 HTML、CSS 或 JavaScript 的 Custom code。
要激活任何集成，点击对应的 Get started，按照连接步骤操作，然后重新发布以更新站点。
充分发挥 Hostinger Website Builder 的使用技巧
在 AI 提示中提供丰富细节。 两句提示往往只会得到通用结果。详细、具体的提示应涵盖行业、受众、设计偏好、页面结构和语气，这样才能更接近你的预期。花五分钟撰写完整简报，可节省数小时后续编辑时间。
每次都使用 Improve description 按钮。 这一按钮常被忽略，却非常有用。AI 往往会补充你未明确说明的细节，并将其转化为具体的设计和内容指令。
仔细编辑文案。 AI 自动生成的文案只是占位文本，并不能完全了解你的业务。请逐页审阅并重写，以反映你的真实服务、价值和品牌声音。
上线前务必检查移动端视图。 Hostinger 会自动响应式布局，但在较小屏幕上，图片和间距有时仍需微调。上线前一定记得预览移动端。
为每个页面都填写 SEO。 不仅仅是首页。网站上每个页面都值得设置适当的 meta 标题和描述。每页几分钟的投入，将极大提升搜索可见度。
使用 Media library 保持素材有序。 在 More > Media library 下，你可以集中上传和管理所有图片。这有助于跨页面重复使用素材，保持站点一致性。
持续改进网站。 发布并不是终点，而是开始。定期回访，更新内容、添加新博客文章，并随着业务发展不断优化页面。
Hostinger Website Builder 几乎消除了构建专业网站的所有障碍。AI 负责设计和文案生成，编辑器让定制轻松直观，内置 SEO 和集成工具让你一站式搞定所有需求。
按照本指南的步骤操作，你完全可以在一小时内启动并上线一个精致的网站。
