基于预设的设计如何改变Divi设计范式

Divi的设计功能随着Divi 5中的选项组预设的引入而发展。尽管元素预设长期以来可以轻松保存和重用完全样式的元素，但新的选项组预设可以通过允许您重复使用设计属性（如类型，间隔，间距，以及各种元素的效果）来增加灵活性。

这些内置的Divi功能一起，有助于重塑设计师如何达到一致性和效率，从而更快地设计迭代和更轻松的全局更新。在这篇文章中，我们将深入研究这些预设如何共同改变您的Divi 5设计工作流程！

基于预设的设计的两个支柱

在我们深入了解细节之前，重要的是要了解使Divi中基于预设设计的两个主要组成部分如此强大。通过结合元素预设和选项组预设，您可以创建一个更有效，一致和可扩展的设计过程。让我们看一下这两个支柱，以及它们如何一起工作以提高您的设计工作流程。

元素预设：可重复使用的设计软件包

元素预设为特定的分区元素保存整个设计配置。 Divi当前有4种不同的元素类型：模块，列，行和部分。当涉及模块时，元素预设也是模块类型（按钮，文本，CTA等）所独有的。当您应用元素预设时，所有关联的设置（例如排版，颜色，间距和效果）在应用时立即继承。元素预设的重点如下：

• 确保跨页面的视觉一致性
• 减少重复的样式任务
• 允许全局更新以进行更快的编辑

选项组预设：模块化设计控制

选项组预设专注于造型属性，例如版式，框阴影，边框和滚动效果。它们跨多个元素工作，使设计人员可以混合和匹配样式而不会与单一元素类型绑定。这意味着您可以在行和模块上使用相同的盒子阴影预设。使用选项组预设的主要好处是：

• 将共享样式应用于不同的元素
• 可用于高级自定义的堆叠
• 允许实时全球编辑而不影响各个模块

创建带有预设的结构化工作流程

现在，我们已经向您展示了Divi中的两个预设支柱，并简要解释了差异，让我们浏览一些创建结构化工作流程的技巧。

步骤1：使用选项组预设定义核心样式

首先建立网站的核心设计原则。这包括排版，颜色，按钮样式，间距等。这些基本元素对于在整个网站上保持一致性至关重要。

对于不断重复的设置，您可以选择将选项组预设设置为默认设置。一个很好的例子是对您的段落文本进行样式，并将其用作默认情况。

选项组预设具有通用性和可重复使用，使您可以在多个元素上应用这些设置。例如，一旦定义了文本阴影预设，就可以将该预设应用于网站上所有元素类型的标题。在此阶段，您将为其余的设计奠定基础，这些预设应作为您网站的基础。

步骤2：为特定模块创建元素预设

定义了核心样式后，下一步是为更具体的设计元素创建元素预设。尽管从理论上讲，遵循此顺序是最合乎逻辑的，但您经常会发现自己同时创建两者。元素预设是单个元素（部分，行，列，模块）的完整设计软件包，并允许您快速在整个站点上应用一致的样式。

使用预定义的选件组预设设计预定的CTA按钮，重点介绍按钮的版式，背景颜色和悬停效果。

将其作为元素预设供将来使用。构建其他重复的元素，例如证明模块，特征部分或定价表，并相应地样式。这些预制的模块中的每一个都可以保存为可以在需要时应用的元素预设。

设计时，请考虑保存在Divi库中包含这些预设的布局。这使您可以维护所有设计的概述，从而帮助您跟踪创建的每种预设样式。您不必担心从一开始就能获得完美的一切。当您构建网站时，您可能会在进行时调整这些元素。

步骤3：根据需要实施和调整

创建了选项组和元素预设后，您可以通过网站应用它们。如果您在不提前使用设计软件的情况下从头开始构建网站，则很可能在首页构建期间已经应用了预设。

您可能需要在工作时在元素级别进行调整。例如，如果您将预设应用于证明模块，但需要更改特定页面上的间距，则可以在不影响网站的其余部分的情况下这样做。这种灵活性使您可以随时进行调整，从而确保您的设计保持可扩展和适应性。

这里的关键是将预设视为创建灵活，凝聚力设计系统的工具，而不是必须准确遵循的刚性框架。在继续构建时，您可能需要调整样式，因此请务必在需要时修改预设并在元素级别上覆盖它们。继续完善您的设计，并充分利用Divi的实时编辑，以便进行这些调整。

步骤4：保持您的样式在Divi库中

要跟踪所有元素预设和布局，请将它们保存在可以保存在Divi库中的布局中。

随着网站的增长，您将能够调整保存的预设以改善设计。您始终能够在您正在处理的元素中修改预设。更新预设后，它将在整个网站中进行更新。

步骤5：迭代并改进

Divi预设系统的伟大一面是能够不断改进和完善设计的能力。当您构建更多页面和布局时，请重新访问您的选项组和元素预设以进行全局调整。

如果您决定更改主按钮颜色或更新所有标题的字体尺寸，则可以在应用该预设的所有实例中反映在地点范围内。

当您继续工作时，您将更深入地了解哪些元素可以很好地工作，哪些要素需要进一步调整。不要害怕修改预设，并利用Divi的灵活性来做出适合您不断发展的设计视觉的小更改。

通过不断迭代和改进预设，您将创建一个网站，不仅具有凝聚力，而且还适合将来的变化或设计趋势。请记住，预设系统是帮助简化流程的工具 - 从第一天开始，您必须严格遵守一组规则。

基于预设的工作流程的好处

现在，我们已经完成了使用Divi预设创建结构化工作流程的基础知识，让我们介绍这种方法带来的一些好处。

速度：使用现成的预设减少设计时间

借助Divi的预设系统，您可以大大减少设计网站所需的时间。只需创建和重用元素和选项组预设，而不是每次设计元素时从头开始。无论是CTA按钮，标题样式还是推荐模块，这些预设都可以单击单击使用完整的设计包。

例如，一旦您设计了带有选项组预设的边框样式，就可以在所有页面上始终如一地应用它，而无需重做工作。

元素预设通过允许您重复使用整个预先使用的模块来节省更多的时间。您只需单击即可部署一个完全设计的模块，以确保您的布局立即与您的视野匹配。

这种现成的设计方法使您可以更快地构建和专注于项目的创造性方面，而不是重复性化单个元素的重复任务。

一致性：在页面上保持统一样式

基于预设的工作流程的主要优点是一致性。通过使用元素和选项组预设，您可以确保网站上的每个页面都遵守相同的设计规则，从字体到间距到颜色。

将单个选项组预设设置为按钮默认值可确保您网站的字体大小和样式保持均匀，无论它们出现在哪里。这种一致性增强了您网站的视觉标识，并使其具有抛光，具有凝聚力的外观。

您可以维护一个统一的设计系统来改善用户体验并使您的网站显得更加专业，而不是处理不同页面的不一致样式。

可伸缩性：轻松扩展和更新站点设计

预设使您的网站随着扩展而扩展非常容易。无论您是添加新页面还是修改现有页面的设计，都可以快速有效地更新设计。如果需要添加新页面，只需应用现有元素和选项组预设，以确保新页面与网站其余的设计无缝符合。

需要进行全局更新吗？使用Divi的预设系统，您可以一次更改预设，并在应用预设的所有实例中自动反映它。例如，如果要更改网站上所有按钮的颜色，只需更新按钮预设，并且链接到该预设的每个按钮都会立即更新。

这种可扩展性意味着，随着网站的发展，您可以继续发展设计，而无需单独重新工作。无论您是添加博客，新产品还是全新的部分，您的设计都将保持凝聚力和一致。

灵活性：覆盖单个元素而不会破坏系统

尽管预设为您提供了结构化的Web设计方法，但它们仍然允许灵活性。如果您需要对特定元素进行调整，则可以覆盖该元素的预设，而不会影响其余的设计。

例如，如果您将元素预设应用于Blurb模块，但需要调整特定实例的图标大小或间距，则可以直接在模块上进行这些更改，而不会影响站点其他地方的其他实例。使用选项组预设，您可以调整单个设置，例如字体尺寸或按钮颜色，以便在整个网站上保持核心样式的同时。

这种灵活性是实现网站独特部分的自定义外观的关键。它允许详细的自定义，而无需破坏预设提供的一致性和结构。随着设计的发展，您可以根据需要继续微调元素，提供控制和轻松的平衡，使过程变得更加顺畅，更适应性。

在Divi 5中开始使用预设设计更智能

拥抱基于预设的工作流将重新定义如何使用Divi构建网站。通过利用元素预设和选项组预设，您可以创建视觉令人惊叹，高度适应性且易于管理的网站。选项组预设可在Divi 5中独家提供，因此现在是开始熟悉Divi 5接口的最佳时机！