关于Divi 5的选项组预设，您需要了解的一切

Divi 5中的期权组预设简化了管理样式，提供了更高效，更可扩展的设计方法。您不再需要将相同样式应用于多个元素。使用选项组预设，您可以在多个元素上创建和应用选项组预设（例如边界，阴影和间距），混合和匹配它们，并轻松进行全局更新。

在这篇文章中，我们将更深入地了解选项组如何改变您在Divi 5中的设计方式，探索这种新方法的好处，并向您展示如何使用它。如果您想简化工作流程并构建更可维护的设计系统，那么这是一个不想错过的游戏规则。

查看以下视频以查看动作中的新功能。

了解期权组预设的基础知识

在我们深入实施期权组预设之前，让我们讨论一些基础知识，以帮助您更好地理解这一新的高级功能。

选项组预设解释了

Divi 5中的选件组预设允许用户创建可重复使用的设计样式，这些设计样式可以应用于网站上的多个元素。与元素预设（在Divi中存在一段时间）不同，这些预设在所有元素上都起作用，从而为背景，边界，排版等提供一致的样式。

它们可以在全球范围内进行分层，组合和更新，从而使保持凝聚力的设计系统更加容易，同时降低重复的样式工作。

更全球的控制

在选项组预设之前，Divi中的样式元素需要手动调整或应用控制特定元素所有设计设置的元素预设（部分，行，列，模块）。尽管元素预设仍然至关重要并有助于保持一致性，但它们主要关注整个元素而不是样式本身。该样式可以应用于任何元素。您无需重复每个元素中的样式，因为您可以从一个特定的来源中撤回。

使用选项组预设，元素预设变得更加有效。它们可以合并以产生最有效的结果。

您什么时候应该创建选项组预设？

有不同的方法可以实现选项组预设，但是通常，创建它们越快，越好。从您的网站构建中的选项组预设开始，可以从进行编辑时节省时间。

很快，选项组预设也将能够生活在元素预设中，因此在建立元素预设之前创建它们会很自然。现在，假设您是从头开始建立一个全新的网站；您将能够处理此构建的方式如下：

1. 设计您的第一页
2. 将样式变成选项组预设
3. 在您的元素预设中包括选项组预设

这个过程不是线性的，您很可能会发现自己在选项组预设和元素预设之间来回走动，直到您对第一页草稿感到满意。

您可以使用选项组预设的样式

右上角具有选项组预设图标的任何样式都可以变成一种样式。

可以创建选项组预设并将其应用于各种设计设置，包括排版，颜色，背景，边界，间距，阴影，效果，尺寸，布局，定位和动画。这些预设使设计人员能够创建一个结构化的可重复使用的设计系统，而无需重复进行手动调整。

Divi的选项组预设的一件伟大的事情之一使它与竞争对手有着强烈的区别，它不仅专注于CSS。它还包括使用脚本构建的效果。您可以在Divi提供的更具交互性功能中注意到这一点，例如条件选项，HTML背景视频，滚动效果等。

您将不止一次使用的任何设计实例都值得将预设变成预设。这将使您的设计更加容易。

如何实施选项组预设

现在，我们已经讨论了基础知识，让我们专注于期权组预设的实施。为了使所有内容尽可能简单明了，我们将专注于创建一个简单的边框预设。创建任何其他预设的方法与此用例相同。

示例：创建边框预设

创建选项组预设非常简单。让我们逐步创建边框预设的过程。我们正在使用设计组合布局包随附的主页布局，但请随时使用您选择的任何其他布局。

步骤1：打开元素的设置（列设置）

在Divi Builder中，选择要样式的任何模块（例如，列）。

步骤2：导航到“设计”选项卡

在模块设置内，单击“设计”选项卡。向下滚动并找到边界部分。

步骤3：添加边框

从可用选项中选择边框样式。为了使事情变得简单，我们唯一要做的就是添加一个黑色的1px边框。

步骤4：作为选项组预设保存

单击边框设置右上角的图标以创建一个新的预设。给您的预设一个描述性名称（例如，边框 - 衬里）。单击“保存预设”以最终确定。

将边境预设应用于其他元素

现在，您已经创建了一个选项组预设了，现在该将其应用于其他元素了。无论您是造型部分，行，列还是模块，预设都可以使您以最少的精力实现统一的设计。请按照以下步骤应用您保存的边境预设：

步骤1：选择任何其他元素

打开您要样式的任何其他模块（例如，图像模块）。在“设计”选项卡中，导航到边框设置。

步骤2：应用边境预设

找到选项组预设图标，然后选择您在本文上一部分中创建的预设。

将选项组预设与元素预设相结合

在某些情况下，您可能只需要在元素级别上应用某些设置。假设您彼此相邻有2列，并且您希望它们共享所有相同的设置，但不是相同的边框。在这种情况下，您可以对这两个列使用共享列预设，但在每个列上应用不同的边框预设。

步骤1：创建新列预设

打开第一列，并从右上角的当前样式创建新的预设。给它一个描述性名称，然后保存设置。

步骤2：启用边框预设与列预设旁边

现在，导航到行的第二列。我确保第2列没有任何层面元素级设置。到达那里后，启用您在上一步中做出的预设。

在这一点上，这两个列共享相同的元素预设，但只有第一列包含一个附加的边框预设（您也计划在将来使用其他元素）。

分配选项组默认值为默认值

选项组预设的另一个不错的选择是能够使其默认。这意味着，一旦添加一个包含特定样式功能的元素，您选择的默认样式就会适用。这对于排版，颜色和按钮特别有用。

让我们以按钮为例。按钮样式是几个模块的一部分，包括联系表单模块，CTA模块，电子邮件Optin模块等。如果您希望一种特定的样式自动应用于所有这些按钮，则可以使用选项组预设。让我们看看如何。

步骤1：打开联系人页面内的联系表格模块

在此特定示例中，我们将使用“设计产品组合布局”包中包含的联系页面。创建新页面后，上传此布局（或任何其他联系布局）。然后，打开您将在该布局内找到的触点表单模块的设置。

步骤2：从静态样式创建选项组预设

创建选项组预设很容易。您有两个选择；您可以从头开始创建一个，也可以将现有静态样式变成选项组预设。由于我们在联系表单模块中有一个设计的按钮，因此我们不必再次设置样式，而是可以将这些设置重复使用我们的选项组预设。导航到“设计”选项卡并打开按钮设置。

一旦将该设置组的右上角悬停，您将看到一个图标。单击此图标。

继续选择“当前样式的新预设”，并给您的按钮一个描述性名称，例如“主按钮”。

步骤3：分配按钮样式为默认

要使此按钮样式成为网站上所有按钮的默认设置，请切换“分配为默认”选项并保存预设设置。

步骤4：添加新的未风格的电子邮件Optin模块查看结果

一旦您添加了使用按钮设置的任何模块，新的默认设置将应用。这不仅限于我们创建初始选项组预设的触点表单模块，但是使用按钮设置扩展到所有元素。包含按钮设置的模块之一是行动模块。

要查看您的新预设，请在您的联系表格模块下方添加一个未设置的全新电子邮件Optin模块。

您会看到此新添加的模块内的按钮包含我们在本教程上一部分中应用的新默认样式。

全球编辑预设

让我们继续以按钮预设为例。由于这是整个网站上所有按钮的默认值，因此更新此按钮上的样式可以帮助我们节省大量时间。我们只需要对其进行编辑一次，更改将在整个网站中适用。

要编辑现有的预设，请在其中一个模块中找到它。

将按钮预设悬停，然后单击齿轮图标。这将打开一个可以进行所有修改的屏幕。例如，让我们将边框半径更改为5PX。您可以注意到在使用此按钮预设的所有情况下，它如何立即生效。

始终确保单击“保存预设”，它会给您一个警告，提到它将影响您使用此预设的所有实例。

使用选项组预设的主要好处

一旦开始使用选项组预设，就很难想象您过去从未使用过它们。让我们讨论为什么您今天应该使用新的选项组预设探索Divi 5。

1。更快，更有效的设计工作流程

使用选项组预设，您不再需要在不同元素上手动重复设计更改。创建预设后，它可以普遍应用。如果需要设计更新，则修改预设会自动更新所有使用它的元素，从而节省时间和精力。

2。可伸缩性

随着网站的增长，保持一致的设计可能会成为一个挑战。选项组预设使您可以通过确保所有元素遵循统一样式来有效地扩展设计。无论您是管理小型企业网站还是大型企业项目，预设都可以帮助维护干净，结构化的设计系统。

3。更轻松的协作

选项组预设使在同一项目的设计师之间的协作更加顺畅。团队成员可以使用预设快速应用标准化样式，而不是手动更新多个元素。此外，要求更改的客户将受益于更简化的过程，因为可以在预设级别进行编辑，而无需单独修改单个元素。

4。跨站点元素的一致性

设计一致性对于专业网站至关重要。通过使用选项组预设，您可以确保每个按钮，标题和背景都遵循相同的设计规则。这消除了矛盾，并有助于在所有页面上保持品牌标识。

5。轻松的全球更新以最少的努力

选项组预设没有为每个元素手动更新样式，而是让您毫不费力地进行全局更改。对预设的单一调整会立即更新所有使用它的元素，从而减少了修订的时间并确保整个网站的统一性。

今天开始使用Divi 5

选项组预设是Divi 5的有力补充，为管理网站设计提供了一种灵活，有效的方法。通过利用这些预设，您可以简化工作流程，保持设计一致性并毫不费力地进行全局更新。立即开始使用选项组预设，并在网络设计项目中体验新的控制和效率。