WordPress divi主题

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

by | May 15, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

预览

在我们深入教程之前,让我们快速看一下结果。

转移设计风格

方法

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

第 1 部分:打开并排的两个页面

我们将从打开相邻的两个页面开始。 现有页面和包含我们要应用的设计样式的新页面。 我们将采用家具店布局包的登陆页面(我们想要应用于现有页面的设计风格)和托管公司布局包的登陆页面(我们想要更改的页面)。

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

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

WordPress divi主题

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

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

第 4 部分:进行手动更改(根据布局)和使用效率功能

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

第 5 部分:添加设计特征

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

第 1 部分:打开并排的两个页面

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

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

转移设计风格

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

也可以使用 Hosting Company Layout Pack 的登录页面创建另一个页面。 我们将用家具店布局包的登陆页面设计替换此布局的设计风格。

转移设计风格

fiverr建站WordPress程序员

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

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

打开英雄部分

一旦您在附近拥有两种布局,请继续打开托管公司登录页面的英雄部分设置。

转移设计风格

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

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

转移设计风格

转移设计风格

转移设计风格

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

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

独立站选品工具

转移设计风格

转移设计风格

转移设计风格

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

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

部分设置

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

转移设计风格

高质量外链购买

转移设计风格

行设置

对行做同样的事情。

转移设计风格

转移设计风格

标题文本模块

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

JasperAI 10000字免费额度试用

转移设计风格

转移设计风格

正文文本模块

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

转移设计风格

转移设计风格

WordPress备份工具updrafplus
扩展样式

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

转移设计风格

转移设计风格

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

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

转移设计风格

按钮设置

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

转移设计风格

转移设计风格

扩展按钮设置的样式

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

转移设计风格

转移设计风格

扩展间距样式

连同间距设置。

转移设计风格

转移设计风格

扩展框阴影的样式

盒子阴影设置也是如此。

转移设计风格

转移设计风格

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

分频器

我们还需要复制和粘贴 Divider Module 样式并将它们应用于托管公司登录页面上的分隔符。

转移设计风格

转移设计风格

扩展样式

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

转移设计风格

转移设计风格

第 4 部分:进行手动更改(根据布局)和使用效率功能

布局特定更改

查找和替换标题字体

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

转移设计风格

转移设计风格

查找和替换标题字体粗细

对字体粗细做同样的事情。 不要使用“中”,而是选择“浅”。

转移设计风格

转移设计风格

查找和替换圆角

我们还通过使用“查找和替换”并将“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 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请务必在下方评论区留言!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题