Hostinger AI 网站构建器搭建 WordPress 网站使用教程

借助 Hostinger AI WordPress 网站构建器，你可以在几分钟内上线一个功能完整、个性化的网站。该工具通过对话式界面了解你的品牌，并自动配置主题、配色和内容。

步骤 1 — 选择 AI 生成流程

在向主机方案添加新的 WordPress 网站时，AI 网站构建器会自动启动。你将直接进入设置界面，在这里你可以描述你的网站创意并选择编辑器。

步骤 2 — 提供你的网站创意

AI 流程启动后，你需要定义网站的用途：

1. 描述你的创意： 描述你希望网站呈现的样子（例如“一个出售各种面包的烘焙店网站”）。
2. AI 润色（可选）： 点击 Enhance with AI 按钮，自动将你的提示词扩展为更详细的描述，以获得更高质量的结果。
3. 选择编辑器： 在下拉菜单中选择 Gutenberg 或 Elementor 作为你偏好的页面构建器。
4. 设置语言和位置： 选择你的 Site language（网站语言）——生成的网站支持所有 WordPress 支持的语言。Store location（商店位置，仅在线商店需要） 现在会根据你的账单国家/地区自动检测，但你仍然可以手动更改。
5. 提交： 点击箭头图标继续。

步骤 3 — 与 Hostinger Agent（AI 助手）对话

系统会打开一个对话式界面来收集你的品牌需求。

1. 确认品牌名称： Hostinger Agent 会询问你的品牌名称。在聊天框中输入并发送。
2. 等待生成： AI 将开始启用插件并生成你的网站结构、配色和内容。你可以在“Give us a minute（请稍等片刻）”屏幕上跟踪进度。

如果你正在搭建在线商店，WooCommerce 商店位置会根据你的账单国家/地区自动检测——无需手动选择。

步骤 3b — 审查页面结构（可选）

在开始生成之前，Hostinger Agent 会展示 AI 建议的页面列表供你审查。

你可以：

• 添加你需要的页面
• 删除你不需要的页面
• 重命名任何页面
• 重新排序页面，使其符合你偏好的结构

对页面列表满意后，确认继续生成。此步骤可减少网站建成后重新调整结构的需求。

步骤 3c — 添加联系信息和社交媒体链接（可选）

Hostinger Agent 接下来会（可选地）询问你的联系方式和社交媒体信息：

• 联系信息：提供电子邮件地址、电话号码和实际地址。
• 社交媒体链接：添加你的 Facebook、Instagram 和 TikTok，可以使用用户名或完整 URL。
• WhatsApp 按钮：选择是否在你的网站上添加 WhatsApp 聊天按钮。

这里的所有字段都是可选的，你可以跳过任何一项。你提供的所有信息都会自动用于填充网站的页脚以及相关的联系/位置区块，因此之后无需在 WordPress 中手动编辑这些部分。

步骤 4 — 自定义你的风格

初始网站预览加载完成后，你可以微调你的视觉形象：

• 配色方案： 从多个 AI 生成的配色方案中进行选择，这些方案以卡片形式展示，堆叠的颜色块可预览配色效果。每种方案都可以是浅色或深色，具体取决于网站的氛围、行业以及你在提示词中包含的偏好。所有生成的配色方案均符合 WCAG 对比度标准。选择一种配色方案后，它会全局应用于你的主题，确保视觉统一。
• 自定义颜色： 如果你有特定的品牌颜色，勾选 Your own color palette 复选框，即可使用十六进制颜色选择器设置品牌色、背景色和区块颜色。当你更改背景色或区块颜色时，文字颜色会自动调整，以确保可读性。

• Logo 上传： 切换到自定义面板中的 Logo 标签页，上传你的品牌 Logo（PNG、JPG，最大 5MB）。它会自动添加到你的 WordPress 网站标题和页眉中。

• 字体搭配： AI 会根据你的网站类型建议字体组合。你也可以在构建过程中手动选择自己的字体。

步骤 5 — 预览并完成

在最终确定之前，请确保网站在所有屏幕上都显示良好：

1. 视口切换： 使用预览窗口左上角的视口图标在桌面、平板和移动端视图之间切换——以便你检查这三个断点下的响应式效果。
   
2. 缩放： 使用预览中的缩放控件，可以近距离查看特定区块，或总览整个页面的外观。
3. 完成： 如果你对预览满意，点击 Finish customization。
4. 设置 WordPress： 点击 Setup in WP admin，你将被重定向到 WordPress 控制面板，新网站已准备就绪，可以进行管理。

如果你想尝试不同的方案，可以在版本面板中点击 Create，使用不同的参数生成新的网站版本，而不会丢失现有版本。

你最多可以为 AI WordPress 网站构建器网站生成和管理 5 个版本：

• 点击版本列表中的 Create，在不覆盖当前网站的情况下生成其他版本。
• 从版本列表面板浏览所有已生成的版本。
• 随时选择任意历史版本进行恢复。此操作可逆。
• 删除不再需要的版本，保持列表整洁。

AI WordPress 网站构建器正在持续更新。以下是自推出以来新增的功能：

• AI 驱动的字体搭配——AI 会根据你的网站类型建议字体组合；你也可以手动选择字体。
• 预览缩放——在网站预览中放大或缩小，查看详细视图或整页视图。
• 平板预览——预览中现可在桌面和移动端之外使用平板尺寸。
• 全新 Elementor 区块——新增预建区块：在线商店 hero（×6）、作品集 hero（×5）、服务（×2）、项目（×1）、联系我们（×1）、产品分类（×3）和邮件订阅（×1）。

改进

• 移动端优化的构建器 UI——构建器在移动设备上也能流畅运行。
• 商店位置自动检测——你的 WooCommerce 商店位置会根据账单国家/地区自动检测，减少设置步骤。
• 扩展的语言支持——生成的网站现在支持所有 WordPress 支持的语言，而不仅限于 Hostinger 控制面板支持的语言。
• 本地化的日期/时间格式——生成的网站会根据你选择的语言环境自动应用正确的日期和时间格式。
• 更智能的图片和视频选择——改进了媒体选择逻辑，具备更强的上下文感知能力，为每个网站提供更贴切的视觉素材。
• AI 建议域名——在引导流程中，当你为使用临时子域名创建的网站选择 Connect domain 时，域名搜索现在会使用你网站的标题（对于使用 AI 网站构建器搭建的网站，还会使用原始 AI 生成提示词），以推荐与网站内容相关的域名，每个域名都带有 AI 建议标签。
• 深色主题支持——AI 现在可以生成深色主题网站，根据网站的氛围、行业和提示词在浅色与深色模式之间进行选择，所有配色方案均符合 WCAG 对比度标准。
• 重新设计的配色选择器——配色卡片现在能更丰富地展示你网站的配色预览。

了解如何使用 Hostinger 的 AI 工具搭建 WordPress 网站：

观看视频