如何使用Divi 5有效地构建页面

从头开始重建，Divi 5具有闪电般的性能，并引入了新功能，例如用于范围内的造型的设计变量，用于无限布局深度的嵌套行，以及基于预设的设计，以促进您的工作流程。 Divi 5借助现代化的，经过改进的视觉构建器，可以通过从头开始或利用数千个预构建的布局来创建专业网站。

在这篇文章中，我们将重点介绍Divi 5的独特功能和UI增强功能，以及它们如何帮助您更有效地构建页面。从设置响应式布局到利用模块组和Divi AI等创新功能，您将看到Divi 5如何将Web Design转变为更快，更聪明，更具创意的体验。

在我们潜水之前，请注意：Divi 5已准备好在新网站上使用，但我们不建议将现有网站转换为Divi 5。

话虽如此，让我们潜入。

了解Divi 5的现代UI

Divi 5的界面是其前身的全面大修，专为速度，灵活性和直观的无代码设计而设计。 Visual Builder提供了带有清洁设置面板的实时前端编辑，响应式设计切换和嵌套层接口，用于无缝导航，排成一组，行，列和模块组。

Divi 5通过更快的基础增强了基础，引入了独特的功能，例如无限布局深度的嵌套行，用于简化模块管理的模块组以及用于一致样式的设计变量。这些进步使初学者可以访问Divi 5，并且对于专业人士来说是强大的，从而改变了网站在WordPress上的构建方式。

视觉构建器的演变

Divi 5的Visual Builder拥有一个重新设计的界面，具有精简的体验，具有功能强大且用户友好。与Divi 4相比，Divi 5引入了一个更清洁，更直观的设置面板，该面板可减少混乱并从逻辑上组织选项，从而更快地进行调整。

新的响应式设计切换使您可以在几个台式机，平板电脑和移动视图之间切换，从而确保设计在所有设备中看起来无瑕。这些UI增强功能使初学者可以访问Divi 5，同时提供精密专业人士的需求。

直观导航

通过Divi 5的层接口导航复杂布局并毫不费力。该界面将部分，行，列，模块和新模块组组织成一个清晰的层次结构。它使您可以轻松地钻入设计元素，无论是调整单个模块还是重组整个部分。

拖放接口简化了事物，而线框模式则提供了页面结构的鸟眼视图。通过结合这些工具，Divi 5使建筑物和编辑复杂的布局直观，节省了时间并减少挫败感。

响应式设计控件

Divi 5引入了可自定义的断点，以精确控制您的设计如何跨设备适应。您可以从七个预定义的断点中选择或设置自定义值以匹配特定的设备分辨率。这样可以确保无需手动CSS调整即可像素完美的布局。

这种颗粒状控件与用于流体缩放的夹具（）等高级单元相结合，可确保您的设计在所有屏幕尺寸上保持一致且视觉上吸引人。

使用Divi 5的独特功能构建页面

Divi 5推出了创新工具，这些工具将重新定义您的使用方式。嵌套行允许用于复杂布局的无限行嵌套，而模块组简化了样式并将多个模块作为一个单元进行管理。设计变量可实现颜色，字体和更多和高级单元的范围范围内一致性，并支持动态CSS函数，例如Clamp（）和Calc（），用于响应式设计。基于选项组的基于基于选项的设计，预设跨元素的流线样式，并且Divi AI加速了内容的创建。这些功能共同使用户能够有效地创建专业，响应迅速的网站。

下面，我们详细介绍如何使用这些工具来构建网页。

1。设计变量用于高效造型

设计变量是可用于颜色，字体，数字，图像，文本和链接的全局设置，可以在网站范围内应用。您可以通过单击Visual Builder中的全局变量图标来定义变量。

使用设计变量的好处是，您可以一次更新它们以更新该变量的所有实例，从而确保一致性和节省时间。例如，如果您建立数字值以将clamp（）计算为标题分配，则在整个网站中为文本建立一个全局层次结构。如果您需要快速更改，则使用这些变量应用的任何标题或文本模块都将在您的网站上进行更新，从而使您可以快速的设计更改，这些更改在每个实​​例中都填充。

如何使用设计变量

为了最大程度地提高设计变量的潜力，请将它们结合在设计过程中。在开始时建立变量会创建一个一致的框架，使您可以专注于创造力，而不是重复的任务。首先单击Visual Builder中的变量管理器图标。

出现对话框时，您可以添加变量以创建设计的基础。例如，您可以使用数字变量来建立响应式排版。

数字变量也可以用于间距。例如，您可以在网站上为所有列和行建立标准间距。使用Calc（）公式（例如Calc（80％ - 60px））将设计元素的宽度建立为容器的80％，同时将30px的填充物添加到任一侧。从“下拉菜单”中选择“计算”以应用公式。

输入calc（）公式中的值字段。单击“保存变量”按钮将其添加到变量管理器中。

一旦保存了变量，Divi就可以轻松地在整个设计中应用它们。要使用间距，请单击行，列或模块，导航到“设计”选项卡，然后查找宽度字段。

最后，单击插入动态内容图标以选择全局间距变量。

如前所述，应用设计变量可确保整个网站的一致性。在变量管理器中更新其属性会立即同步所有实例，从而节省了数小时的手动调整。

使用设计变量的提示

• 深思熟虑地组织变量：描述性地名称变量，使其易于在复杂的项目中识别。
• 利用预设：将设计变量与Divi的全球预设相结合，以创建可重复使用的模板用于模块，从而减少了新页面的设置时间。
• 测试响应能力：跨视觉构建器中的设备预览可变驱动的设计，以确保所有变量按预期执行。

2。基于期权组预设的基于预设的设计

Divi 5的基于预设的设计系统用两个强大的工具彻底改变了样式：元素预设和选项组预设。这些功能使您能够保存和重复使用配置，确保一致性并简化项目工作流程。

Divi 5元素预设

元素预设允许您保存模块的配置，包括文本，颜色，版式，间距和悬停效果 - 以在网站上重复使用。例如，您可以创建具有特定字体，渐变背景和悬停动画的完全样式的按钮模块。保存为元素预设后，您可以单击单击将其应用于网站上的任何按钮，以保持相同的样式。如果您更新预设，例如将背景更改为纯色，则该按钮的每个实例都会自动更新，消除重复的编辑并确保统一的外观。

Divi 5选项组预设

相比之下，期权组预设专注于可重复使用的样式组，例如版式，边界或阴影，可以应用于不同元素的凝聚力设计。例如，您可以为带有5PX半径的1PX黑色边框创建一个选项组预设，然后在按钮，图像和行上使用它。

如果您以后将预设调整到2PX边框，则所有链接的元素立即更新，节省时间并保持一致性。这种模块化方法使您可以跨元素混合和匹配样式组，从而在不牺牲控制的情况下提供灵活性。

如何有效使用预设

从启动站点或预制布局开始时，已经存在元素预设。但是，从头开始创建网站时，您需要先创建它们。创建这些预设可以通过在整个网站中立即造型类似的模块来加快设计过程。

创建一个元素预设

要创建一个元素预设，请使用所需设置的模块样式。然后，单击模块设置右上角的预设菜单。

单击当前样式的新预设以创建新的预设。

给预设一个名称，选择是否将其分配为默认值，然后保存。如果将其选择为默认预设，则将您添加到网站的每个手风琴的样式都相同，从而更加易于更快，更有效地构建网页。

创建选项组预设

创建选项组预设的过程略有不同。您可以将预设应用于模块，而是可以将预设分配给可以载入其他类型的模块，列，行甚至部分的模块的各个方面。选项组预设非常适合造型边框，添加转换控件，过滤器，盒子阴影等，从而使您可以保持较小的元素在整个过程中保持一致。

例如，您想为图像和列创建边框样式。选择一个图像模块，导航到“设计”选项卡，然后悬停在边框设置上，直到出现组预设图标为止。

接下来，单击添加新预设。

样式边框，命名并保存预设。

使用Divi 5的基于设计的预设的提示

组合元素预设和选项组预设使您可以构建可扩展的设计系统。以下是一些有效地使用Divi 5的网页的提示：

• 使用它们以提高效率：创建元素预设或选项组预设以加快页面构建的速度，尤其是对于大型网站。此方法使您免于重复造型模块，行或部分。您可以在需要的地方创建样式，并在需要时应用它们。
• 建立设计一致性：预设确保跨元素的统一样式，从而增强您的品牌标识和专业的抛光剂。
• 当您的网站需要设计更改时，编辑预设：预设允许您在不手动编辑各个元素的情况下更新全局样式，从而使其非常适合设计迭代或客户修订。
• 使用它们以进行可伸缩性：您可以将预设与设计变量相结合，以为通常需要更新的站点创建强大的框架。需要在路上添加一页吗？预设使您可以更快，更有效地进行此操作。

3。灵活布局的嵌套行

Divi 5中的嵌套行用更灵活的无限嵌套系统代替了Divi 4的专业部分。与传统行不同，可以将嵌套行放在列中，从而使您可以在任何配置中堆叠行，模块或其他嵌套行。

要创建一个嵌套行，只需通过Visual Builder将其添加到列或列中的模块下方，然后用模块或进一步的嵌套行填充它。

此功能使您可以构建复杂的分层布局。例如，在大约部分中，您可能会在文本模块下放置一个3列嵌套行，以添加按钮以指导用户到不同页面。

Divi 5中的即将到来的FlexBox控件将增强定位选项，为复杂的设计提供精确的对齐和间距，例如定价表，投资组合或多层内容部分。

如何使用嵌套行

要利用嵌套行的力量，请在视觉构建器中按照以下步骤：

首先将标准行插入您的页面布局。这将作为基础。接下来，单击“新的行”选项卡以显示新嵌套行的列选项。

接下来，选择第一列的模块。对于此示例，图像。

在第二列中，添加另一个图像。您可以为边界，盒子阴影创建选项组预设，并从那里创建效果。

您可以将嵌套行添加到另一列或第一个列下方。可能性是无限的。

您可以创建深层多个级别的高级布局。例如，您可以制作一个带有嵌套行的定价表，以并排配有两个按钮，这是Divi早期版本的功能。有几种使用嵌套行的方法，使其成为使用Divi的网页时的多功能功能。它们非常适合构建英雄部分，团队页面，标头，页脚等等。

使用嵌套行的提示

• 首先计划您的布局：在添加嵌套行之前，绘制页面结构大纲以确定添加它们提供的价值，例如多层英雄部分，定价表或团队网格。
• 用于模块化设计：为可重复使用的组件创建嵌套行，例如带有图像的行和文本用于推荐，然后复制或保存它们以在整个网站上进行一致的样式。
• 与模块组结合：对嵌套行与模块组，以组织复杂的布局。
• 利用Divi的响应式断点：使用响应式旋转的旋转旋转来确保嵌套元素在所有设备上正确对齐。

4。有组织内容的模块组

模块组充当Divi 5中的容器，使您可以在列中分组多个模块。您可以作为单个单元进行样式，移动或复制它们。它们可以简化您的工作流程，尤其是对于复杂的设计，并为即将到来的Flexbox支持奠定了基础，从而解开了更精确的定位选项。

从那里，您可以添加设计模块和嵌套行，或将选项组预设应用于组以创建样式的布局，您可以轻松地复制或保存到Divi库或Divi Cloud。

如何使用模块组

要创建一个模块组，请添加一个新行，然后选择一个列结构。从Divi 5的可用选项中选择组模块。

在模块组内，您可以添加模块，例如文本，图像，按钮，甚至嵌套行。例如，您可能会创建一个包含标题，文本，图像和按钮的组，以供呼叫行动部分。

设计后，您可以通过单击组右上角的省略号菜单来保存或复制模块组。

模块组可以创建团队成员段，召唤部分，室内页面标头等。但更重要的是，一旦发布了诸如Flexbox和Loop Builder之类的功能，模块组将变得非常有帮助。

使用模块组的提示

• 策略性地计划模块组：将模块组用于可重复使用的组件，例如CTA，推荐，团队成员或产品卡。它们有助于简化建筑过程并维护组织。
• 将模块组与预设相结合：将选项组预设应用于模块组，以跨多个组的一致样式，例如统一的阴影或边界。
• 使用Divi Cloud：将常用的模块组保存到Divi Cloud，以便在项目中快速访问，尤其是对于具有类似设计需求的客户。

使用模块组，您可以创建易于管理和扩展的模块化，有组织的设计，使其非常适合构建简单或更复杂的网页。

5。动态设计的高级单位

Divi 5的高级单元功能支持更广泛的CSS单元（PX，VW，REM，％等）以及在单个输入字段中诸如Calc（），Clamp（），Min（），Min（）和Max（）之类的功能，从而启用动态和响应式设计。例如，您可以将部分的宽度设置为计算（100％ - 40px）或夹具（20px，3vw，40px），以根据视口大小进行扩展。

高级单元也可以用作设计变量，以制定全局规则并在整个网站中保持设计一致。

如何使用高级单元

有几种使用高级单元的方法，但是最有效的方法是将它们与设计一致性的设计变量相结合。但是，在某些情况下，您需要在模块级别分配它们。

一个很好的例子是文本。当然，您可以在变量管理器中设置Clamp（）公式来控制整个网站的大小，但是如果您想通过添加空间使其更好地脱颖而出，该怎么办？那是高级单位进入的地方。

要演示，请单击将标题模块添加到您的网页。在“设计”选项卡中，导航到尺寸字段。

在宽度范围旁边，单击- 图标以显示高级单元选项。

从下拉菜单中，选择大众（视口宽度），然后输入50 。这将告诉标题占据观察口宽度的50％。视口是Web浏览器窗口的可见区域。因此，无论浏览器窗口的宽度如何，它始终是浏览器窗口宽度的一半。

当您预览标题在其他屏幕尺寸上的外观时，无论如何，您会注意到标题保持相同的宽度。

使用高级单元的提示

• 启动简单：以直接设计的基本单元（例如PX或％）开始，然后尝试Clamp（），Calc（），VH或大众进行响应效果。
• 使用夹具进行排版：将夹具（）应用于字体尺寸或间距，以创建适合任何屏幕尺寸而无需手动断点的屏幕尺寸的流体，可访问的设计。
• 与设计变量结合使用：用于标题和身体文本的经常使用的单元作为设计变量，以保持一致性并简化更新。

高级单元为您提供Divi无代码接口中自定义CSS的精度，从而易于构建动态的专业网页，该页面无缝地适应任何设备。

6. Divi AI集成

Divi AI通过基于自然语言提示来生成文本，图像，代码或整个部分和布局来增强设计过程。它在Divi 5中的Visual Builder中起作用，在需要时使一些设计或文案提供帮助。

例如，您可以使用“创建具有标题，按钮和背景图像的现代英雄部分”之类的提示。” Divi AI将产生完全样式的布局，您可以手动完善该布局以匹配您的视野。

使用Divi AI，您可以加快设计过程，克服作家的障碍，或在需要时获得一些创造性的推动。

如何使用Divi AI

为了充分利用Divi AI在Divi 5中构建网页时，您可以使用它来帮助您编写品牌副本，创建图像，在现有模块中添加一些CS，甚至生成段。 Divi AI可以帮助您创建美丽的网页，与访问者产生共鸣。

要在现有文本模块上使用Divi AI，请将悬停在文本区域上，然后单击“内容”选项卡中的Divi AI图标。

将出现一个带有多个选项的对话框。您可以编写和替换现有内容，延长，缩短或简化它，修复拼写和语法，翻译甚至更改音调。

选择选项后，Divi AI将根据现有内容更改副本。完成后，您可以使用文本，重试，通过AI进行改进，或用一些指导单词来完善结果。

使用Divi AI的提示

• 具体说明您的提示：在使用Divi AI创建图像或部分时，包括音调，颜色或布局首选项等详细信息。文本和代码也是如此。越具体，输出越好。
• 根据需要进行迭代：如果初始输出不理想，请完善您的提示或生成多个变化以找到最佳拟合。
• 使用它来灵感：使用Divi AI的最佳方法之一是集思广益，例如生成布局概念或标语，即使您打算大量自定义网页。

使用Divi 5建立网页的最佳实践

对Divi 5的特征采用战略方法对于发挥其潜力至关重要。首先计划您的设计系统。定义核心设计变量，例如主要和次要颜色，相关链接，排版设置和字体。

构建页面时，请建立可重复使用样式的选项组预设，例如悬停效果，阴影或排版，以加快工作流程并在网站上保持凝聚力的美学。

早期测试且通常对于积极的结果至关重要。使用Divi 5的响应式断点预览高级单元，以确保它们在所有设备中看起来都不错。 Divi 5的响应式切换为您提供了七个断点探索，使您可以更好地了解设计如何在不同尺寸的屏幕上出现。

将元素预设与选项组预设相结合，以平衡灵活性和一致性。将元素预设用于特定模块，例如样式的CTA模块。相比之下，要保持统一性，请将期权组预设应用于共享属性，例如边框样式或阴影。当需要更新时，您可以调整这些预设组以进行全局更改，而不是手动编辑单个元素。

最后，保持设计易于保持性能和可用性。除非有必要，避免过度嵌套行或依靠复杂的calc（）公式，因为这些可能会使编辑复杂。同样，为您计划在网站上重复使用的基本设计创建模块组。

使用Divi 5构建更智能的网页

Divi 5重新定义WordPress Web设计，使您可以轻松构建令人惊叹的响应网页。它的现代视觉构建器，直观的控制，创新功能和Divi AI简化了该过程，从而以最小的努力确保了专业成绩。无论您的技能水平如何，这些工具都可以使构建有效，动态的网站更快，更聪明，更具创造力。

准备探索Divi 5的潜力了吗？今天下载Divi 5 Alpha版本，并尝试其最新功能，以使您的视野栩栩如生。 Divi 5适合新站点，但尚未推荐用于转换现有网站。

我们很想听听您的想法！通过以下评论分享您的反馈。更好的是，在社交媒体上发布有关您的Divi 5经验的信息，以帮助传播这个词。