Divi 5独家功能（到目前为止）

我们正在快速推出新的Divi 5功能，每个功能都旨在提高性能，简化工作流程并为您的指尖带来强大的设计功能。需要概述吗？这篇文章将解决值得退房的Divi 5独家功能。这仅仅是开始。我们拥有令人兴奋的新功能，例如Flexbox和Loop Builder即将出来。我们的更新介绍了我们每天使用Divi的设计师和开发人员听到的常见疼痛点。

Divi 5已准备好在新网站上使用。

Divi 5独有的8个功能（以及它们的工作方式）

Divi 5将创新的升级引入了网站设计，并使用了一系列工具来重塑和加速设计任务，从而使其更直观。以下八个功能证明了我们新裁定的Divi的潜力：

1。可自定义的断点

功能于2025年2月6日发布

Divi 5通过其可自定义的断点系统提高了响应设计的灵活性。大多数页面构建者仅将用户限制在三个标准视图中，但是Divi 5允许最多七个唯一的断点，所有这些断点都可以设置为自定义像素值。

这使用户比其他受欢迎的构建器更具控制力，这些构建器通常粘在固定的设备尺寸上，并提供有限的调整选项。尽管许多平台迫使您在刚性边界内进行设计，但Divi 5允许您针对设计需要特别注意的精确屏幕宽度。

超越标准三重奏

大多数网站构建者都坚持使用台式机，平板电脑和移动三重奏，因为它很简单。 Divi 5认识到，这与人们今天在数十个不同的屏幕尺寸上实际浏览网络的方式不符。

使用Divi 5，您可以为以下方式设置断点

• 电话（<767px）
• 电话宽（<860px） - 非常适合景观移动观看
• 平板电脑（<980px）
• 平板电脑宽（<1024px） - 捕获更大的平板电脑和类似的设备
• 桌面（> 981px）
• 宽屏（> 1280px）
• 超宽（> 1440px）

其他WordPress页面构建器提供了一些断点控制，但是无匹配Divi 5的精度和易用性。该系统保持直观，并且在所有断点上都应用了相同的熟悉的Divi控件。

视觉断点处理

Divi 5介绍了帆布缩放，该功能将其与大多数其他建筑商区分开来。您可以拖动画布的边缘以在所需的任何宽度上查看布局，而不是仅限于在固定设备预览之间切换。

这种方法为您提供了即时，现实的反馈，就像直接在Web浏览器中工作一样。当设计比当前窗口更宽的断点时，画布会按比例进行调整，因此即使在较小的屏幕上，您仍然可以准确地查看设计。

当您在断点之间移动时，体验保持一致。控件的行为方式相同，并且您的布局不会出乎意料地改变。这种可靠性减少了猜测和响应式设计的故障排除，这可能是其他页面构建者的头痛。

了解更多

2。选项组预设

功能于2025年3月11日发布

选项组预设是Divi 5中最令人兴奋的新功能之一，可以扩展您构建适合您的设计系统的功能。选项组预设是您的设计的构件。当元素预设您锁定特定元素时，Divi 5的选项组在任何元素类型上都可以使用。

您可以为特定设计属性（例如排版，边框，阴影或背景）创建可重复使用的样式，并在不同元素中混合这些样式。例如，您可以为标题样式创建一个预设，另一种用于按钮样式，而盒子阴影则是第三个。

设置后，您可以单击将这些样式应用于任何兼容的元素，无论它是文本模块，blubb，call to Action，甚至诸如部分和行之类的容器。

为什么这对您的工作流很重要

当您需要更新设计时，这是节省时间。假设您决定更改整个网站元素的边界半径。您只需对每个按钮，图像和部分进行搜索，而是您只需编辑一次边框预设，而使用预设的每个元素会自动更新。

跨不同元素类型工作的能力使Divi 5的选项组预设确实有帮助。相同的边框样式可以应用于模块，列，行或部分。这种跨元素兼容性节省了数小时的重复样式工作。

这种灵活性更进一步。 Divi的选项组预设超出了基本样式选项。它们还涵盖了基于脚本的功能，例如有条件显示，HTML背景视频和滚动效果。这使您可以一致地控制网站的静态样式和交互式行为。

了解更多

3。高级单位

功能于2025年3月19日发布

Divi 5改善了其对CSS单元的处理，使响应式设计的方式更加容易。

现在，您可以访问直接在构建器内的当今网页设计所需的全部CSS单元。这意味着您可以使用像素（PX），百分比（％），EMS（EM），root EMS（REM），视口单元（VW，VH，VH，VMIN，VMAX），甚至更先进的选择，例如字符宽度（CH）或分数单元（FR）（FR）。

起初这可能看起来像是一个较小的更新，但实际上它为您提供了更大的灵活性来构建响应式布局。

为什么不同的单位很重要

当您构建想要在手机，平板电脑和台式机上看起来不错的站点时，只使用像素就会产生头痛。 300px宽的元素在桌面上看起来不错，但可能会破坏您在移动设备上的布局。

使用诸如视图之类的高级单元，您可以将相同的元素设置为80VW（占视口宽度的80％），并且它将在所有设备上完美缩放。或使用REM单元使文本与基本字体大小成正比，从而使可访问性调整更加容易。

现在，将单元与CSS功能相结合，例如Calc（），min（），max（）和clamp（），并看到真正的魔法发生。 Divi 5支持所有这些，使您可以创建适合任何屏幕尺寸的真正流体布局。

例如，您可能会将截面高度设置为计算（80VH - 60px），以使其在留出空间时占用大部分屏幕。或使用夹具（16px，4vw，22px）进行随着屏幕而生长但保持在可读限制之内的文本。

夹具的灵活性（）

夹具（）函数值得特别注意，因为它解决了许多响应式设计问题。它使您可以一口气设置最小，首选和最大尺寸，从而使Clamp（）功能成为许多Web设计师的最爱功能。

您可能需要随着屏幕尺寸而增长但保持可读性的标题。在标题模块中，您可以将文本大小设置为夹具（36px，5vw，72px）。标题不会小于36px或大于72px，但是在这些尺寸之间，它将以视口宽度的5％扩展。

这会在没有断点的屏幕大小之间创建平稳的过渡。平板电脑上太大或大型监视器太小的文字不是问题。您的版式通过布局呼吸。

我们还了解到，不同的设计元素需要不同的单元，这就是为什么Divi 5的高级单元功能不仅具有排版，而且还具有边距，填充和其他间距值的原因：

• 对于文本，REM单元将所有内容都按比例保持。如果将身体文本设置为1REM并将标题设置为2.5REM，则更改基本字体大小将按比例更新所有内容。
• 对于布局，您可以尝试混合固定和流体单元。侧边栏可能在300px时效果最好，而主内容可以使用CARC（100％ - 350px）来填充剩余空间。
• 对于间距，EM单元会创建填充文本大小的缩放。即使文本大小变化，这也可以使您的设计比例保持一致。

在其他讨论的功能上也很好

特别好的是，您不需要编写自定义CSS来使用这些单元。它们直接置于视觉界面。您可以尝试不同的值，并立即查看结果，使学习曲线比手工编码这些解决方案要柔和得多。

这些单元与Divi 5中的其他功能集成在一起。您可以使用自己喜欢的任何单元作为设计变量存储您的值，然后通过选项组预设将它们应用于网站。这会产生良好设计的链反应，该反应流过整个网站。例如：

• 创建一个数字变量，例如标题大小：夹具（26px，5vw，82px）;对于您的H1标题。将此变量应用于标题文本预设。现在，您的标题将在移动设备上的26px和台式机上的82px之间平稳缩放，这些尺寸之间的流体5VW计算。
• 将数字变量设置为夹具（20px，5vw，80px），然后将其用作边缘，您在台式机上的移动设备上有紧密的间距，并且在台式机上进行了宽敞的呼吸空间，并且之间有平稳的过渡。
• 使用数字可变空间单位：20px设置基础间距，并将其与布局预设中的calc（）一起使用。例如，将Calc（var（ - 空格单位） * 2）应用于较大的间隙，而calc（var（ - space-unit） / 2）进行更紧密的空间。当您更新基本值时，所有派生的间距会按比例调整。

这只是刮擦表面。通过混合这些配置，您可以\创建利用Divi的简单性和新发现功能的网站。

了解更多

4。设计变量

功能于2025年4月3日发布

大多数网站构建者都有设置全球颜色和字体的方法。 Divi 5提出了这个想法，并随之运用。您不仅可以为颜色和字体创建变量，还可以用于数字，图像，纯文本甚至Web链接。

考虑一下：大多数建筑商都可以设置一个主要颜色，该颜色无处不在。但是，如果您想在多个页面上更改电话号码怎么办？还是交换整个网站中使用的重复图像？ Divi 5轻松处理这些情况。

您的所有变量都生活在视觉构建器侧边栏中的简单面板中。它很干净，很容易找到，并将所有内容都放在一个地方。

与预设的完美匹配

设计变量和预设（均选项组预设和元素预设）共同进行可维护和可扩展的设计。您可以构建引用变量的预设，从而创建灵活的设计系统。

例如，您可能会为主标题字体创建一个设计变量，然后在标题版本预设中使用该变量。如果您以后决定更改字体，则只需要更新一次变量，而不是预设本身。这创建了大多数构建者根本不提供的另一层控制层。

这种两层方法比其他建筑商更具控制权。您将某物的外观（变量）与出现的位置（预设）分开。

您可以将数字变量与CSS函数（例如Calc（）和Clamp（）等CSS函数一起创建响应式设计，以完美适应不同的屏幕尺寸。为您的网站的间距节奏设置一个变量，并在整个布局中将其应用于一致的比例，以精美的比例。

当您更改变量时，使用它的所有内容都会立即更新。这将可能的工作时间变成几秒钟的点击。

这如何有助于创建可维护的设计

让我们看一些行动中设计变量的实例：

• 在各处保持您的品牌相同：为您的颜色，字体和间距设置变量。在您的网站上的预设中使用它们，以保持一致的外观。
• 运行假期销售：为广告系列图形和文本变量创建图像变量，以供促销副本。当季节结束时，一次更新一次以刷新您的整个网站。
• 边框样式：为边框半径（例如10px）创建一个数字变量，并将其应用于所有按钮预设，图像模块和卡片。如果您的设计方向发生了变化，则一个更新会影响整个网站的所有圆角。
• 使客户更新变得容易：为需要进行更新的客户建立网站时，设计变量会闪耀。设置将经常更改的内容的变量，例如联系信息或工作时间。他们可以在不触摸设计设置的情况下更新这些。

设计变量也与Divi的主题构建器一起使用。这意味着您的标题，页脚和模板使用与页面相同的变量池。与其他将您锁定在刚性模式中的系统不同，Divi 5的变量使事情变得灵活，同时帮助您保持井井有条。

了解更多

5。嵌套行

功能于2025年4月17日发布

Divi 5引入了嵌套行，这使您可以对布局进行更多控制。此添加使您可以将行放置在列中，创建复杂的布局，而这些布局在没有自定义代码的情况下是不可能的。

借助嵌套行，您可以构建高级网格布局，杂志式内容块和基于卡的设计，而努力则少得多。需要一个包含自己多列布局的列的部分吗？现在，您可以在构建器中做到这一点。

深度建造

添加嵌套行的作品就像添加任何模块一样。选择一个部分，单击“加”按钮，然后从您的选项中选择“行”。从那里，您可以添加一行以创建一个嵌套行并将其填充内容。

这种看似简单的更改为许多设计可能性打开了。您可以使用自己的列结构创建侧边栏小部件，使用嵌套画廊构建产品展示，或设计具有复杂布局的设计功能比较表。

最好的部分是它自然地适合您的工作流程。没有什么可以学习的。您只是在更多地方使用行。如果您知道如何使用Divi构建，那么您已经知道如何使用嵌套行。

嵌套行解决了网站建设者的实际问题。是否要创建一个服务部分，每个服务都有自己的两列布局？以前，您需要自定义CSS或复杂的解决方法。现在它是正确的。

对于内容丰富的站点，您可以创建具有混合柱宽度和嵌套内容区域的杂志式布局。在维护页面布局的同时，每个文章或功能都可以具有自己的列结构。

只是第一步

嵌套行只是Divi 5布局演变的开始。该团队正在朝着完整的基于Flexbox的布局系统努力，以使Divi更加灵活。

未来的更新将引入其他布局控件，为您提供更多的选择，以创建复杂的设计而无需自定义代码。这种有条不紊的方法可确保每个新功能在移动下一个功能之前都可以正常工作。

Divi Development团队并没有赶到半熟的功能，而是为布局设计的未来建立了坚固的基础。每个步骤都建立在最后一步，创建了一个既适合未来又易于使用的系统。

了解更多

6。模块组

功能于2025年5月1日发布

构建网站通常意味着反复创建相同的内容模式。您设计了一张完美的团队会员卡，然后花20分钟为下一个人重新创建它。模块组通过让您将相关元素包装成可重复使用的单元来解决此问题。

这是改变的：您没有单独处理每件作品，而是使用完整的块工作。产品卡成为您四处走动的一件事，而不是您必须单独选择的六个不同的模块。当您需要在五十张产品卡上调整间距时，您可以一次更新组模板，而不是手动编辑每张卡。

真正的好处出现在较大的站点上。具有数十个团队成员，产品目录或服务清单的客户项目变得易于管理。您没有进行重复的组装工作 - 您专注于内容和微调。

创建自定义模块组合

模块组打开了单个模块通常无法处理的可能性。构建服务卡，您需要一个背景图像，覆盖图标，标题，描述和两个操作按钮：“了解更多”和“获取报价”。

使用模块组，您将这些元素完全分配给它们。这对不符合标准模板的内容有帮助。

对于定价表，您可以在模块组中使用三个嵌套行：第一行的标题，第二行的详细信息以及第三个中的功能列表。这使您可以单独控制内置定价表模块所提供的字体，颜色和间距。

相同的方法适用于使用图标，图像，标题和文本模块在组结构中排列的文本模块。与标准的证明模块相比，您获得的布局灵活性更大，同时将所有内容都作为一个单元可管理。

关键优势是将构建构建的布局控制与将多个元素视为一件元素的便利性。

构建可重复使用的组件库

创建有效的模块组后，将它们保存为全局元素。这会创建一个随着每个项目而生长的组件库。当您完善样式时，您的证券布局更新在二十页中会进行，并且您的产品展示柜在迭代设计时保持一致。

您并没有在每次构建页面时从头开始，而是从一致的布局开始，并将它们适应新页面和布局要求。

拥抱Divi Cloud集成的便利性。使用此工具，组件可以毫不费力地从项目转移到项目。假设您为特定客户网站开发了一组强大的模块组；现在，您可以利用它们作为即将分配的基础。这样，每个项目都可以获得先前解决方案的优势，但保留了其独特的美学。

与Divi 5的设计系统无缝合作

当您将它们与设计变量和选项组预设一起使用时，模块组会变得非常有趣。假设您建立了一个推荐组：引用，作者姓名，公司和照片。

您没有设置固定颜色，而是引用品牌颜色变量。对于报价样式，您可以为排版创建一个选项组预设，其中包括您的自定义字体，尺寸和行高。对于作者名称，您可以应用其他标题选项组预设。

现在将该模块组保存为全局元素。这些选项组预设将您网站上的每个推荐都连接到设计系统。如果客户想要较深的灰色，请一次更改变量，所有证明组模块都将更新。如果您需要调整报价样式，请编辑“版式”选项组预设；每个推荐报价都会立即改变。

这打败了管理各处散落的单个模块。您的模块组将选项组预设用于边界，背景和文本样式，因此可以自动更新所有分组元素。

了解更多

7。属性管理器

2025年5月16日发布的功能

您已经在调用操作模块中为按钮设计了一个按钮。颜色可以正常工作，并且悬停效果看起来不错。现在，您需要在联系表上使用相同的按钮样式，但不希望CTA的标题或背景。

常规复制纸在这里无法使用：您会得到所有东西或什么都没有。 Divi 5允许您仅通过其属性管理功能来复制按钮零件。右键单击CTA，选择要复制的内容，

然后仅将这些按钮样式粘贴到触点表格上。

选择旅行

Divi 5将每个元素分为不同类型的属性。您选择要复制哪些：

• 所有属性 - 一切都会复制
• 设计属性 - 颜色，间距，预设，但没有文本或图像
• 样式属性 - 只是您的自定义更改
• 内容属性 - 仅文本和图像
• 预设 - 仅预设作业

假设您想要按钮的样式，而不是其文字。复制设计属性。想要一个部分的背景预设，而不是填充吗？仅复制预设。

不同模块之间的作品

您可以将属性从一种类型的模块复制并粘贴到另一种类型上。例如，您可以从调用到操作模块复制并将其粘贴到联系表上。 Divi 5数字算出哪些设置在模块上都起作用，而忽略其余设置。

当构建需要不同模块类型的相同样式的站点时，这会有所帮助。您不必为使用按钮的每种形式，推荐或其他模块重新创建按钮颜色。

小组级快捷方式

属性系统通过选择性组管理更深。完全跳过设置面板。右键单击并直接从上下文菜单中应用特定的属性组。

您是否复制了具有完美按钮预设的模块？您可以通过选择性菜单将该按钮预设粘贴到其他元素。没有标签狩猎，也没有设置潜水。

相同的精度可用于重置。在保持内容完整的同时擦除所有设计属性。或重置仅预设定制样式覆盖的同时。

快速速度

每个动作都会获得键盘快捷键，这些快捷键在上下文菜单中出现。学习一些关键组合和造型加速。快捷方式在所有属性类型中保持一致，因此您的手指快速学习了图案。

这不仅仅是保存点击。当建造数百个元素的站点时，这些微效率分为节省时间的小时。重复的手动工作变得快速，有针对性的动作。

您的设计系统很好

属性管理器直接连接到Divi 5的预设生态系统。当您使用选件组预设和设计变量复制模块时，这些系统连接沿着传播。

包含预设的粘贴属性和这些新元素会立即插入您的全球样式系统。稍后更新预设，每个复制的元素会自动反映更改。当您快速构建和复制元素时，您的设计系统保持连接。

了解更多

8。设置搜索和过滤

功能于2025年5月29日发布

构建网站意味着调整设置。 Divi模块在面板中包装了数十种选择，并通过标签狩猎为您的一天可以吃掉您的一天。 Divi 5带回了Divi 4的搜索功能，但可以使其工作得更好。

您可以在每个设置面板的顶部都能获得一个搜索栏。键入所需的内容，而Divi仅显示匹配选项。寻找“边境”？每个与边界相关的设置都会出现，而其他所有设置都会逐渐消失。需要调整“填充”吗？所有间距控件都会立即弹出。

这消除了单击和滚动，这会减慢您的工作。您可以在几秒钟内找到所需的东西，而不是打开标签并通过小组进行狩猎。

通过您更改的过滤

实时节省是“修改”过滤器。单击它，仅查看您已经调整的设置。当您获取布局包或入门网站并希望查看已定制的内容时，这会有所帮助。

假设您导入业务布局，但想更改颜色。点击修改后的过滤器，发现每个自定义颜色选择，而无需挖掘每个模块。您可以看到更改了哪些字体，对哪些字体进行了调整，并添加了哪些字体。

这也适合客户项目。当有人询问您在其网站上定制的内容时，修改后的过滤器清楚地显示了您的工作。

智能过滤选项

除了修改过滤器之外，您还可以通过设置类型进行排序。更新调色板时，“颜色”过滤器一次显示每个颜色字段。当需要更改版式时，“字体系列”和“字体重量”过滤器揭示了所有模块的文本设置。

该系统知道哪些设置最重要。颜色和字体会产生过滤器，因为它们是人们所做的最常见的更改。由于间距调整经常发生，因此大小会分组。

当您进行范围内更改时，这些过滤器可以节省点击。您没有单独打开每个模块，而是通过需要修改的设置的过滤列表进行工作。

了解更多

Divi 5如何与流行选择相抵触

网站建设者市场充满了选择，但是Divi 5由于一些真正的新功能而脱颖而出。这是使Divi 5与众不同的原因：

这对您的项目意味着什么

Divi 5的功能组合创建了一个设计系统，其他构建器无法完全匹配。选项组预设和模块组仅将Divi 5比竞争对手领先。

当设计变量与预设和模块组一起使用时，您将获得多功能。预设内部的参考变量，将它们应用于分组元素，然后更改值在您的网站上自动更新每个元素。将即将到来的Flexbox和Loop Builder功能添加到混音中，您会发现自己在不需要自定义编码的情况下创建任何网站。

接下来会怎样？

Divi 5路线图显示了将很快降落的连续更新。我们的开发人员分为七个团队，全职工作不同，至少每两周运送一次更新。这是您在接下来几周内可以期待的偷看：

Flexbox布局

最大的变化是完整的Flexbox布局系统，该系统距离完成几周了。这将完全取代您建立布局的方式。您将通过视觉控制而不是自定义CSS获得新的行模板，自动垂直中心，内容包装和间距分布。

模块组只是将相关模块捆绑在一起的容器。结合Flexbox，您可以创建杂志布局，具有匹配高度的产品展示柜以及以前需要解决方法的复杂对齐。一旦Flexbox到达，专业部分就会消失。

循环构建器和WooCommerce更新

在Flexbox布局系统和模块组的基础上，循环构建器将让您重复任何内容：单个模块，组或整个部分。与其他将您锁定在模板中的构建者不同，您将定义重复的内容并将其连接到动态内容。嵌套环也可以工作。例如，将通过帖子循环的博客类别，每个帖子都会显示循环评论。

WooCommerce模块将使用Divi 5的架构从头开始重建。当前的模块将通过向后兼容性工作，但不会与预设或变量相互作用。新产品模块将在几周之内完成，这使WooCommerce的支持步入正轨。

高级颜色

带有色调，饱和度和轻度（HSL）支持的相对颜色可让您构建数学颜色关系。设置一次主颜色，然后自动生成变化：“主要蓝色，但减轻20％”或更改基础时更新的互补阴影。

Beta和移民计划

当完成三个目标时，Beta开始：改进现有站点的向后兼容性，完整的WooCommerce模块支持以及基于Alpha反馈的持续错误修复。

如果我们按照目前的进步进行，这表明在几个月内进行了Beta。该团队还在为后端工作，因此Divi 4站点可以迁移而无需更改。 Divi市场的第三方模块需要完全兼容。

对于新项目，Divi 5 Alpha为大多数构建提供了足够的功能。单独的性能改进证明了开关合理。除非需要特定的新功能，否则现有站点受益于等待Beta。

当Beta到达时，您将获得完整的功能集以及彻底测试的信心。官方发布之后不久，为您提供了未来项目的坚实基础。

准备尝试Divi 5吗？这是开始的方法

这些Divi 5独家功能共同创造了不同的东西。您没有为建造者的设计与一致的设计作斗争，而是建立了维护自己的系统。您没有反复重建相同的样式，而是创建一次并在各处重复使用 - 这只是开始！

因此，通过使用Divi 5构建新网站，立即领先于曲线。所有Divi成员都可以免费使用。只需转到您的帐户区域并获取副本。

安装WordPress后，请上传Divi 5，就像您要上传一个正常主题：外观>主题>添加新>上传主题。激活主题，登录您的凭据，然后建立！您的第一个构建将向您展示为什么我们从头开始重建所有内容。

请记住：仅将Divi 5用于新网站。我们不建议在Alpha阶段迁移现有站点。