如何开始使用Divi 5

Divi 5是下一代Divi Builder，而不仅仅是另一个版本更新。这是从头开始的完整重建（具有向后兼容），它的重点是更快的性能，新功能和功能，更多的设计自由度和长期可扩展性。

除了基础改进外，Divi 5还获得了新的活泼界面。尽管此界面略有不同，但您仍然可以识别构建网站的Divi方式。我们已经准备了本教程，以引导您了解有效地使用Divi 5的所有内容，从设置它到探索其最新功能。让我们开始！

Divi 5已准备好今天在新网站上使用，但我们不建议您暂时迁移网站。

Divi 5：WordPress网站大楼的未来

Divi 4是一个可靠的页面建设者，但随着时间的推移，它积累了技术债务。为了消除这些限制，我们从基金会中重建了Divi 5，并提供了许多惊人的新功能，以为您的Web Design的未来做好准备。但是Divi 5不是单独的产品，它具有向后兼容性，这意味着您将能够将任何现有的Divi 4网站迁移到Divi 5。

这是使Divi 5值得您关注的关键改进：

• 核心体系结构重写： Divi 4的旧代码库使得在不引入错误或放缓的情况下添加新功能变得困难。 Divi 5的规模。
• 提高性能： Divi 4建筑商通常会放慢速度并影响页面速度，尤其是对于大页面和复杂的布局。 Divi 5带来了重大的后端改进，并使用更少的系统资源来提供更快，更敏感的体验。 （我们还进行了Divi 5速度测试，以查看前端的表现速度。）
• 更好的视觉构建器体验： Divi 5看起来仍然很熟悉，但是建筑商的使用速度更加顺畅，更快。设置立即打开，控制更快地响应，以及更清晰的侧边栏和悬停工具等小更改，使构建和编辑页面更容易。查看Divi 5仪表板演练，以了解新添加。
• 许多新功能：当我们仍处于Divi 5 alpha阶段时，我们已经发布了新的令人兴奋的功能，这些功能会改变您的整个网站构建工作流程。

这些升级共同使Divi 5变得更好，并且可以选择更快，更清洁且易于维护的现代网站。如果您一直在等待一个更光滑的，更适合未来的Divi版本，那就是其中一个。

Divi 5已准备好在新网站上使用，但我们不建议您暂时迁移您现有的Divi 4网站。当前版本是新鲜开始的理想选择，因此您可以充分利用新基金会所提供的一切。

Divi 5入门

要访问Divi 5并开始构建您的网站，您需要确保您的必需品已经到位：Web托管，域和WordPress。

设置网络托管和WordPress

如果您正在寻找可靠的网络托管，请考虑Siteground。它提供了出色的性能，强大的支持和轻松的单击WordPress设置。借助Siteground，您还可以获得一个免费的域（或者您可以从Namecheap获得一个） ，这使得事情变得更容易保持一致和一致。请按照本教程设置您的网络托管和WordPress。

获取Siteground

下载，安装和激活Divi 5

一旦您可以访问WordPress仪表板，下一步就是安装Divi 5 。转到您的优雅主题会员区，然后下载最新的Divi 5 Zip文件夹。

（如果您是Divi的新手，请查看我们选择最适合您需求的定价计划。不能选择？选择Divi Pro会员资格，它使您可以访问所有很酷的功能，例如Divi AI，Divi Cloud，Divi Vip，Divi VIP，Dondivi Collection，等等！）

开始从Divi开始

返回您的WordPress仪表板，转到外观>主题>添加新>上传主题。

选择您的Divi 5 Zip文件，然后单击“立即安装”。

安装Divi 5后，将其激活。

接下来，您需要激活Divi许可证以访问主题功能。为此，请使用用户凭据登录您的帐户。

完成该过程后，您将能够访问Divi仪表板，其中将显示关键信息，例如您的许可证状态，Divi 5更新状态，页面，主题模板等。

访问新的Divi 5视觉构建器

每个网站都有基本页面：家庭，联系，商店和博客。要设计它们，您首先需要创建它们。要创建页面，请转到页面>添加页面。

命名您的页面，然后单击使用Divi Builder启用Divi 5 Visual Builder。

您将进入Divi 5视觉构建器。

Divi 5仪表板演练

乍一看，新的Divi 5接口看起来与Divi 4相同，但是您会发现一些值得探索的额外的侧边栏和新图标。让我们更详细地回顾它们。

首先，这是顶部面板设置的故障：

• （1）页面设置面板：单击页面标题（主页）旁边的齿轮图标打开页面设置面板。在这里，您可以编辑页面标题，添加摘录，分配特色图像以及访问高级设计设置。 Divi 5启用一键设置访问，这意味着当您单击任何元素（模块，部分，列或行）时，设置面板将在右侧自动打开。
• （2）响应视图和宽度控件：本节可让您预览和编辑设计，以跨不同屏幕尺寸（例如桌面，平板电脑和移动设备）进行响应。您还可以调整帆布宽度和缩放级别，以微调在各种屏幕尺寸下的布局显示方式。
• （3）构建器控件：此区域可让您快速访问构建器操作，例如Dark Mode （Divi 5中的高度要求的新功能），撤消/重做，历史记录，导出/导入，清除布局，添加到库和退出构建器。您还会找到可以预览，保存草稿或发布页面时的按钮。

现在，让我们看一下还包括许多新图标的左侧面板：

• （1）布局和结构工具：左面板可访问核心布局选项，例如用于从Divi库或Divi Cloud中添加预制或保存的布局的蓝色Plus按钮。您还可以打开页面结构化轮廓的图层视图，或者切换到线框视图以进行简化的编辑模式，该模式将模块显示为标记的块。它们之间是变量管理器图标，您将在其中创建和组织设计变量。
• （2）视觉显示选项：您可以自定义悬停在元素上时的操作图标出现的方式。借助悬停在悬停的悬停操作图标上的动作图标，您将看到盘旋元素及其父容器的图标，从而更易于访问控件。您还可以打开X射线模式，该模式概述了页面上的每个元素，以帮助您可视化布局的结构。
• （3）设置和帮助：在面板的底部，您会找到视觉构建器设置，在其中可以调整接口首选项并显示行为。您还将看到一个直接链接到文档和教程视频的帮助图标，从而轻松获得支持而无需离开构建器。

可能需要一些时间才能习惯Divi 5，因此我们还编辑了一些技巧，以帮助您有效浏览它。

添加新布局或模块

现在，让我们看看如何使用Divi 5创建设计。如果您要从头开始构建，请单击“绿色加”按钮添加一行。在其中，您将添加内容模块。

您会注意到右侧设置面板会自动更改。那是因为这些是所选元素的设置选项。选择标题元素后，右侧面板显示其设置。要访问容器元素设置，请使用面包屑。例如，单击行访问行设置。

您可以从头开始构建，也可以轻松地导入预先建造的Divi布局（或使用Divi AI创建）并将其用作基础。然后，您可以花所有的时间自定义并制作自己的时间。我们为各种行业和目的提供了2500多个专业设计的Divi布局，因此您会很快找到灵感。

单击左侧面板上的蓝色Plus按钮，然后选择：

• 1：如果要导入预设的布局。
• 2：如果您想使用Divi AI创建新的布局。

我们将向您展示如何导入预先设计的布局。您还可以在导入设计之前预览设计。

如果您选择了具有AI选项的构建，则只需要告诉Divi AI有关要生成的页面和网站。然后单击生成布局。

定制预制布局

导入设计后，您可以单击任何元素以自定义其设置。

任何元素的设置面板都将包括内容，设计和高级选项卡。

• 内容：这是您添加和编辑模块的主内容的地方，例如文本，图像，按钮，链接，背景等。通常，它是自定义任何元素时首先开始的。
• 设计：使用此选项卡以视觉方式样式。在这里，您会发现字体，颜色，间距，边框，阴影，对齐和其他以设计为中心的控件的选项。
• 高级：本节供更多控制，例如添加自定义CSS，应用条件，调整可见性设置等。
• 小笔记本电脑图标使您可以在响应模式（移动，笔记本电脑，平板电脑和悬停）设置之间切换。

您还会注意到一个小（默认的预设）下拉菜单。这是Divi 4的标志性预设选项，但是我们最近推出了更高级的内容，我们将在“新功能版本”部分中进行讨论。 （提示：寻找选项组预设！）

如果您需要生成内容的帮助，请使用Divi AI。单独的内容元素也可以分别使用AI进行编辑。您只需要悬停在身体​​部分上，然后单击小型AI图标即可。

不仅内容，Divi AI还可以帮助您生成图像，代码甚至完整的布局。只需寻找开始的小型AI图标即可。

查看Divi AI

要修改元素的视觉设置，您将转到“设计”选项卡。那是您可以调整字体，尺寸，颜色等的地方。

浏览页面布局上的每个元素以添加您的内容和品牌。完成后，保存草稿并预览设计。当一切看起来都不错时，请发布。

Divi 5的新功能探索了

Divi 5已准备好发展以提高可伸缩性。虽然仍处于Alpha阶段，但我们已经发布了许多新功能，可帮助您改善您的设计工作流程。

• 选项组预设：让您为特定设置（例如边框半径，版式等）创建预设。一旦应用了预设，您进行的任何设计更新都会在使用该预设的所有元素中自动反映。这有助于您保持一致性并节省时间。
• 设计变量：为颜色，字体和间距等设计属性保存可重复使用的值。这意味着，如果您想更改主颜色或标题尺寸，则只需要更新一个变量，所有实例都可以轻松更新。设计变量非常适合建立品牌基础。
• 高级单位：Divi 5现在支持现代CSS功能，例如Clamp（），min（），max（）和calc（）。这些高级单元使创建响应式设计的设计变得更加容易，这些设计无需自定义代码或媒体查询即可在跨设备上进行流畅调整。
• 嵌套行：您现在可以将一排放在另一排，这为复杂布局提供了更大的灵活性。当您需要详细控制对齐，间距或内容分组而不损害页面结构时，这将很有用。
• 模块组：将多个模块组合到列中的一个容器中。这是组织相关内容，应用共享样式或将布局的各个部分作为一个单位移动的一种简单方法。

我们还致力于添加新功能，例如基于Flexbox的布局和增强的WooCommerce模块。这些更新将继续基于Divi 5已经做得很好：简化您的工作流程并使建筑商的体验现代化。

为了确保您永远不会错过新功能，请订阅我们的YouTube频道。尼克通常首先宣布新功能，因此您将始终领先于曲线。

订阅我们的YouTube频道

最大程度地利用Divi 5的技巧

如果您已经熟悉Divi 4，您会注意到过渡到Divi 5的容易。它包含了您喜欢的Divi 4的所有内容，但更稳定，现代和更快。您越早开始熟悉Divi 5，越好。这里有一些技巧，可以帮助您使用新的Divi 5功能来实现更大的设计灵活性：

• 首先设置设计变量：为品牌颜色，字体，间距等创建设计变量，以集中您的样式，并使未来的编辑更快，更一致。
• 使用CSS变量进行全局控制：为了获得更高的技术灵活性，请与设计变量一起设置CSS变量。他们让您使用最小代码在主题上应用一致的样式。
• 尽早应用默认预设：在开始设计之前，将默认预设分配给模块，部分和行。这样可以确保每个新元素从一开始就匹配您的样式系统。
• 考虑到基于预设的设计：创建预设您可以在页面上重复使用。这将加快您的工作流程，并使更新更容易管理。
• 使用calc（）进行灵活的间距：应用calc（）I区填充或保证字段混合单元（例如100％ - 80px ），并创建适应屏幕尺寸而无需刚性断点的布局。
• 添加Min（）和Max（）进行布局控件：使用Min（）或Max（）设置智能尺寸限制，例如防止标题在不同设备上变得太小或太大。
• 使用clamp（）进行流体排版：使用clamp（），您的字体尺寸可以根据屏幕尺寸而无需媒体查询而平稳地生长或缩小。这是一种现代化的解决方案，可用于可读，响应迅速的文本。

Divi 5是为网页设计的未来而建造的

Divi 5不仅仅是一个更新：这是一个完整的重建，旨在使您的网站工作流程进行未来。

Divi 5中的所有内容旨在帮助您自信地工作，从更快的性能到模块化预设，设计变量和高级布局工具。无论是开始一个新项目还是对现代设计技术进行实验，此版本都为您提供了建立更好网站的基础。

Divi 5已准备好今天使用新网站，因此请潜入其中，测试最新功能，并成为早期采用者！