如何使用Divi 5构建网站（尽早加入并取得成功）

回想一下您第一次意识到您可以与Divi组装一个美丽的网站的速度。感觉就像创造力和简单性之间的完美平衡。 Divi 4为每个人提供了出色的设计工具和光滑的视觉构建器，但是我们以优雅的主题不稳定。

我们已经仔细听了您的反馈，并努力提高了Divi。 Divi 5采取了您所爱的一切，使其更快，更顺畅，更强大。它旨在帮助您以更少的精力和更多的可能性和未来就可以创造。

如果您想查看新事物或开始下一个网站，本指南将帮助您与Divi 5一起逐步构建一个全新的网站，并在此过程中分享有关如何充分利用它的实用技巧。我们走吧！

Divi 5已准备好在新网站上使用，但还没有完全准备迁移现有网站。

是什么使Divi 5不同？

Divi 5是自首次启动以来我们页面构建器的最大变化。我们已经考虑了现代网络标准，从头开始重建它。这不仅仅是改头换面。我们已经完全重新考虑了如何使用Divi构建网站。

随着移动浏览的增长和用户期望的增长，网络继续发展。 Divi一直适应这些变化，Divi 5通过采用最新标准来延续这一传统。

打开Divi 5时，您可能会想：“这看起来很新。”然后，您开始构建，这就是您注意到它的时候。

“等等，那部分只是立即加载吗？”

是的，确实如此。这只是开始。

Divi 5保留了Divi 4中有效的方法，但可以解决您可能学会的挫败感。我们建立了它是因为足够好了，不再足够了，不适合我们，当然也不适合您。您今天构建的站点需要做更多的事情并更快地加载。

让我们探讨Divi 5的当前Alpha的关键亮点：

从短码到基于块的结构

Divi 4将您的布局存储为简码：WordPress读取以创建页面的方括号中的那些代码。他们工作了，但并不完美。

在Divi 5中，我们重建了您的内容的存储方式。您的数据库中不再隐藏短的短码！现在，我们使用一种干净的基于块的方法，可以更好地适合WordPress的方向。

编辑页面时，您会感到有所不同。单击某些东西，它立即响应。没有滞后，也没有等待短码进行处理。您的变化只是发生。

虽然我们几乎改变了引擎盖下的所有内容，但您不需要重新学习如何构建。视觉体验保持熟悉。我们刚刚制造了幕后发生的事情，更加精简和现代。

新的Divi 5接口

Divi 5引入了一个清洁界面，将重点放在您的设计工作上。视觉构建器现在具有侧面面板，而不是用于覆盖内容的浮动框。这种变化将在您与Divi的工作方式上产生巨大的影响。

工具栏已重新组织。现在，常见的动作触手可及，而专业工具则可以使用，而无需使工作空间混乱。

彩色拾取器，排版控件和间距调整在需要时在上下文上出现。

在此版本中，文本编辑更自然。您可以直接在页面上格式化内容，其中使用当您选择文本时出现的简单控件。这种直接方法可以大大加快写作和格式化过程。

我们还改善了如何组织设置。相关选项在逻辑上进行分组，从而减少了您通过选项卡和菜单进行搜索的时间。整个系统感觉更具凝聚力和有目的性。另外，浅色和深色模式的选择是周到的触摸，使长长的设计会话在您的眼睛上更加舒适。

最初，这些接口的改进似乎显得微妙，但是在构建了几页之后，您会注意到工具不在路面时可以工作得更快。

多面板工作区

刷新的Divi 5为您与设计的互动方式提供了重新介绍。尽管Divi 4给了我们直观的用户界面，但Divi 5中的新面板优先布局以对设计工作更自然的方式安排它们。

现在，设置沿屏幕侧面整齐地对接，为您提供了页面的视图。您可以看到实时发生的变化，而无需关闭面板或将其移动。这种清晰的视图使精度在微调间距或对齐时更加容易。

新的多面板设置使您可以使工具散布，但仍然可以触及。

您可以在一侧打开文本设置，同时对另一侧进行调整。您无需关闭一件事情即可在另一件事上工作。

面包屑可帮助您快速在元素之间导航。单击以从按钮跳到其父行或部分。当您深入编辑复杂布局时，这可以节省无数的点击。

一些设计师更喜欢右侧的设置，而其他设计师则喜欢左侧的设置。您不必满足您不喜欢的选项。 Divi 5可让您选择最舒适的东西。您也可以将它们堆叠在标签中，这在兼顾许多元素时会有所帮助。

这似乎并不重要，但是当构建像标头这样的复杂布局时，您需要在徽标设置，菜单样式和按钮属性之间进行切换时可能很方便。

我们将面板设计为您的工作空间的一部分，而不是中断。借助Divi 5的用户界面，您可以将其归类的位置集中在您的Web Design Canvas上。

从固定行过渡到嵌套行

在Divi 4中，当您尝试构建一些复杂的东西时，您突然用截面柱结构撞到墙壁，必须依靠专业部分或自定义CSS。 Divi 5用嵌套行修复了此头痛。这听起来很简单，但是这种变化完全打开了您可以创建的东西而无需将黑客解决的方法。

现在，您可以单击任何行中，并在其中添加新的行结构 - 不需要专业部分或编写自定义CSS即可逻辑地分组您的内容。

这个嵌套行系统只是我们改进的布局引擎的开始。我们正在研究Flexbox控件和新的行模板，这些模板将使专业部分过时。很快，Flexbox实现将使响应式设计变得更加简单，同时使您可以更好地控制内容如何对齐和分发在屏幕上。

其他值得注意的功能

除了重大的结构变化之外，Divi 5具有新功能，使网站构建更加顺畅，更直观。让我们看一下当前Alpha中的一些出色的添加，这些内容将改变您的工作方式：

• 设计变量集中了您的造型选择，并使范围内的范围变化变得轻而易举。定义颜色，字体，尺寸，图像和其他元素一次，然后在整个网站中应用它们。需要更新您的品牌颜色吗？更改变量，每个实例会自动更新。
• 一单击的编辑使您的内容毫不费力地进行互动。只需单击任何模块进行编辑。不再需要寻找微小的齿轮图标或设置按钮。这种小的更改可节省您在整个工作日的无数点击。
• 帆布缩放使您可以在不同的屏幕尺寸上查看设计的外观，而无需切换视图。将画布边缘拖动以调整大小，并立即观察布局适应 - 非常适合在不持续的选项卡开关的情况下检查响应行为。
• 高级单位支持为精确，响应式设计开辟了新的可能性。在Divi的设置字段中使用Calc（），Clamp（）和Min（）/Max（）等CSS函数，以创建完美适应任何屏幕尺寸的流体布局。
• 通过避免加载不必要的脚本和模块来改进性能
• 可自定义的断点从只有三个（台式机，平板电脑，移动设备）扩展到七个可调节选项。这种微调的控件可帮助您为从小型手机到超级监视器的所有内容制作完美的布局。

使用Divi 5：逐步指南建立网站

现在，让我们来获取本指南的肉：实用的演练，使用Divi 5的强大功能将您从空白画布带到完成的网站。我们将把流程的每个阶段分解为彼此建立的可管理步骤

1。安装Divi 5

进行Divi 5跑步只需要几步。从您的会员区域下载最新的Alpha版本，通过主题部分将其上传到WordPress，然后像正常情况一样激活它。

2。自定义工作空间

打开Divi 5的视觉构建器时，您会注意到的第一件事是它的清洁和整洁的感觉。浮动面板不会像以前那样阻止您的视图。取而代之的是，您会发现一个更周到的布局，可隔离面板，这些布局远离您的路。花几分钟时间安装您的工作空间。

您可以根据自己的喜好或工作时间在光模式和黑暗模式之间切换。

创建一个适合您的工作空间

Divi 5提供的不仅仅是移动面板。您可以将相关面板分组到选项卡中，即使处理复杂的设置，也可以使工作空间井井有条。

打开两个不同的设置面板，然后将一个拖到另一个面板上。它们将组合成选项卡的布局，从而使您可以单击在它们之间切换。

如果您喜欢经典的设置，则仍然可以在屏幕上的任何地方浮动面板。将面板从边缘拖出以将其拆下并将其放置在您喜欢的任何地方。

对于较大的项目，左工具栏的X射线模式可能会有所帮助。它用微妙的边框概述了每个元素，从而更容易发现部分和模块启动和结束的地方。该视觉指南可帮助您在使用详细布局时保持定位。

加快您的工作流程

键盘快捷键可以在Divi 5中大大加快您的设计过程。按（？）选项访问帮助菜单，在这里您会找到完整的快捷方式列表。仅学习一些关键组合可以削减大型项目。

在编辑嵌套元素（例如一行内部的一个按钮）时，面包屑显示您在层次结构中的确切位置。单击面包屑小径的任何部分，直接跳到该元素的设置，而无需在层次上狩猎。

单击左工具栏中的图层面板图标以利用它。它使您可以将整个页面结构视为嵌套列表，从而在使用复杂布局时更容易选择特定元素。

2。设置动态变量

Divi 5中的设计变量更改您如何管理网站的视觉元素。它们为您提供了控制网站设计并简化对其进行更新的中心地点。将它们视为可以在整个网站上使用的快捷方式。

要开始使用设计变量，请打开视觉构建器，并在左侧栏中查找变量管理器图标。当您单击它时，您会看到创建不同类型变量的选项：颜色，字体，数字，图像，文本和链接。

设置全球颜色

首先，设置一些颜色变量。单击“颜色”选项卡，添加您的颜色，然后将它们命名为令人难忘的东西，例如“ Brand Blue”或“ Kriender Color”。单击“保存”，然后创建了第一个变量。

对于次要颜色，背景阴影和文本颜色，请执行相同的操作。将所有品牌颜色保存为变量，这意味着您无需再记住十六进制代码。

创建字体和数量变量

接下来，让我们设置您的排版系统。在“字体”选项卡下，为您的标题和身体字体创建变量。这使您的文本在整个网站上保持一致。

对于数量变量，请考虑以下常见测量值：

• 标准填充（可能为30px）
• 边界半径（如果您想要圆角）
• 内容容器的最大宽度
• 字体尺寸

创建这些变量会提前几分钟，但节省了几个小时。当客户想要更改时，您将不需要在每个页面上进行搜索，而需要调整每个元素。只需更新变量一次即可。

您还应该为内容创建文本变量，这些变量可能会更改，例如您的电话号码，营业时间或公司标语。

使用URL创建链接变量，您可以在整个网站中重复使用，非常适合处理常用的链接，例如社交媒体配置文件，会员URL或“接触”按钮。

同样，为常用图像（例如徽标）添加图像变量。

使用带有高级单元的变量

将设计变量与高级CSS单元相结合时，Divi 5变得更加强大。使用CSS函数（例如Clamp（）来创建一个数字变量，以进行响应式版式，该版本在屏幕大小之间缩放。

例如，使用以下方式创建一个标题大小变量（36px，5vw，72px）。

这将您的文本至少在小屏幕上设置为36px，在中屏上流畅地缩放，并在大屏幕上以72px的限制。将其应用于您的标题模块中的文本，无论设备如何，这些文本总是看起来比例。

结合变量和高级单元可以消除许多响应式设计的繁琐工作。您的文本和间距会自动调整，而无需手动设置多个断点。

3。用Divi构建页面和模板

现在，您已经定制了工作区并创建了设计变量，现在该使用Divi 5构建您的第一页了。视觉构建器为您提供了几种开始创建内容的方法。

选项1：使用Divi AI建立您的网站

使用Divi快速站点 + Divi AI，您可以立即创建一个工作网站，其中包含多个页面，主题构建器布局，通用设计设置，现成的导航栏以及通过提供基本文本提示符进行优化的WordPress配置。

使用Divi AI构建网站时，请转到您的WordPress仪表板，然后单击菜单中的Divi图标。查找Divi快速站点框，然后按“生成新站点”按钮。

选择“使用AI生成您的网站”选项，并提供有关您业务的详细信息。您包括有关服务，样式和受众的细节，您将获得的结果越好。请记住，您需要Divi AI订阅才能使用此功能。

如果您有要出售的产品，请在设置过程中检查安装WooCommerce选项，Divi将自动创建您的商店页面，并使用所有必要的组件。

对于图像，您可以选择Divi快速站点选项以访问Unsplash的集合，让Divi根据您的业务描述创建自定义图像，或者如果您打算稍后添加自己的照片，请选择“使用占位符”。

然后，您将开始自定义颜色和字体。如果您有特定的要求，则可以手动选择品牌颜色和版式，或者让Divi提出互补的组合。

Divi构建页面后，用设计变量替换任何固定的颜色值。这将您的AI生成的部分直接与您的设计系统联系起来。如果您的客户以后想要深蓝色，则只需更新一次即可。

如果您尚未定居品牌颜色并让Divi为您选择，并且您喜欢结果，请确保将这些颜色变成设计变量。另外，从这些颜色中创建全局选项预设。这样，您的页面保持灵活性和凝聚力，并始终匹配您网站的视觉风格。

一旦您对选择感到满意，请点击“生成和发布”按钮，然后等待几分钟，而Divi的魔力。您的新主页将出现，随时可以欢迎访问者进入您的网站。

使用AI向您的页面添加新部分

使用“使用AI生成部分”按钮快速生成新的部分。您可以描述您需要分割AI的内容，它将为您生成一个部分。

精炼AI生成的部分

Divi创建您的内容后，您可以轻松调整它以满足您的需求。网站的每个部分都可以通过通常的Divi工具完全自定义。更改任何文本，交换图像，调整间距，然后将品牌的颜色与设计变量一起使用。

这些布局为您遵循当前的Web设计标准提供了强大的起点。您不是从一个空页面开始，而是从一个只需要独特输入的模板中工作。这样可以节省设计选择的时间和精力，同时让您完全控制外观和感觉。

随着Divi 5的改进编辑功能和AI的功能，构建网站变得更快，更简单。您会迅速获得质量成果，并且仍然可以自定义所有内容，这是在更少的时间内推出专业网站的理想选择。

选项2：使用预制布局构建网站

要将2000多个现成的设计之一添加到您的页面中，请点击屏幕左上角的蓝色Plus按钮，然后选择“预制布局”。窗口将弹出您的所有选项。

选择您喜欢的设计包。要更快地找到一些东西，请使用过滤器或在搜索框中键入所需的内容。单击吸引您的眼睛的任何包装，然后选择所需的页面样式。在决定之前，您可以向左滚动以查看完整的设计。

当您找到“一个”时，单击“使用此布局”。您可能会看到一条有关导入配色方案的消息。如果您不想要它，请取消选中。

唯一的缺点？您需要对构建的每个页面重复此操作。但是有更好的方法。使用Divi快速站点（不需要AI），您可以大大加快速度。最好的部分是，每个Divi用户都可以访问快速站点及其所有启动器设计，而无需为AI订阅支付额外费用。

查看我们的入门网站收藏值得您花时间。每一个都有独特的照片和艺术品，您将不会在其他地方看到。

只需前往Divi，单击“快速站点”选项卡，点击“生成新站点”，然后选择“使用预制的启动站点”。浏览设计，直到发现与您的视野相匹配的设计。添加您的信息，选择您的颜色和字体，并让系统起作用。

应用布局后...

应用或导入预制布局后，如果您没有选择品牌颜色，并且只使用了布局随附的默认颜色和字体，请仔细研究设计并用设计变量和选项组预设替换任何固定的颜色代码。

如果您选择了颜色和字体，但尚未创建预设，请将这些颜色变成设计变量。另外，从这些颜色中创建选项组预设。

这样可以确保布局中的所有内容遵循您的预设样式，因此在每个页面上，按钮之类的元素保持一致。同样，您可以轻松地维护并与品牌的视觉语言保持一致的现成设计的便利。

您将在几分钟之内准备就绪。一切都完美地融合在一起：颜色，字体，整个包装。启动后，您可以像任何Divi网站一样调整任何想要的内容。

选项3：从头开始构建您的网站

打开新页面时，您会看到带有默认部分的干净画布。像Divi 4一样，您可以单击“绿色（+）”按钮以添加新行并从头开始构建。

就像Divi 4一样，Divi 5的现成模块集合。

嵌套行特征对于复杂的布局是无价的。在两行布局的一行中需要三排截面吗？没问题。单击您的行内，添加一行，然后选择您的行结构。 Divi 5可以处理此嵌套而不会破坏汗水，从而为您提供了几乎无限的布局可能性。

让我们看看这如何适用于博客布局。从标准的两排设置开始：宽内容区域和较窄的侧边栏。在主排中，放下博客模块。

您需要在常规帖子上方的网格中的特色帖子吗？只需在底部筑巢一排，一行带有电子邮件选择加入，然后将三排结构用于信息框。相同的结构需要在Divi 4中进行自定义代码。

对于侧边栏，您可能需要不同背景的不同小部件。使用嵌套行，每个侧边栏元素都具有自定义样式的自己的行。一个外观的促销，作者在另一个外观中，第三次介绍，这是侧边栏行中的全部包含的。

这种新的结构自由改变了您完全处理布局的方式。产品展示柜带有交替的文本/图像行，然后是三排特征部分，上面有全宽的推荐？全部在一个液体容器中，而无需与建筑商作斗争。

创建选项组预设

一旦您设计了第一页，就必须在网站的每个页面上复制这些样式选择。但是，这可能非常耗时，更重要的是令人讨厌。 Divi 5引入了选项组预设，以帮助加快您的设计过程。它们像可重复使用的样式片段一样工作，您可以在网站上的任何地方应用。让我们看一下如何设置它们并使用它们。

首先单击已添加到页面的任何模块。当您在设置面板中时，请查看设计选项。诸如边界，版式或阴影之类的东西。悬停在这些设置块的右上角附近，您会看到出现一个小的预设图标。

单击预设图标，然后选择“当前样式的新预设”。给它一个对您有意义的名称。像“圆角”的边境预设或“大标题”之类的东西，用于文本样式。

该面板将更改颜色，以表明您现在在预设上工作，而不仅仅是当前元素。这可以帮助您跟踪自己的工作。如果这是您经常使用的样式，请选中“分配为默认”框，以便将自动使用新元素。

保存后，您已经创建了第一个选项组预设！美丽是您可以将这种完全相同的样式应用于使用该选项组的任何元素：文本模块，图像，按钮，甚至完整的部分。

将选项组预设与设计变量相结合

这是Divi 5真正强大的地方。创建预设时，不要仅使用静态颜色或尺寸，而是使用设计变量。

说您正在做一个按钮预设。而不是选择特定的颜色，而是单击颜色拾取器中的变量图标，然后选择“品牌蓝色”变量。现在，您的预设将始终使用您的品牌颜色，如果您以后更改该颜色，则使用此预设的所有按钮将自动更新。

您创建的每个变量类型也是如此。需要不同的间距吗？只需抓住您保存的间距即可。应用字体？您的版式变量就在等待。您的网站保持一致。

在需要时，只需一次更新变量，它将自行更新每个实例，而不会在客户端“希望“蓝色更暗”时追捕每个元素的头痛。

Divi 5还允许您在任何大小字段中包含高级单元。想要一个永远不超过1200px但在移动设备上收缩的部分吗？在宽度框中键入“ Min（1200px，90％）”。完毕。该容器将保持宽度为90％，直到超过1200px，然后停止生长。不需要自定义CSS。这些高级单元也可以应用于动态变量。

建筑要素预设

设置选项组预设后，您需要创建元素预设，以节省完全样式的模块，行或部分。将这些视为完整的设计包，您可以在网站上重复使用。

要创建一个，完全样式一个模块，当它看起来完美时，请单击模块标题中的预设图标（不在特定选项组内）。选择“当前样式的新预设”，给它一个名称，例如“功能卡”或“ Team Bio”，然后保存。

添加新模块时，只需单击模块标题中的预设下拉菜单即可立即应用您的保存设计。所有设置将一键应用。

根据您的设计系统（变量和预设）构建其他页面

一旦您建立了变量和预设的设计系统，创建其他页面就会变得更加有效。使用Divi 5，您的基础就位了，现在您可以在保持完美的一致性的同时扩展网站。

首先创建一个新页面并激活视觉构建器。当您将模块添加到此新页面时，您会立即注意到预设系统如何加快速度。只需应用您保存的元素预设，而不是从头开始造型元素。

例如，添加新的文本模块时，请单击模块标头中的预设下拉列表，然后选择“身体文本”预设。所有样式，包括字体选择，尺寸和颜色，都可以立即应用。按钮，图像，推荐或您为您创建的任何其他元素也是如此。

构建模板

借助Divi的主题构建器，您可以创建并自定义网站的每个角落。标题，页脚，邮政模板，自定义邮政类型模板，商店页面，您可以命名。

通过通过WordPress仪表板导航来访问Divi的主题构建器：Divi→主题构建器。在顶部，您会找到默认模板 - 此模板管理整个网站的整体外观。单击“添加全局标头”部分，然后选择“构建全局标头”以打开您的工作区。同样，您可以选择添加全球页脚来设计您的网站页脚。

有了嵌套的行，标头和页脚，建筑物变得更加容易。每个部分都需要具有不同行布局的花式标头吗？在另一行中添加一排，选择您的行布局，然后继续构建。

创建自定义内容类型模板

除了标题和页脚外，您还可以使用主题构建器为不同内容类型设计专业模板。

就像博客文章不同于团队成员资料或产品页面一样，每个文章都应该得到自己的优化布局。

为博客文章构建模板，并具有适当的间距，可读性，特色图像放置和作者信息。产品页面可能需要画廊布局和定价表。

该系统的优点在于，一旦将这些模板分配给各自的内容类型，它们就会自动适用。例如，如果添加新的博客文章，模板会立即处理格式。这可以删除重复的工作，并保持视觉上的所有连接。

构建这些模板时，请利用您的期权组预设和设计变量。您之前建立的排版设置可确保标题和身体文本保持一致。您的颜色变量可在所有模板类型中保持品牌标识。

使用Divi AI进行模板设计

Divi AI将模板构建时间从数小时到几分钟切割。在主题构建器中，选择所需的内容 - 标题，页脚，博客布局或产品页面。

点击Visual Builder中的蓝色 +按钮，然后选择“使用AI生成部分”。

您的描述最重要。具体说明您需要的东西：

• 标题：带有左对准徽标的清洁标头，水平导航菜单（家庭，关于，博客，商店）以及右侧的清晰联系按钮。用汉堡偶像响应移动设备。
• 页脚：三列页脚：公司信息和社交图标，有用的链接以及联系方式（地址，电话，电子邮件）。清除部分标题，简单布局。
• 博客模板：具有大型特色图像，帖子标题，日期，内容区域和右侧边栏的单个帖子布局，并具有最新的帖子和类别。
• 商店页面：带有图像库，产品名称，价格，描述，数量选择器和突出的买入按钮的产品显示。相关产品如下所示。

详细信息越多，结果就越少。在Divi创建模板之后，请花一分钟的时间将所有硬编码值与您的选件组预设替换为按钮，文本块和边界等元素。这将AI生成的内容与您的预设系统集成在一起，因此您的按钮在所有页面上看起来相同，无论是手动或与AI构建的。

此方法为您提供了自定义的现成模板，同时将所有内容都绑在网站的视觉语言上。稍后设计更改后，您的AI构建部分与其他所有内容一起更新。

使用高级模板功能节省时间

当您添加有条件的逻辑时，模板变得更加强大。想要您的商店页面与您的博客不同吗？设置显示条件，这些条件根据页面类别或URL模式应用模板。

请记住，使模板与预设系统并驾齐驱，以创建一个综合的设计框架，使网站构建速度更快，更一致，最终更专业。

4。掌握响应式设计

Divi 5的响应设计对以前的版本进行了重大改进。新系统可提供对您的网站如何适应不同屏幕尺寸的额外控制权。

Divi 5推出了一个高级断点系统，该系统提供了对网站响应能力的前所未有的控制。这七个可自定义的断点允许在不同设备上进行精确的设计定位：

• 电话： <767px覆盖大多数智能手机屏幕尺寸
• 电话宽： <860px以景观模式覆盖大多数电话屏幕
• 平板电脑： <980px对大多数平板电脑屏幕有益于肖像模式
• 平板电脑宽： <1024px是大多数iPad和三星平板电脑中景观视图的标准配置。
• 宽屏： > 1280px对于大多数较小的笔记本电脑来说是一个很好的宽度
• 超速： > 1440px覆盖较大的桌面屏幕

这些断点是精心设计的，旨在解决现代设备的各种景观。这种方法使设计人员可以创建一个看起来完美的网站，无论是在紧凑型智能手机上查看还是广泛的超宽显示器。每个断点不仅是技术阈值；这是制作量身定制的用户体验的机会。

另外，当您需要时，您可以根据需要调整断点。

5。获取，设置，启动！

您的Divi 5网站已建立，优化，并准备吸引访客。让我们走到最后一步，使您的网站充满信心。

在不同设备上快速预览您的网站。 Divi 5的响应式设计功能已经完成了大部分繁重的工作，因此应该证实一切看起来都很好。多亏了可自定义的断点，您的设计将无缝从手机适应超宽的监视器。

仔细检查您的互动元素。单击导航链接，通过联系表提交测试消息，然后尝试您添加的任何专业功能。 Divi 5的清洁代码结构有助于确保这些元素可靠地工作。

最终的抛光触摸

用新鲜的眼睛查看您的内容。寻找在构建过程中可能被忽略的错别字或尴尬措辞。在此阶段，重点应放在小改进上，而不是重大变化。如果需要，Divi AI已完全集成到Divi 5中，可以随时使用来生成，修改或改进任何文本或图像。

Divi使您有能力创建像素完美的设计，因此请花点时间在启动前欣赏您的网站的凝聚力。始终使用设计变量和模块预设应在整个过程中创造出抛光的统一外观。

发布后，Divi 5继续提供优势。现代框架的速度提高将有助于搜索引擎的可见性，用户将欣赏快速加载时间和平稳的交互。

观看哪些页面获得最多的流量和参与度。使用这些见解来完善您的设计或扩展流行内容部分。 Divi 5的柔性结构使这些调整直接。

将您的创造力与Divi 5强大的框架结合起来，生成了以现代网络标准为基础的视觉上令人印象深刻的网站。您的网站准备为游客提供丰富的体验，同时为您提供灵活的未来增长基础。

使用Divi 5建立更快，更好的网站

Divi 5标记了网站创建者的新章节。重建的系统在修复未进行的过程中保持了有效的工作。您会注意到与第一天相比：更快的装载，更顺畅的编辑和设计自由，这是遥不可及的。

您的下一个网站不仅看起来更好，您会喜欢构建它。这就是Divi 5提供的：适合您和您的访问者的网站，而无需头痛。

准备尝试了吗？立即下载公共alpha，看看您的下一个项目可能是什么。

Divi 5已准备好用于新网站构建。等待完整版本，然后再迁移现有站点。