使用Divi 5的默认预设为整个网站设计

选项组预设的到来在Divi 5中开放了许多新的可能性。尼克说，这是多年来达到Divi的最重要功能，随着您对其进行测试，您会确切地看到他为什么这么说。

您已经习惯了元素预设，但是选项组预设添加了您永远不会停止使用的全新设计控制层。但是，两种类型的预设都支持“默认预设”。这就是我想在以下2000个单词的过程中向您展示的内容。

Divi 5中的默认预设是什么？

默认预设是您要在网站上编辑的第一个预设。在许多方面，这些都是主题定制器的全面替代。

您有两种类型的默认预设，可以在编辑页面时立即使用- 默认元素预设和默认选项组预设。让我们首先涵盖元素预设，因为它更熟悉，但是您需要使用选项组预设开始所有设计。

默认元素预设

元素预设使您可以在网站上多次使用元素进行快速设计。使用元素预设，您可以采用像Blurb模块之类的模块并编辑模块的默认预设。编辑默认预设后，它在向您的网站添加新的Blubs模块时会使用相同的样式（因为新项目使用默认设置）。

如何编辑默认元素预设

编辑默认预设很简单。单击要更改要更改默认设置的元素（在这种情况下为文本模块）。在右上角，单击预设选择器。

您应该在下拉菜单中至少看到一个预设 - 该元素的默认预设。查找设置（齿轮图标），然后单击以将设置选项从特定页面元素更改为默认预设的设置选项。

当面包屑（显示您正在处理的元素的嵌套位置）消失时，您会知道您正在编辑预设，并且“预设”一词出现在设置面板的左上方。您还会注意到预设选择器上的“默认预设”，并且变成蓝色。从这里，导航到您要编辑的元素选项组。在这种情况下，我决定转到“设计”选项卡>文本>文本大小，以编辑此模块的文本内容的大小。

单击“保存预设”以进行更改，请持有范围内的地点。

如果你不知道
如果您已经在Divi待了一段时间，那么您就会知道模块预设。元素预设与模块预设相同，但是将其称为模块预设令人困惑，因为预设也可以在非模块元素（例如各部分和行）上使用。

Divi 5中的页面的线框视图。请注意，该行是如何具有预设的，而不符合模块而不是容器的标准。

只需将不同的自定义元素预设应用于模块（以下内容）或直接将样式直接应用于特定的模块或元素，就可以“覆盖”默认元素预设。 Divi与CSS一样，使用特定性规则，在这种情况下，将设置直接应用于模块的设置比应用于默认元素预设的设置更具体。

但是，该块上有一个新的预设，您应该先设计Divi网站。

默认选项组预设

Divi的新选项组预设允许您创建跨越可能使用类似选项组的各种模块和元素的默认样式。这一切都是通过“默认”选项组预设完成的。如果您对这个期权组的新概念的详细信息感到模糊，则可以在我们的帖子中阅读有关它的更多信息，这会告诉您您需要了解的有关它们的所有信息。

了解选项组预设

简而言之，不同的模块具有不同的组成（请参见下表，以比较四个不同的元素）。

当一个元素的复合特征与另一个元素重叠时，它们可以在选项组级别上共享样式，这意味着您在跨不同模块和元素设计类似的主题时节省了时间（例如许多模块的标题文本）。特别是在标题，文本，阴影，动画，粘性功能，边界，间距和按钮的情况下，您将更快地设计网站。

如何编辑默认选项组预设

要编辑默认选项组预设，请转到模块或行/部分的设置面板。悬停在可用选项组（文本，标题文本，按钮，背景等）上。支持预设的选项组将在悬停时在OG字段的右侧揭示一个预设图标。单击预设图标以显示该选项组的默认图和任何自定义预设。

这是一个视频，展示了编辑单个模块的特定方面与使用选项组预设编辑相同方面之间的区别。

您知道，当您仅针对当前正在编辑的选件组，UI从光线变为黑暗时（除非您处于黑暗模式，在这种情况下，在这种情况下是相反的情况）时正在编辑选项组预设。您必须节省更改才能生效。

默认预设和自定义预设有什么区别？

默认的预设是自动应用于放置在页面或模板上的任何新元素（模块/部分/行）的样式。无论如何，Divi中的每个元素和每个选项组都将具有默认的预设。请参阅下面的默认样式来源。

自定义预设是其他易于管理和应用默认预设的预设，但不会自动使用（您必须应用这些自定义预设来代替默认设备）。它们用于特殊情况，例如黑暗部分，侧边栏和密集的内容显示，无论您的设计需求如何。

每个网站应尽可能使用默认选项组预设设计。然后，应创建其他自定义选项组预设，以根据您的设计规范处理类似的情况。这些OG预设未涵盖的任何内容都可以使用默认元素预设和自定义元素预设设计。您可以将样式直接应用于单个模块，以使其剩余的边缘案例仍然需要设计。

Divi处于令人兴奋的阶段，所有新功能都在推出。当高级单元和设计变量下降时，您可以使用所有CSS单元和功能设置CSS变量。从那里，您可以在所有预设中使用这些CSS变量，从而使您的设计工作流程更加一致，更快。

还有一项计划的功能，可以允许嵌套选项组预设在元素预设中，从而使您可以使用其中内置的选项组预设的逻辑来创建元素预设。这意味着，当您编辑OG预设时，它还将修改相关元素预设（反之亦然）。

对于Divi 5的设计师和开发人员来说，未来看起来很光明！

如何将自定义预设变成默认预设

我们有默认的预设，也有自定义预设。我们看到了如何应用自定义预设，而不是默认预设，但是如果我们非常喜欢它以至于我们想让它默认情况下该怎么办？

好吧，这很容易。转到元素预设或选项组预设下拉列表。悬停在您要默认的自定义预设上，然后单击“星图”图标。然后保存您的更改。现在，您的预设是整个网站上的默认预设。

默认预设中的样式从何而来？

未经编辑的默认预设仅继承主题Customizer中的样式值。几乎所有WordPress主题仍然使用主题定制器的某些方面（甚至是封锁主题），尽管Divi已经完成了它，因此它已连接但不需要使用。将来我们可能会在某个时候替换定制器，但是目前，它是从WordPress Core携带的遗物，甚至是现代WordPress主题的怪癖。

假设我使用了财务顾问入门网站（作为一个具体的示例）。在主题定制器中，标题文本大小设置为30px 。

我可以看到默认预设中使用的相同值（30px），通过进入视觉编辑器以获取页面，单击标题或文本模块的“默认预设”，然后检查设计>在设计> H1高程的标题文本下。

Divi 5字段中的灰色值意味着它是从主题Customizer继承的继承值

但这只是此入门网站设置的默认设置。如果您使用导入的布局包中的预设或从头开始，则将在主题Customizer中设置不同的默认值。

如何使用默认预设构建网站

我建议使用几页的线框启动您的构建。将所有内容列出几页，并与您所需要的设计。

尝试依靠最简单的模块来完成作业，并在可能的情况下重复使用相同的模块。考虑如何使用标题，文本，贴合，菜单，图像，手风琴/切换和视频模块来构建页面的大部分线框。根据需要添加其他模块，但是在大多数情况下坚持使用一组核心模块，同时使用选项组和元素默认预设会更快。

此页面使用各节，行，列，文本，贴合，图像，按钮和菜单模块。通过将内容保持尽可能简单，我可以减少所需设计的选项组数量。

接下来，您需要使用默认选项组预设开始设计最全面的更改。对于大多数设计，这将是：

1. 截面间距：包括顶/底部边缘，左/右边缘以及任何必需的填充。
2. 背景颜色：创建您要在大多数情况下要使用的默认选项组预设，以及用于替代/对比背景颜色的自定义选项组预设。请记住，默认预设到背景选项组预设也可以应用于列的背景。
3. 排版：从您的H1-H6开始。根据您的模块使用情况，您需要在标题和文本模块的标题文本下启动这些默认选项组预设，以及诸如Blurb模块之类的内容。然后，处理普通文本，重点介绍文本模块中的文本选项组和Body Text Option Option组，例如Blurb Module之类的内容。
4. 其他设计设置：为边界，盒子阴影，过滤器（如果您是样式图像）和动画创建选项组预设。为此，我倾向于不使用默认预设，而是创建可以选择性地应用于页面元素的自定义预设。
5. 高级设置：这类似于上面的步骤，但是我为过渡和滚动效果等事物创建了选项组预设。我也倾向于不使用默认预设，而是创建可以选择性地应用于页面元素的自定义预设。

以这种方式创建默认选项组预设将自动开始在网站上应用您的样式。每次更新默认的OG时，您网站上的相关元素都会自动接受这些更改。

默认预设将节省您的时间

默认预设（元素和选项组品种）都可以节省大量时间。我等不及您使用Divi 5的Blazing-fast Builder开始建立这些功能的网站。这甚至还不是在Divi 5中推出的新功能的末尾。

借助Divi的新功能，您的指尖将具有名副其实的设计系统。您是否尝试使用默认预设编辑网站？它怎么走了？在下面的评论中让我们知道，并分享您如何使用这些功能。

下载Divi 5了解有关Divi 5的所有知识5尝试Divi 5演示