元素预设和选项组预设：解释的差异

如果您可以通过CSS课程的灵活性为整个Divi网站设计造型怎么办？ Divi的预设系统使您可以融合功率和轻松，这将改变您构建网站的方式。无论是构建单个着陆页还是多页网站，预设都可以让您创建可重复使用的样式，以削减设计时间，同时保持一切一致。

在Divi 5中，元素预设和选项组预设合作提供功能强大，有效的工作流程。元素预设使您可以为特定元素创建预先设计的设计软件包，而选项组预设则提供在网站上使用的混合匹配样式。它们节省了时间，确保凝聚力并解锁新的创意可能性。

在这篇文章中，我们将探讨它们的工作方式，如何差异以及如何将它们结合起来，以更智能，更快的设计。到最后，您会看到为什么Divi的预设系统是您下一个设计项目的必备系统。

什么是元素预设？

元素预设可帮助您在各种分区元素上创建一致性。在Divi中，您可以在整个产品中找到四种重复出现的元素类型：部分，行，列和模块。在Divi 4中引入并将其推进到Divi 5中，他们让您为元素创建一个完整的样式包，并单击单击，无论您在网站上工作何处。

元素预设捕获了您应用于单个元素类型的每个设置，例如Blurb模块的排版，颜色，间距等。例如，如果您创建了一个带有特定字体尺寸的Blurb模块，则对图标的样式外观和颜色进行了样式，则元素预设将所有这些细节锁定在一个可重复使用的预设中。

可以将元素呈现为默认设置，因此该元素的每个新实例都会自动继承预设的样式。它们在全球范围内进行了修改，这意味着对Pers的调整会立即在您的网站上立即更新。如果需要更改预设，则可以在元素级别上覆盖预设，从而在不破坏系统的情况下为您提供灵活性。您也可以在全球修改预设，以便在使用它的所有实例中生效。

元素预设非常适合保存和重复使用完整的，精心打磨的设计，用于重复出现的元素。例如，创建CTA模块时，您可以为其制作元素预设，然后将其应用于多个页面。有了一个元素预设，它是一次样式，保存了一次，并随时可以在任何需要的地方使用它，从而在不用努力的情况下确保了设计一致性。

什么是选项组预设？

Divi 5中的新产品，选项组预设将焦点从整个设计元素转移到可重复使用的设计属性，例如排版，阴影，边界，间距或滚动效果。它们是模块化样式块，您可以在不同的元素上应用，从按钮阴影到标题字体。它们与一种元素类型没有绑定，使它们具有难以置信的通用性。

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

选项组预设可以在所有元素类型中应用。部分，行，列和模块都可以共享相同的边框预设。带有内置按钮设置的模块都可以共享相同的按钮预设。

元素预设与选项组预设：关键差异

元素预设充当多合一的设计套件，通过锁定单一元素类型的每个细节来简化Divi的工作流程，例如完全样式的完整宽度标头模块或带有其版式，颜色，颜色，间距和效果捆绑到静态蓝图的效果。他们的焦点是狭窄的，仅与一个元素绑在一起，使它们在单击一键时在您的网站上复制复合，抛光的设计方面表现出色。

当您需要在五页上进行一致的CTA部分时，它们非常适合加速该过程 - 一次将其定型，保存并毫不费力地部署它。尽管他们提供全局更新和默认设置，但其范围是有限的，提供了一个固定的，即时的软件包，可以优先使用整个元件一致性。

选项组预设

另一方面，选件组预设将放大可重复使用的样式或行为（例如按钮的阴影，标题的排版样式或滚动效果）提供了一种动态的，交叉元件的方法，可以摆脱单元素模具。这些可堆叠的设计层可以为任何包含一个模块的按钮（例如blurb，contact表单或电子邮件选择装置模块）添加一致的样式，并在适合何处的样式应用，并具有柔韧性混合和匹配。

它们通过在共同环境中削减冗余而发光。他们让您一次定义标题样式或盒子阴影，并在支持实时全局编辑和元素级别覆盖的同时，将其应用于站点。与元素预设的静态性，全有或全无的性质不同，期权组预设为您的整个设计提供精确的样式和适应性。

如何在Divi 5中一起使用元素预设和选项组预设

将元素预设和选项组预设组合在Divi 5中就像将大厨与一位厨师配对 - 一个处理大图，另一个介绍了细节。这是使它们和谐工作的分步指南：

步骤1：从基础样式的选项组预设开始

首先定义网站的核心设计规则，例如排版，配色方案，阴影或动态效果，例如滚动动画。将这些元素保存为选项组预设，并将其设置为默认设置。开始设计时，选项组预设可以帮助建立网站设计的基础。例如，在主题构建器中创建标头布局时，您可以在构建网页时在整个网站中轻松重复该按钮的样式，使您可以进行选项组预设。

您添加的每个新元素并将预设分配给自动继承这些样式，从而使您的网站具有统一的外观而无需不断调整。

步骤2：构建元素预设

创建选项组预设以样式元素的样式元素后，您可以通过为布局创建元素预设来构建设计基础。例如，如果您想在主页上有几个Blurb模块，则只需设置一个样式并创建一个元素预设即可。从那里开始，您可以添加更多的混合物，并将元素预设应用于每个元素，为您节省大量的设计时间。

步骤3：用预设编辑微调

有时，您可能需要在不更改网站上的其他实例的情况下更改预设。值得庆幸的是，元素预设和选项组预设允许这样做。例如，您已经为标题创建了选项组预设 - H1至H6 - 但是您想更改计划在图像背景上使用的标题颜色。我们的标题被视为＃000000 ，这对于此应用程序不起作用。您可以编辑此预设的单个实例，而无需更改预设本身。前往标题模块的设计选项卡，然后更改颜色。

您可以精确编辑元素预设，例如以前的blub示例。一个图标并不完全是正方形，看起来比其他图标更宽。通过在高级选项卡中应用CSS，更改保持隔离。其他具有相同预设的模块仍然不受影响。这会提高设计灵活性，从而在不改变更广泛的系统的情况下对单个元素进行调整。

通过将元素预设和选项组预设纳入您的下一个网页设计项目：网站范围内与创意自由的余地一致性，您将获得两全其美。

他们为什么一起工作更好

• 提高的设计效率：选项组预设处理详细的细节（例如版式或盒子阴影），而元素预设可以在几秒钟内推出完全样式的部分，行，列或模块。
• 更一致的设计：共享样式通过选项组预设保持同步，并且元素预设可确保布局在使用的任何地方看起来相同。
• 它鼓励可扩展性：更改一个选项组预设（例如字体尺寸），并且每个链接的预设都会立即更新 - 非常适合需要其他页面的网站。
• 这是未来的证明： Divi 5的路线图暗示了嵌套选项组预设元素预设的预设，有望更严格的整合。

Divi 5中的元素和期权组预设的未来

Divi 5已经提供了功能强大的预设系统，但是未来有望更严格的集成，可以重新定义您如何构建设计系统：嵌套选项组预设在元素预设中。尽管仍在开发中，但此功能将使您几乎完全通过模块化选项组预设创建元素预设，从而解锁新的全局设计控制水平。

想象一下，使用您已经设计的选件组预设，可以轻松地创建完整的Blurb，CTA等。它将节省时间，使您的网站更容易创建凝聚力的外观，并允许您更快地构建网站。在两个预设组一起工作的情况下，您可以一次更新网站上的设计元素，并且每个链接的元素都会立即调整。这不仅仅是一个增量升级；这是迈向Divi拖放视觉构建器中真正的CSS式设计系统的飞跃。

虽然我们还不能筑巢，但Divi 5的路线图包括它们。当它们到达时，它们将是创建设计系统的最终方法：从选项组预设作为构建块开始，将它们组装成元素预设以进行快速部署，并以最小的努力保持全球控制。

使用选项组预设设计智能

Divi 5的预设系统不仅是一个功能，而且是网页设计师的革命。元素预设和选件组预设似乎像小工具，但它们会打孔。元素预设使您可以保存和重复使用零大惊小怪的整个设计，而选项组预设为您在任何地方使用的样式和行为带来了灵活性和一致性。一起使用，它们创建了一个快速，凝聚力和适应性的工作流程 - 无论您是构建一页还是多页的电子商务网站。

当您一起使用它们时，真正的魔术会发生。选项组预设可帮助您奠定岩石固定基础，然后用元素预设构建可重复使用的设计。结果是一个一致的网站，没有刚性，可扩展的情况下没有压倒性的，并且没有弯曲弯道。这个基于预设的设计系统是针对Divi用户的游戏规则改变者，可以用点击简单地解锁类似CSS的功率。

在进入下一个项目之前，请下载最新的Divi 5 alpha，尝试预设，并查看它们如何改变您如何构建Divi网站。