如何使用 Divi 的效率特性将新的设计风格转移到另一个页面

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的家具店布局包将新的设计风格转移到另一个页面。 随着所有新布局包的出现，您可能希望使用新布局包的样式更改现有页面的样式。 除了替换整个页面，您还可以使用 Divi 的效率功能来转移设计风格。 Visual Builder 中包含的最新选项之一是跨页复制和粘贴功能。 这将允许您在整个布局中进行许多更改，而无需触及设计元素的设置。

但当然，每个布局都是独一无二的，这意味着您还必须应用一些手动更改。 好消息是，您可以一键将这些手动设置扩展到页面上的类似元素。 这篇文章希望能帮助你在转移设计风格时遵循一定的结构。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下结果。

方法

页面结构各不相同，这就是为什么很难一键完全转换设计风格的原因。 但是使用 Divi，您可以使用效率功能来加快流程。 我们将结合跨页复制粘贴功能、扩展样式功能和查找和替换功能，以节省将设计样式转移到现有页面的时间，而无需更改页面结构。

第 1 部分：打开彼此相邻的两个页面

我们将首先打开彼此相邻的两页。 现有页面和包含我们要应用的设计风格的新页面。 我们将采用家具店布局包的登陆页面（我们想要应用到现有页面的设计风格）和托管公司布局包的登陆页面（我们想要改变的页面）。

第 2 部分：重置某些部分设置

第二部分将是关于重置某些部分设置。 您需要重置的设置因布局而异，但通常包括背景设置和分隔线设置。

第 3 部分：为英雄部分使用 Divi 的跨页复制粘贴和扩展样式功能

然后，我们可以开始使用 Divi 的跨页复制粘贴功能来开始更改内容。 自然而然的事情是从英雄部分开始。 我们将复制新设计风格的设置并将它们粘贴到现有页面上，将英雄部分中的每个设计元素更改为新设计风格。 之后，我们会将这些样式扩展到页面上的类似元素。

第 4 部分：进行手动更改（根据布局）和使用效率功能

如前所述，每个布局都是独一无二的。 这就是为什么对现有页面进行手动更改也是必要的。 进行少量更改后，您可以扩展样式或使用查找和替换将其应用于页面上的类似元素。

第 5 部分：添加设计特征

最后但并非最不重要的一点是，您还可以向现有页面添加某些设计特征。

第 1 部分：打开彼此相邻的两个页面

使用家具店布局包的登陆页面使用布局创建新页面

现在我们已经完成了这篇文章的方法部分，让我们开始使用 Divi！ 使用家具店布局包的登录页面添加新页面。

使用托管公司布局包的登陆页面创建新页面

也使用托管公司布局包的登录页面创建另一个页面。 我们将用家具店布局包的登录页面设计替换此布局的设计风格。

第 2 部分：重置某些部分设置

重置托管公司登陆页面的部分特定设置

打开英雄部分

一旦您接近两个布局，请继续打开托管公司登录页面的英雄部分设置。

重置部分背景并扩展到所有部分

转到背景设置并通过右键单击并单击重置背景来重置选项。 完成后，您可以将这些背景样式扩展到页面上的所有部分，以确保页面上没有任何部分包含背景元素。

重置分隔线并扩展到所有部分

对分区分隔符执行相同的操作，以确保页面上的所有分区分隔符都消失了。

第 3 部分：为英雄部分使用 Divi 的跨页复制粘贴和扩展样式功能

跨页复制粘贴英雄部分元素

部分设置

是时候开始使用跨页复制粘贴选项了！ 我们将修改英雄部分中的每个设计元素。 首先复制家具店登录页面上的英雄部分样式。 然后，返回托管公司登录页面并粘贴复制的部分样式。

行设置

对行做同样的事情。

标题文本模块

复制标题文本模块的模块样式，并将它们应用于托管公司登录页面的标题。

正文模块

接下来打开描述文本模块并复制文本样式。 完成后，将它们应用于托管公司页面上的文本模块。

扩展样式

应用新的文本样式后，继续将这些样式扩展到整个页面的所有模块。

在需要的地方将文本方向改回居中

您会注意到左侧文本方向将应用于整个页面的所有设计元素。 您可以保持这种方式或手动更改文本方向。

按钮设置

您需要应用新模块样式的英雄​​部分中的最后一个模块是按钮模块。

扩展按钮设置的样式

我们将扩展特定的按钮设置，而不是扩展整个按钮模块样式。

扩展间距样式

随着间距设置。

扩展框阴影的样式

还有框阴影设置。

复制粘贴剩余元素一次 + 扩展样式

分隔线

我们还需要复制并粘贴分隔线模块样式，并使它们应用于托管公司登录页面上的分隔线。

扩展样式

同样，在整个页面中扩展此模块的样式。

第 4 部分：进行手动更改（根据布局）和使用效率功能

布局特定更改

查找和替换标题字体

是时候开始进行一些手动更改了！ 我们要做的第一件事是匹配字体。 打开页面上的文本模块，找到整个页面使用的 Rubik 字体。 然后，单击“查找和替换”并将字体替换为 Montserrat。

查找和替换标题字体粗细

对字体粗细做同样的事情。 选择 Light 而不是使用 Medium。

查找和替换圆角

我们还通过使用“查找和替换”并将“0px”应用于整个页面的每个角来移除整个页面的圆角边框。

在部分中重置 CTA 背景设置和扩展样式

继续在页面上找到号召性用语模块并重置第一个模块的后台设置。 然后，将这些样式扩展到该部分中的所有号召性用语。

在部分中查找和替换 CTA 背景颜色

完成后，将出现默认背景颜色。 在整个部分中查找并替换此颜色并将其更改为“#1a2545”。

在部分中查找和替换 CTA 文本颜色

在整个部分中也将文本颜色替换为“浅色”。

更改定价表按钮设置

然后，转到页面上的定价表并更改按钮设置：

• 按钮背景颜色：#ef6f49
• 按钮边框宽度：8px
• 按钮边框颜色：#ef6f49
• 按钮边框半径：0px
• 按钮字母间距：2px（默认），1px（悬停）
• 按钮字体：蒙特塞拉特
• 字体粗细：半粗体
• 字体样式：大写
• 按钮对齐：左

扩展定价表和 CTA 模块的样式

将新按钮设置扩展到整个页面的所有定价表和号召性用语模块。

第 5 部分：添加设计特征

部分背景颜色 #1

在本教程的最后一部分，我们将手动添加一些设计特征。 这包括但不限于背景设置。 打开下面打印屏幕中标记的部分并更改背景颜色。

• 背景颜色：#f7f3ec

部分背景颜色 #2

对下面的部分做同样的事情。

• 背景颜色：#f7f3ec

部分渐变背景 #1

然后，在下面的打印屏幕中找到该部分并添加渐变背景。

• 颜色 1：#ffffff
• 颜色 2：#1a2545
• 梯度方向：90度
• 起始位置：55%
• 结束位置：55%

部分渐变背景 #2

为以下部分使用另一个渐变背景：

• 颜色 1：rgba(210,218,228,0.38)
• 颜色 2：#ffffff
• 梯度方向：90度
• 起始位置：45%
• 结束位置：45%

部分渐变背景 #3

最后但并非最不重要的一点是，还要为页面的最后一部分添加线性渐变背景。

• 颜色 1：#ffffff
• 颜色 2：#f7f3ec
• 起始位置：40%
• 结束位置：40%

预览

现在我们已经完成了所有步骤，让我们最后看看结果。

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的效率功能转移布局的设计风格。 本教程利用了作为新 Visual Builder 一部分的新跨页复制粘贴功能。 本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议，请务必在下面留下评论部分！