如何通过查找和替换快速更改布局包样式

更新完整布局包的设计听起来很简单，直到您意识到必须在五到六个不同页面上更改相同的样式。由于这些样式被用作静态值，即使是一个小更新，例如更改字体或调整部分填充，在逐页完成时也会耗时。

但是，如果您只需单击几下即可更新所有这些重复的样式，该怎么办？这正是在Divi 5中找到和替换的方法。无论您是交换字体，更换颜色还是调整间距，此功能都可以帮助您立即对整个布局进行更改。我们将向您展示如何使用它清理和重新安装整个布局包。

Divi 5中的发现和替换是什么

查找和替换是Divi 5中的功能，可让您快速在布局上快速更新重复的样式值。无论是字体，颜色代码，填充，甚至是阴影效果，您现在都可以一次更改该值并在多个元素上应用它。

那么，这实际上是如何工作的？它从视觉构建器中的任何模块开始。悬停在样式字段之上，例如文本颜色或字体大小，您会看到一个三点图标。单击（或右键单击字段），然后选择查找和替换。

这打开了一个面板，您可以在其中定义要替换的值，应该是什么值以及在何处应用更改。您可以将其集中在该模块上，将其扩展到整个部分，或者在整个页面上进行布局。

一旦体验了此工作流程，您将了解为什么它是一个有用的工具。您没有在数十个模块中狩猎以更改相同的颜色或字体，而是进行一个有针对性的更新，并在几秒钟内观看整个布局的涟漪。但是，要真正解锁查找和替换潜力，您需要查看它如何与设计变量一起工作，从而改变一切。

查找和替换如何有助于更快更新布局样式

我们将浏览两个方案：首先，基本查找和替换操作，然后使用设计变量（这是一个秘密武器）执行相同的任务。

在Divi 5中使用查找并替换

该过程很简单：从任何样式字段触发它，选择要替换的内容，然后跨多个模块应用更改。让我们以一个真实的例子漫步。

假设您想增加所有页面标题的字体尺寸。首先单击视觉构建器内部的任何标题模块。转到设置>设计>标题文本>标题文本H1字体大小。右键单击或悬停以查找查找和替换选项。

这为查找并替换了许多选项：

• （1）源元素：定义您要定位的设置，例如文本大小，颜色或填充。它是根据打开面板的位置自动选择的。
• （2）查找值：布局上使用的当前值。这可能是字体大小，例如30px，诸如＃000000之类的颜色代码或任何其他设计设置。这将自动添加。
• （3）替换值：您要应用的新值。 Divi搜索匹配值并用该值代替。
• （4）在位置找到并替换：选择应在哪里应用更改。您可以将其限制为单个模块，其部分或整个页面。
• （5）在元素类型中找到并替换：确定更改应影响哪个模块。您可以将其应用于所有模块，也可以仅将其应用于按钮，文本或Blurbs。
• （6）仅替换相同的字段：将其打开以更新与查找值完全匹配的字段。这有助于避免意外改变无关的元素。

例如，我们将字体尺寸从30px替换为流体夹（20px，4vw，50px）。我们选择了整个页面和所有元素，因为我们想更新页面上的所有标题。

单击查找并替换按钮，然后注意发生了什么。现在，所有具有30px字体尺寸的标题具有流体夹值（）值。

其他标题保持不变，因为Divi仅更新在所选范围内与完全匹配的值。无需手动编辑，甚至不需要对无关元素进行意外更改。这种准确性使其非常适合清理布局包中的默认样式。

了解有关Divi的发现并替换的所有内容

在查找和替换中使用设计变量

与设计变量配对时，查找和替换变得更加强大。您可以用另一个静态值替换静态值，而是可以从变量管理器中保存的变量替换它。这构建了一个一致的设计系统，以后易于更新。

让我们继续以相同的示例，更新所有标题字体大小。但是这次，我们没有用直接夹具值代替30px，而是将其替换为名为H3字体大小的变量。

首先，创建变量。从左侧栏中打开变量管理器，然后转到编号列。命名您的变量，分配值并保存。

这使得该变量在所有字体大小字段中可用。现在来了魔术：您可以直接在查找中使用并替换面板将保存的变量一次分配给所有标题字体尺寸。

打开查找并像以前更换面板。在替换值字段中，将悬停在输入上，然后单击变量管理器图标。选择您保存的变量，H3字体大小，然后继续使用相同的设置。

单击查找并更换以应用更改。现在，使用30px的所有标题现在都将引用H3字体大小变量而不是固定数字。

这是有趣的地方。以后需要调整此字体尺寸吗？转到变量管理器，打开H3字体大小变量，然后更改值。将夹具更新为夹具（24px，5vw，60px），并使用此变量自动更新。

无需重复查找和替换。通过一个更新，您的布局在各处调整了变量。

查找和替换和设计变量的这种组合使更新整个布局包如此有效，我们将在本教程中遵循此过程。您将一次定义设计变量，然后使用查找并替换以从静态值切换到所有页面上保存的变量。之后，更新变得毫不费力。

了解有关Divi设计变量的所有内容

准备将其付诸实践了吗？您需要Divi 5才能使用查找和替换和设计变量。建造者已完全重建，以提高性能和更智能的工作流程。

如何在布局包上替换样式

现在，您知道了如何找到和替换工作以及如何将其与设计变量配对，让我们将其在真实的布局包上进行操作。就我们的示例而言，我们将导入学习管理系统，其中包括多个页面，例如家庭，联系，课程着陆和定价。

每个页面都使用相同的字体，颜色和间距，但都用作静态值。在下面的教程中，我们将在所有页面上更新它们，将它们变成变量，然后将所有内容连接到中央设计系统。

1。审核布局的设计样式

在开始更换任何内容之前，请花几分钟来查看您的布局包。打开每个页面，然后快速列出重复的所有设计样式，例如字体尺寸，按钮颜色，文本间距，部分填充和边框样式。这是我在审查LMS布局后发现的：

• 字体尺寸： 30px用于所有H3标题，在多个页面上用于H2S的48px
• 字体： Poppins始终用于所有标题
• 主按钮：背景颜色是＃4449E0，带有白色文本
• 填充：大多数部分使用60px顶部和底部
• Blurb图标：图标大小设置为24px
• Blurb Borders：无边框应用于蓝图模块
• 部分背景：绿色＃47BE68出现在几乎每个页面的页脚部分

这些都是在每个模块内部作为静态值手动输入的。例如，Blurb模块使用＃4449E0用于图标颜色，宽度为24px。

一旦确定了类似的重复样式，您将确切知道该转换为设计变量。

此审核步骤为随后的一切创造了基础。它可以帮助您构建一种系统的方法，以保持布局一致且可维护。

2。保存设计变量

一旦您审核了布局并注意到重复样式，下一步就是创建您首选值的设计变量。这使您可以将硬编码样式变成可重复使用的令牌，从而使您的布局更易于以后更新。在节省了所有价值之后，我们将用我们的值替换当前的价值。

创建颜色变量

在前面的示例中，我发现Blurb图标使用颜色＃4449E0，但我想将其切换到我的主要品牌颜色＃6C012A。为此，我将创建一个颜色变量。

从左侧栏中转到变量管理器，然后打开颜色列。

向下滚动，然后单击+添加全局颜色选项。命名您的变量并输入值。单击“保存变量” ，然后完成。

创建一个数字变量

接下来，我想在Blurbs周围添加一个2PX边框，因此我需要一个数字变量。该过程相似，但在不同的列中。转到编号列。单击+添加全局号，命名您的变量，分配值并保存。

创建字体变量

我还想将所有标题字体更改为我的品牌字体Askhar。这需要一个字体变量。导航到字体列，创建新变量，分配名称，选择字体并保存。

完成了。现在，在整个布局的所有标题文本字段中，该字体现在都可以选择。

遵循相同的过程，以获取其余的审核发现，例如部分填充，其他标题尺寸或其他品牌颜色。布局中的每种重复样式可以（并且应该）成为变量。

这样，您就不必记住十六进制代码，字体名称或特定值。他们生活在您的变量管理器中，并在模块和页面上关注您。最重要的是，您可以使用查找并替换将其应用于整个布局，我们接下来要做。

3。使用查找并替换以应用变量

这是我们一直在等待的最有趣的部分。保存了我们的变量后，更改整个布局的样式非常简单。让我们看看如何。

改变图标的颜色

首先，让我们将图标的颜色更改为我们保存的主要品牌颜色变量。导航到Blurb的设置>设计>图像和图标。现在，将悬停在图标颜色选项上，然后单击三个点。选择查找和替换。

在查找和替换面板上，您需要做的就是悬停以找到变量管理器图标并选择您的变量。

就这样，所有图标都有新的颜色。通过将我的品牌颜色分配为静态价值而不是保存设计变量，我也可以以另一种方式做到这一点，但我们添加了一个额外的步骤来简化未来的更新。

如何？想象一下，您已经修改了所有布局页面，但想切换品牌颜色。无需对重新访问所有页面或通过模块进行模块而感到不知所措。由于您已经保存了品牌颜色设计变量，因此您只需要更改值即可更新网站。

更改所有标题字体

接下来，让我们将所有标题字体切换到我的品牌字体。访问任何标题的设置>设计>标题文本。悬停在标题字体上并打开查找和替换。在“替换值”列中，分配您的品牌标题字体变量。

更新所有Blurb模块的边框宽度

对于边框宽度更新，我将使用我的Blurb模块变量。该过程保持一致。导航到任何Blurb的边框设置，打开查找并替换，选择您的变量并申请。

在使用设计变量切换所有静态值之后，您将布局样式直接链接到变量。这意味着，如果您想更改品牌颜色，调整标题排版或调整边框宽度，则无需重做替换。只需更新变量，所有链接的元素将立即进行调整。

奖励步骤：创建并保存预设（可选）

虽然查找和替换和设计变量为您提供了坚实的基础，但仍有一个可选的步骤，该步骤甚至进一步建立在该系统上。预设让您打包完整的样式，并仅一键单击任何地方。

一旦您对基本变量感到满意，就可以将其深入一步，并创建预设以进行更精细的样式。这对于我们刚刚完成的核心过程不是必需的，但是如果您想要最高效率，值得探索。

假设您想为所有的混合物添加阴影效果，因此您为Blurb模块设计了完美的阴影样式。您可以将其保存为预设，而不是每次手动复制这种样式。

完毕。现在，此预设出现在每个模块的预设下拉列表中。您可以立即将其应用于其他模块；无需重做间距，边界，阴影或任何其他设计调整。

使预设更加强大的是它们的灵活性。您可以为不同的设置组合创建预设组，以提供更好的工作流优化和颗粒状控制。例如，您可能拥有一个预设组，用于具有不同的灯，主灯，主灯和主灯轮廓等变化的按钮样式，每个轮廓都包含背景，边界和间距的不同组合。

这样，您可以保持一致性，同时为不同的上下文提供选项。当您的布局具有使用相同样式的10多个模块时，预设特别有用。而不是依靠内存或手动编辑，而是预先将所有内容标准化。

了解有关Divi的选项组预设的所有内容

应用了所有保存的设计变量后，以下是版本之前和之后的外观：

4。将相同的过程应用于其他页面

一旦设置了设计变量和预设，更新布局包的其余部分就会更快。

以课程着陆页为例。您将在此处看到相同的静态值，标题字体，按钮颜色，贴合边框，图标颜色等。同样，而不是手动调整每个设置，而是打开相关模块，触发查找和替换，然后分配匹配的设计变量。

在所有页面上重复每个重复样式的过程。完成后，整个布局包将连接到变量和预设，从而使未来的编辑几乎毫不费力。

使用Divi的查找和替换和设计变量更新的课程着陆页

用查找并替换在几秒钟内进行布局范围的编辑

设置设计变量并学习在Divi 5中的查找和替换可能需要一些前期的时间。但是，一旦您以一个布局包进行了操作，您将永远不想手动单击数十个模块。

我们将整个布局包从分散的静态值转换为连接的设计系统。我们花了几分钟的时间与Find＆replact花费了几个小时，以旧的方式（按模块）逐页进行模块。

这不仅仅是节省此项目的时间。您正在建立一个设计系统，该系统将使未来的Divi项目更快，更一致。