Divi主题 完整指南

从安装激活到高级定制的全流程详解，助力打造专业网站

可视化构建 响应式设计 电商集成 SEO优化

一键安装

通过WordPress后台直接上传安装，快速启用Divi主题

子主题保护

使用子主题保护自定义修改，避免更新时丢失

全局控制

通过主题选项统一管理网站Logo、颜色、字体等设置

安装与激活

正确的安装和激活流程是使用Divi主题的基础，确保您能够顺利开始网站建设

从Elegant Themes下载

1

登录会员账户

访问Elegant Themes官网，使用您的会员凭据登录，进入"会员专区"[96]。

2

下载安装包

在会员专区找到并点击"Download The Divi Theme"按钮，下载Divi.zip文件[95]。

3

保存安装包

将下载的Divi.zip文件保存到本地计算机的易访问位置，如桌面或专门的网站项目文件夹[95]。

Elegant Themes会员后台界面显示Divi主题下载按钮

注意： Safari用户需在偏好设置中关闭"下载后打开'安全的'文件"选项，确保文件保持.zip格式[95]。

WordPress中安装

上传主题

在WordPress后台的"外观 > 主题"中，点击"添加新主题"，然后选择"上传主题"[96]。

外观 → 主题 → 添加新主题 → 上传主题

选择文件

点击"选择文件"按钮，找到并选中之前下载的Divi.zip文件，然后点击"立即安装"[96]。

选择 Divi.zip → 立即安装

激活主题

安装成功后，点击"激活"按钮使Divi成为当前活动主题[96]。

安装成功 → 点击激活

激活许可证

获取API密钥

登录Elegant Themes会员账户，在账户设置或API密钥管理页面找到您的唯一API密钥[106]。

  • 保护账户安全，不要分享API密钥
  • API密钥用于验证会员身份
  • 确保网站能够接收自动更新
激活步骤：
1 进入Divi → 主题选项
2 选择"更新"标签页[106]
3 输入用户名和API密钥
4 保存更改完成激活

子主题的重要性

使用子主题是保护自定义修改、确保安全更新的最佳实践

子主题概念

什么是子主题

子主题是一个独立的主题，它继承了父主题（如Divi）的所有功能、样式和模板文件。子主题至少包含两个核心文件：style.css和functions.php[101]。

核心文件：
  • style.css – 存放自定义CSS样式
  • functions.php – 添加自定义PHP代码和功能

继承关系

WordPress首先加载父主题文件，然后加载子主题文件。如果子主题中存在同名文件，将覆盖父主题的文件。这种机制允许在不修改父主题核心文件的情况下进行定制[101]。

WordPress主题加载流程

flowchart TD A["WordPress 加载主题"] –> B["加载父主题文件"] A –> C["加载子主题文件"] B –> D["Divi 核心功能"] B –> E["Divi 默认样式"] B –> F["Divi 模板文件"] C –> G["自定义 CSS 样式"] C –> H["自定义 PHP 功能"] C –> I["自定义模板覆盖"] G –> J["最终网站呈现"] H –> J I –> J D –> J E –> J F –> J J –> K["用户访问网站"]

使用子主题的重要性

保护自定义修改

直接修改父主题文件在更新时会被覆盖。子主题将所有自定义代码分离保存，确保更新时不会丢失任何修改[101]。

风险： 直接修改父主题 → 更新后修改丢失

便于主题更新

使用子主题可以一键更新父主题，无需担心破坏网站。确保网站始终运行在最新、最安全的版本上。

优势： 安全更新 + 保留自定义 = 最佳实践

避免直接修改

子主题提供安全的沙盒环境进行实验和修改，即使出错也可以简单地禁用子主题，网站将恢复默认状态。

安全： 易于调试 + 快速恢复

主题选项概览

Divi主题选项是控制全局设置的核心区域，提供集中的界面来配置网站功能和外观

常规设置

Logo与导航栏

上传自定义网站Logo，替换默认文字标题。启用固定导航栏功能，让导航菜单在滚动时保持在屏幕顶部[12] [26]。

Divi主题设置界面中的Logo上传选项

颜色调色板

定义包含8种颜色的默认调色板，这些颜色将出现在Divi Builder的所有颜色选择器中，确保网站色彩一致性[32]。

Google字体

启用Google字体并选择需要的字体子集。Divi内置数百种Google字体，可在Builder中轻松应用[10]。

Playfair Display 标题字体
Inter 正文字体

社交媒体链接

输入各种社交平台的URL，Divi会自动在网站页脚生成对应的社交图标[12]。

构建器设置

文章类型集成

将Divi Builder的可视化编辑能力扩展到各种文章类型，包括默认的"文章"和"页面"，以及自定义文章类型如"项目"和WooCommerce的"产品"[164]。

默认类型
文章 (Posts)
页面 (Pages)
自定义类型
项目 (Projects)
产品 (Products)

高级设置

"静态CSS文件生成"选项将Divi生成的CSS保存为静态文件，而不是内联在HTML中，有助于减少页面加载时间并提升网站性能[157]。

性能优化选项
静态CSS文件生成
内联样式输出
产品导览

布局设置

文章布局

控制文章页面的显示元素，如作者、日期、分类、评论数，以及是否显示特色图片和评论区域[164]。

显示作者信息
显示发布日期
显示特色图片
启用评论功能

页面布局

独立控制页面的布局选项，可以设置页面是否显示特色图片和评论功能[164]。

显示特色图片
启用评论功能
通常页面不需要评论

侧边栏设置

设置网站整体的侧边栏布局和博客索引页上的特色图片显示[164]。

左侧边栏
右侧边栏
无侧边栏

SEO设置

基础SEO设置

Divi内置基础SEO工具，允许为首页、文章和列表页面设置自定义标题、元描述和关键词[182]。

首页SEO

建议： 对于单篇文章和页面，通常建议保持Divi默认设置，避免与专业SEO插件冲突[182]。

SEO最佳实践

虽然Divi提供基础SEO功能，但建议使用专业SEO插件获得更全面的功能[170]。

推荐SEO插件
Yoast SEO
Rank Math
All in One SEO

优势： XML站点地图生成、内容分析、结构化数据标记、关键词优化等高级功能。

集成设置

代码注入

无需修改主题文件，在网站特定位置添加第三方服务代码，如Google Analytics、Facebook Pixel等[199]。

网站头部代码

添加到<head>部分的代码，适合分析跟踪和验证标签[198]。

Body标签代码

添加到<body>标签的代码，适合聊天插件和A/B测试工具[198]。

内容区域代码

在文章内容顶部和底部添加代码，适合统一插入广告、订阅表单或相关文章推荐[198]。

文章顶部代码

显示在每篇文章内容之前，适合订阅表单或广告。

文章底部代码

显示在每篇文章内容之后、评论之前，适合相关文章推荐。

提示： 这种全局性的代码注入功能确保了所有新发布的内容都自动包含这些元素，保证了一致性。

更新设置

自动更新

输入Elegant Themes会员信息，启用自动更新功能，确保网站始终使用最新版本[157]。

会员信息设置

版本回滚

如果新版本导致兼容性问题，可以轻松回滚到之前的稳定版本，确保网站正常运行[184]。

回滚选项
当前版本: 4.24.0 活跃
上一版本: 4.23.1
稳定版本: 4.22.4

注意： 建议在更新前做好网站完整备份，确保万无一失[184]。

针对不同类型网站的Divi使用要点

Divi主题的灵活性使其适用于各种类型的网站，从个人博客到企业官网再到电子商务平台

个人博客网站

内容展示与可读性

利用Divi Builder创建图文并茂的自定义文章布局，确保内容在各种设备上完美显示[283]。

响应式设计
自定义字体和颜色
优化阅读体验

文章布局与评论

使用主题构建器创建统一的文章模板，自定义评论区域样式，营造积极的社区氛围[278]。

统一文章模板
社交分享按钮
第三方评论集成

SEO优化

利用Divi的SEO设置和性能优化功能，提升博客在搜索引擎中的可见性[291]。

语义化HTML结构
图片优化与延迟加载
快速页面加载

企业官网

专业外观与品牌形象

使用全局预设和主题构建器创建统一的品牌视觉规范，确保网站每个页面都体现专业性和品牌特色[266]。

品牌元素
  • • 主色调与辅助色
  • • 品牌字体
  • • 按钮样式
  • • Logo使用规范
页面模板
  • • 自定义页眉页脚
  • • 统一导航菜单
  • • 响应式布局
  • • 联系信息展示

导航与Logo设置

创建清晰直观的导航系统，合理组织复杂的内容结构，并设置专业的Logo展示[276]。

固定导航栏

滚动时导航栏保持在屏幕顶部，方便用户访问

自定义页面布局

利用Divi Builder的可视化拖放功能和1600+预制布局包，创建各种类型的专业页面[286]。

常用页面类型
首页
关于我们
服务介绍
案例研究
联系我们
团队介绍
Divi Builder模块
46个内容模块 全功能
模糊模块 服务展示
作品集模块 案例展示
滑块模块 图片展示

电子商务网站

WooCommerce集成

Divi与WooCommerce的无缝集成被称为"终极电商解决方案"，允许可视化定制商店的每个部分[267] [268]。

深度集成

自动加载专用WooCommerce模块，无需复杂代码即可定制电商页面。

商店首页
产品分类页
购物车页面
结账页面
产品页面定制

启用Divi Builder后，所有WooCommerce元素转换为可定制的模块[297]。

产品图片
产品标题
产品价格
加入购物车
营销功能

使用高级模块提升销售额和客单价[300]。

相关产品
追加销售
产品评论
促销标签

购物流程优化

自定义购物车和结账页面，添加品牌元素和信任徽章，减少购物车放弃率。

支付网关

支持多种主流支付方式[308]。

PayPal Stripe Square
安全与信任
SSL证书加密
安全认证标志
退换货政策

性能优化

优化网站性能，提升用户体验和转化率[307]。

图片优化
图片压缩
延迟加载
WebP格式
维护建议
定期更新主题
更新WooCommerce
定期备份网站

开始您的Divi之旅

通过本指南，您已经了解了Divi主题的完整安装、配置和使用流程。现在，开始打造您的专业网站吧！

安装指南 子主题保护 主题选项 网站类型应用