如何在WordPress和Divi中使用页面：完整分步指南

WordPress 为互联网上超过 43% 的网站提供支持——这是有原因的。其直观的界面、庞大的插件生态系统和灵活的内容管理功能使其成为从独立博主到企业级企业的首选 CMS。当您将 WordPress 与 Elegant Themes 的 Divi 主题配对时，您将解锁一个拖放式可视化构建器，让您无需编写任何代码即可设计出令人惊艳的专业页面。

在这份综合指南中，您将学到如何使用 Divi Builder 在 WordPress 中创建、自定义、组织和发布页面。无论您是在构建第一个网站还是完善现有网站，本教程都涵盖了您需要了解的所有内容。

WordPress 中的页面是什么？（以及它们与文章的区别）

在深入了解技术步骤之前，重要的是要理解什么是 WordPress 页面 — 以及它与博客文章的区别。

页面是您网站的结构骨架。它们保存不经常更改且不需要分类或标记的内容。想想您的 关于我们、联系、服务 或 首页 — 这些都是 WordPress 页面的典型示例。

理解这一区别可以帮助您做出更明智的决定，了解如何组织和呈现您的内容。

前置条件：开始前需要准备的内容

要遵循本指南，请确保您已准备好以下内容：

• 一个实时 WordPress 安装在可靠的托管环境中
• 已安装并激活 Divi 主题（可从 Elegant Themes 获取）
• 对 WordPress 仪表板的管理员访问权限
• 对您网站结构和目标的基本了解

如果您仍在设置托管环境，请考虑使用 AlexHost 的 VPS 托管 — 一个高性能、可扩展的解决方案，为您提供完整的 root 访问权限、专用资源和以最优速度运行 WordPress 的灵活性。对于较小的项目或个人网站，共享虚拟主机是一个经济实惠且初学者友好的替代方案，完全兼容 WordPress。

第1步：登录您的WordPress仪表板

首先打开您喜欢的网络浏览器并导航到您的WordPress管理面板。默认URL是：

http://yourdomain.com/wp-admin

输入您的用户名和密码，然后点击登录。您将进入WordPress仪表板——您整个网站的中央控制面板。

> 专业提示：如果您管理多个WordPress网站或需要更简化的管理体验，请考虑使用带有cPanel的VPS，以便从单个直观的界面进行集中的服务器和网站管理。

第2步：创建新的WordPress页面

进入仪表板后，按照以下步骤创建新页面：

1. 在左侧导航菜单中，找到并点击页面
2. 点击页面列表顶部的添加新页面（或使用顶部管理栏中的+ 新建 > 页面快捷方式）
3. 您将进入WordPress块编辑器（Gutenberg）

添加标题和基本内容

• 点击顶部的“添加标题”字段并输入您的页面名称（例如，*关于我们*、*联系*、*服务*）
• 在下方的内容区域中，您可以使用Gutenberg块编辑器添加文本块、图像、标题、按钮和其他元素
• 在编辑器中使用“/”快捷方式快速搜索和插入任何块类型

在此阶段，您使用的是标准WordPress编辑器。但是，如果您想要高级视觉自定义——并且您正在使用Divi——您需要在下一步中激活Divi Builder。

第 3 步：激活并使用 Divi Builder

Divi Builder 将标准 WordPress 编辑器转变为强大的可视化拖放设计环境。以下是启用和使用它的方法：

启用 Divi Builder

在编辑器中打开页面后，您会在内容区域顶部附近看到一个突出的按钮：

“Enable Divi Builder” — 点击它。

WordPress 将提示您三个起始选项：

选择最适合您项目的选项，然后点击开始构建。

了解 Divi Builder 结构

在添加内容之前，了解 Divi 如何组织其布局层次结构会很有帮助：

Section
  └── Row
        └── Column
              └── Module

• 分区是最大的容器 — 它们跨越页面的全宽
• 行位于分区内，定义列结构（1、2、3 列等）
• 列是行内的单个垂直分割
• 模块是实际的内容元素（文本、图像、按钮、表单等）

第 3a 步：添加分区和行

1. 点击画布底部的蓝色”+”图标以添加新的分区
2. 选择分区类型：常规、全宽或专业
3. 在分区内，点击“+”图标以添加行
4. 选择您首选的列布局（例如，1/2 + 1/2 用于两列设计）

第 3b 步：添加模块

模块是每个 Divi 页面的内容构建块。要添加一个：

1. 点击列内的灰色”+”图标
2. 将出现一个模块库 — 浏览或搜索您需要的模块
3. 点击模块将其插入您的布局中

常用的 Divi 模块包括：

• 文本模块 — 用于段落、标题和格式化副本
• 图像模块 — 用于照片、图形和插图
• 按钮模块 — 用于 CTA 和导航链接
• 滑块模块 — 用于英雄图像轮播
• 联系表单模块 — 用于潜在客户捕获和询问
• 简介模块 — 用于图标 + 文本功能框
• 视频模块 — 用于嵌入式视频内容
• 推荐模块 — 用于社会证明和评论
• 代码模块 — 用于自定义 HTML、CSS 或 JavaScript 代码片段

第 3c 步：自定义模块

点击任何模块上的铅笔（编辑）图标以打开其设置面板。设置分为三个选项卡：

1. 内容选项卡

配置模块的实际内容 — 文本、图像、链接、按钮标签、表单字段等。

2. 设计选项卡

控制模块的视觉外观：

• 排版 — 字体系列、大小、粗细、行高、字母间距
• 颜色 — 背景、文本、边框、图标颜色
• 间距 — 填充和边距控制（带响应式断点）
• 边框和阴影 — 圆角、盒阴影、边框样式
• 尺寸 — 宽度、高度、最大宽度约束

3. 高级选项卡

访问开发者级别的设置：

• CSS 类和 ID — 用于自定义样式钩子
• 自定义 CSS — 直接编写模块特定的 CSS
• 可见性 — 在桌面、平板电脑或移动设备上显示/隐藏模块
• 动画 — 入场动画效果和时序

> 设计提示：Divi 的响应式控制让您可以为桌面、平板电脑和移动视图设置不同的值。在发布之前，请始终在所有三个断点上预览您的页面。

第 4 步：使用层级结构组织您的页面

随着您的网站不断增长，保持页面的组织性对用户体验和 SEO 都至关重要。WordPress 支持父子页面层级，允许您在公共父页面下嵌套相关页面。

创建父子页面关系

1. 编辑页面时，在块编辑器的右侧边栏中查看
2. 点击页面以展开页面设置面板
3. 找到页面属性部分
4. 在父页面下，点击下拉菜单并选择您想要指定为父页面的页面

示例层级：

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

此结构创建更简洁的 URL（例如 yoursite.com/services/web-design/），并帮助搜索引擎更好地理解您网站的内容架构。

第 5 步：将页面添加到导航菜单

创建页面不会自动将其添加到网站的导航中。您需要手动将其添加到菜单。

1. 在 WordPress 仪表板中，转到外观 > 菜单
2. 选择现有菜单或点击创建新菜单
3. 在左侧的页面面板中，勾选要添加的页面旁的复选框
4. 点击添加到菜单
5. 拖放菜单项以重新排序或创建下拉子菜单
6. 完成后点击保存菜单

> 最佳实践：保持主导航菜单专注于最重要的页面。最多目标为 5–7 个顶级项目，以避免让访问者感到困惑。

第6步：配置页面设置以优化SEO和性能

发布前，花点时间配置影响搜索引擎可见性和用户体验的关键页面设置。

永久链接（URL Slug）

• 在区块编辑器侧边栏中，找到永久链接部分
• 编辑URL slug，使其简短、描述性强且富含关键词
• 避免使用带数字的自动生成slug（例如，/?p=123）
• 好的示例：yoursite.com/about-us/
• 不好的示例：yoursite.com/?page_id=47

特色图像

• 分配相关的特色图像以改善社交分享外观和视觉一致性

页面模板

• 某些主题（包括Divi）提供多个页面模板（例如，全宽、无侧边栏）
• 在页面属性 > 模板下选择适当的模板

SEO元数据

• 如果您使用SEO插件（如Yoast SEO或Rank Math），请填写：
• 元标题——包含您的主要关键词
• 元描述——编写一个引人注目的150–160个字符的摘要
• 焦点关键词——设置您的目标搜索词

第7步：保存、预览和发布您的页面

一旦您对页面设计和设置感到满意，就是时候上线了。

Divi Builder 中的保存选项

在 Divi Builder 界面的右上角，您会找到：

• Save Draft — 保存您的工作而不公开显示
• Preview — 在新标签页中打开您页面的实时预览
• Publish/Update — 使页面在您的网站上上线

从块编辑器发布

如果您退出 Divi Builder 并返回标准块编辑器：

1. 点击 Save Draft 保存而不发布
2. 点击 Preview 查看页面在前端的外观
3. 准备好上线时点击 Publish
4. 在确认面板中再次点击 Publish 进行确认

> 重要提示：在发布前，始终在桌面和移动设备上预览您的页面。Divi 的响应式设计工具功能强大，但手动审查可以捕捉自动化工具遗漏的问题。

高级技巧：充分利用WordPress和Divi

使用Divi主题生成器创建全局模板

Divi主题生成器（Divi 4.0+版本可用）允许您为页眉、页脚和特定文章/页面类型创建全局模板。这确保了整个网站的设计一致性，无需手动编辑每个页面。

将布局保存到Divi库

如果您设计了喜欢的部分或布局，将其保存到Divi库以在其他页面中重复使用。这大大加快了您的工作流程。

启用Divi的A/B测试（分割测试）

Divi包含内置的分割测试工具，让您可以测试模块、部分或页面的不同版本，以查看哪个表现更好——对转化率优化非常有价值。

使用SSL保护您的网站

如果您还没有这样做，请确保您的WordPress网站在HTTPS上运行。SSL证书对于用户信任、数据安全和Google排名至关重要。AlexHost提供SSL证书，易于安装且与所有WordPress托管环境兼容。

使用自定义域名

专业的域名强化了您的品牌，并提高了搜索结果中的点击率。您可以通过AlexHost的域名注册服务直接注册和管理您的域名，支持数百个TLD扩展。

常见问题故障排除

结论

使用 Divi 主题在 WordPress 中处理页面为您提供了一个非常强大和灵活的工具包，用于构建专业网站 — 无需编码。通过遵循本指南中的步骤，您可以：

• 创建结构清晰、标题和内容明确的 WordPress 页面
• 使用 Divi 的拖放构建器设计视觉上引人注目的布局
• 将您的页面组织成逻辑层次结构，以获得更好的用户体验和 SEO
• 配置永久链接、元数据和模板等关键设置
• 在预览所有设备类型后自信地发布

WordPress 的内容管理能力与 Divi 的视觉设计功能相结合，难以超越。有了正确的托管基础设施支持，您的网站将快速、安全且准备好扩展。

对于资源密集型 WordPress 项目、高流量网站或需要专用计算能力的应用程序，请探索 AlexHost 的专用服务器 — 提供企业级硬件、完整的服务器定制和最大性能，满足苛刻的工作负载需求。

*准备好构建您的下一个 WordPress 项目了吗？从坚实的基础开始 — 选择合适的托管，安装 Divi，并按照本指南创建外观精美且排名更好的页面。*