使用Divi 5更新页面设计的最快方法

Divi 5引入了一些智能新工具，可帮助您更快地工作和更自由地设计。但是，触手可及的功率如此之多，很容易感觉不确定从哪里开始，尤其是在更新现有布局时。

您可能已经知道如何调整间距，调整颜色和清理布局，因此这篇文章与重新学习基础有关。这是关于使用Divi 5进行更快的速度。在下面的步骤中，我们浏览您可以在任何现有页面上遵循的实用更新工作流程。而且，如果最近的变化感到压倒性，请从这里开始。您会清楚和自信。

使用Divi 5更新页面设计的8个步骤

对于本教程，我们正在使用Divi Layout Pack库中的业务简历着陆页。

订阅我们的YouTube频道

我们将使用Divi 5的新工具（例如查找和替换，设计变量并扩展属性）来更新页面，以加快工作流程并减少重复性编辑。让我们开始。

1。优化仪表板以进行无干扰编辑

当您更新布局时，即使是轻微的中断也可能会破坏您的注意力。您可能会在各个部分之间跳跃，反复打开设置，并失去您关闭位置的踪迹。这类延迟迅速加起来，尤其是在更长或更复杂的页面上。

Divi 5可以通过更灵活的编辑环境来减少这种摩擦。您可以停靠面板以保持关键设置可见，在选项卡中打开多个模块，并使用图层面板在不无尽滚动的情况下导航布局。您可以在移动时保持所有内容和访问所有内容，而不是单击模块。

这些图层面板为您提供了有关布局的完整结构概述，因此您只需单击即可立即跳到任何部分，行或模块。它对于不滚动而跳过大页面特别有用。

早些时候，工作流程通常意味着打开一个模块，保存它，再次滚动，打开下一个模块并重复该周期。 Divi 5跳过所有这些。您可以背对背打开几个模块；每个在编辑面板中都可以看到作为标签。这使得在不反复关闭和重新打开元素设置的情况下更轻松地比较元素之间的设置或切换。

可能需要一些调整才能习惯新的工作流程。由于面板的行为不同，因此在模块之间切换不会立即感觉到第二天性。但是，给它一些练习，这些小的变化开始加起来。

当您按照下面的步骤操作时，尝试使用不同的面板工作，将几个停靠，将夫妇堆放在标签中，或保持图层面板打开。您会开始感觉什么最适合您的流程。

2。首先设置您的全局设计变量

当您管理完整的布局时，您想要的最后一件事就是重复自己。但这正是每个模块内手动设置每个样式时会发生的情况。它起初可能起作用，但是随着时间的流逝，您的页面变成了断开选择的拼布。最终，总是会错过一些东西。

设计变量可帮助您避免这种情况。它们为您提供了定义设计语言的中心地点。您定义了字体，颜色，间距，图像，URL或链接的可重复使用值。应用后，这些值将保持与使用它们的每个模块的链接。

这是一个简单的例子。假设您希望所有标题都使用LATO字体。您没有在每个模块中选择LATO，而是创建一个字体变量。给它一个名称，选择LATO，然后保存。与该变量联系的任何标题现在都将保持同步。

如果您想稍后切换到其他字体，只需更新变量即可。每个连接的模块将自动反映更改。

这只是一个用例。您还可以设置变量，以进行一致的截面填充，按钮样式，背景颜色或您重复使用的其他任何内容。如果感觉太压倒性的话，您无需立即定义所有内容。从您知道的样式开始，然后从那里扩展设计系统。

3。用设计变量替换静态值

有时布局具有硬编码样式，因此手动更新它们会使过程不一致。这就是为什么我们用刚定义的全局变量替换静态值的原因。

您无需单独寻找它们。 Divi的查找和替换工具可以轻松地单击几下将变量交换为变量。假设您的标题都使用手动选择的字体。打开任何标题模块，单击字体字段，然后选择查找和替换。

在替换值面板中，将悬停在字段上并打开变量管理器。选择您的所有标题字体变量并确认更改。

您会立即看到魔术：该字体的每个实例都会立即替换。这种相同的方法适用于颜色，间距，按钮样式以及您为变量设置的任何东西。

而且您不必一次更改所有内容。启动小，选择样式，您将重复使用最多，例如部分填充或按钮背景，然后首先切换。随着您的使用，您的布局从手动编辑的拼布转移到了完全连接的系统。当该系统到位时，默认情况下，每个将来的变化都会变得更加容易，更快且更加一致。

4。使用扩展属性在几秒钟内应用更新

一旦您的全局值到位，下一步就是完善。您经常会发现自己对各个部分进行了小调整，并希望您可以将这些更改带到其余的布局，而无需重做工作。扩展属性可能。

它使您可以立即从一个元素中复制样式，内容或预设，并将其应用于其他元素。即使模块不同类型，它也起作用。例如，如果您为一个图像设计了自定义边框和阴影，则可以将其用作本节中每个图像的参考。

右键单击样式图像，然后选择“扩展属性”。

当扩展面板打开时，将其停靠在侧面，因为您可能会返回它。在下拉列表中，将范围设置为父部分，将元素类型设置为图像，然后确认。

该操作将您的更新应用于该部分的每个图像，而无需单独触摸它们。

这就是扩展属性真正赢得其位置的地方。它需要一系列手动，重复的编辑，并将其变成一个一致的举动。您可以将其用于具有多个类似列或模块的部分，例如图像库或Blurbs。这是将抛光剂带入设计的最快方法，而无需在每个模块上燃烧时间。

5。将可重复使用的编辑保存为选项组预设

当您完善布局时，您可能会调整间距，边框或背景颜色，以使事情变得正确。与其每次重复这些调整，不如将其保存为选项组预设。

假设您已经定制了列的间距，边框和背景。您喜欢它的外观，并希望在其他地方重复使用它。打开该列的设置，滚动到您修改的样式组（例如间距或边框），然后单击预设图标以保存它。

要将预设应用于其他列，请右键单击原件，然后选择“扩展属性”>“扩展列预设” 。在面板中，将范围设置为父行，选择列作为元素类型，然后命中扩展属性。

现在，一个预设适用于该行中的每一列。它对于具有重复元素（例如定价表，混乱，推荐书）或您想要无需手动努力的任何地方等任何地方的布局特别有用。而且，由于预设保存到布局包中，因此您也可以将它们在其他页面上使用。

6。使用复制/粘贴进行快速一次性更改

一旦将样式扩展到完整的部分或行，您可能仍然需要进行小规模的针对性调整。也许只有一列或模块需要略有不同的外观。而不是再次扩展预设，而是使用属性管理功能。

例如，如果您已经自定义了列的边框和阴影，并且只需一个或两个匹配的另一个或两个匹配，请右键单击“样式”列，然后选择复制项目样式。然后，右键单击您要更新的列并选择粘贴项目样式。

这不会覆盖其他设置并立即工作，这是您想要保持灵活性的情况的理想选择。您可以从几乎任何元素中复制和粘贴样式，并确切确定要复制的内容，无论是间距，颜色，边界还是其他设计调整。

扩展属性处理批量编辑，然后复制/粘贴处理细节。它非常适合微调一个布局，但仍需要一些个人风格。

7.在自定义断点之间切换以完善响应视图

确保您的桌面布局在每个屏幕尺寸上看起来都很好。 Divi 5的可自定义断点可以通过单击单击平板电脑，电话，甚至自定义的屏幕宽度之间的切换，从而简化此功能。设备图标就在构建器内部，因此您可以快速预览部分在较小的屏幕上的行为。

如果需要，您还可以定义自己的断点以获得更多控制。

这是检查间距，字体尺寸和图像对齐的最佳时机。这只需要几分钟，但以后可以使您摆脱更大的布局问题，尤其是在内容繁重或以转换为中心的页面上。而且您无需更改工作流程。 Divi工具在响应式视图中同样顺利进行，因此进行调整，预览布局并继续前进。

8。更新您的设计变量以立即刷新整个布局

之前，我们设置了您的全局设计变量，并使用查找和替换替换静态值。现在，您的布局已完全连接到集中设计系统。

设计变量使网站范围的更新非常容易。假设您的品牌更新其版式或主要颜色。您只需更新保存的变量，而不是挖掘每个模块以重复进行相同的更改。一个更改在您的整个布局中立即适用。

要看到这一点，请查看此并排比较。布局结构保持不变，但是其背后的过程变得更加简单，更快。

现在考虑一下这是如何扩展的。想象一下您的整个网站，每个页面和部分，建立在同一系统上。您将不再为每次更改追溯步骤。对变量进行调整会更新所有内容。您是通过通过变量管理器管理价值来管理整个品牌的。

这种灵活性正是Divi 5的设计。这不仅是关于更快的编辑，而且还涉及减少重复，提高准确性并以更少的精力为您提供更多控制权。

自定义您的Divi 5工作流程

到目前为止，您已经看到了设计变量，扩展属性和选项组预设之类的工具如何重塑您如何更新布局。但是没有一种使用它们的方法。

本演练只是该过程的一个版本。您可以按照不同的顺序遵循步骤，跳过一些，或将它们融入自己的例行程序中。这完全可以，因为目标不是遵循公式，而是要找到一种自然而然的节奏并适合您喜欢工作的方式。

实验一点。您使用这些工具的越多，就越开始认识到最适合您的流程的方法。如果情况感觉更顺畅，您的更新速度更快，并且您的设计保持一致，那是您正常工作的迹象。

而且，如果您想知道这些工具是否可以随着工作流程的发展而跟上，它们绝对可以是因为…

Divi 5旨在适应您的工作方式

这就是我们涵盖的每个功能背后的想法。无论您是想预先定义每种样式还是在构建时进行更改，工具都适合您喜欢的工作方式。

您可以快速移动或花点时间。从空白页开始或完善现有布局。构建器不会迫使您进入僵化的工作流程。它旨在减少忙碌，跳过重复的编辑，并帮助您专注于实际重要的事情：以清晰，速度和自信心进行设计。

最终，这是关于建立一个感觉像您自己的过程，并且随着项目和想法的增长而跟上您。您准备好构建与您一起改进的设计工作流程吗？