WordPress divi主题

如何使用 Divi 的新柱结构创建令人惊叹的部分过渡

| 5月 19, 2022 | Divi主题使用教程 | 0 条评论

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

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的新柱结构来创建令人惊叹的部分过渡。 我们将不同的列结构与 Divi 的一些内置选项相结合,将我们的页面设计提升到一个新的水平。

让我们开始吧!

预览

让我们首先看一下我们将仅使用 Divi 的内置选项从头开始创建的三个不同示例。 这些示例在较小的屏幕尺寸上看起来同样出色。

部分过渡

使用 Divi 的 Makeup Artist Layout Pack 的登陆页面

我们将使用 Divi’s Makeup Artist Layout Pack 的登录页面。 如果您想查看布局包,请转到以下博客文章。 尽管我们使用特定的布局包来演示本教程,但您也可以轻松地在其他布局上使用这些技术。

部分过渡#1

部分过渡

添加新部分

定位

使用 Divi 的 Visual Builder 打开 Makeup Artist Layout Pack 的登录页面。 然后,在 hero 部分的正下方添加一个新的常规部分:

部分过渡

间距

接下来删除部分的所有默认间距:

WordPress divi主题
  • 顶部填充:0px
  • 底部填充:0px

部分过渡

添加新行

立柱结构

继续向具有以下列结构的部分添加新行:

部分过渡

浆纱

也增加行的宽度:

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:0

部分过渡

间距

接下来删除默认的顶部和底部填充:

  • 顶部填充:0px
  • 底部填充:0px

部分过渡

筛选

要使行更有活力,请增加过滤器设置中的饱和度:

部分过渡

将分隔模块 #1 添加到第 1 列

隐藏分隔线

为了在我们的设计中创建第一个正方形,我们将在第 1 列添加一个分隔模块。禁用“显示分隔线”选项。

fiverr建站WordPress程序员

部分过渡

渐变背景

接下来,为 Divider Module 添加渐变背景:

  • 颜色1:rgba(255,255,255,0)
  • 颜色2:rgba(176,182,219,0.34)

部分过渡

间距

要创建正方形,请更改间距值:

  • 上边距:-120px
  • 上边距:120px
  • 底部填充:120px

部分过渡

独立站选品工具

克隆分隔模块并放入第 2 列

修改完 DIvider 模块后,克隆它并将其放在第二列中。

部分过渡

更改渐变背景

需要对此副本进行一些更改,从渐变背景开始:

  • 颜色1:rgba(228,237,234,0.58)
  • 颜色 2:rgba(255,255,255,0)

部分过渡

更改间距

更改间距设置。 这将增加此分隔模块与第一列中的分隔模块之间的距离。

高质量外链购买
  • 上边距:142px
  • 上边距:120px
  • 底部填充:120px

部分过渡

克隆分隔模块 #1 两次并放入第 3 列和第 5 列

克隆紫色 Divider Module 两次,并将副本放在第 3 列和第 5 列中。

部分过渡

克隆分隔模块 #2 并放入第 4 列

克隆绿色的 Divider Module 并将其放在第 4 列中。

部分过渡

JasperAI 10000字免费额度试用

在平板电脑和手机的第 3、4 和 5 列中隐藏分隔模块

在第 3 列中打开分频器模块

当然,我们希望这些部分过渡在较小的屏幕尺寸上看起来同样出色。 这就是为什么我们要隐藏一些我们使用过的模块。 首先打开第 3 列中分频器模块的设置。

隐藏在平板电脑和手机上

转到高级选项卡并禁用手机和平板电脑上的模块。

部分过渡

复制可见性样式

我们还需要隐藏第 4 列和第 5 列中的分隔线。 要加快此过程,请复制第 3 列中分隔符的可见性设置:

部分过渡

WordPress备份工具updrafplus

粘贴可见性样式

并将它们粘贴到第 4 列和第 5 列的 Divider Modules 中。

部分过渡

部分过渡#2

部分过渡

添加新部分

定位

要创建第二个部分过渡,请在此处添加一个新部分:

部分过渡

顶部分隔线

打开部分设置并添加以下顶部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#ffffff
  • 分隔线高度:236px
  • 分频器翻转:垂直
  • 分隔线排列:在章节内容之上

部分过渡

底部分隔线

同样,还要添加一个底部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#ffffff
  • 分隔线高度:236px
  • 分隔线排列:在章节内容之上

部分过渡

间距

接下来更改间距设置:

  • 上边距:100px
  • 下边距:100px
  • 顶部填充:0px
  • 底部填充:0px

部分过渡

添加新行

立柱结构

是时候向新部分添加一行了! 选择以下列结构:

部分过渡

浆纱

在不添加任何模块的情况下,打开行设置并更改宽度:

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

部分过渡

间距

删除所有默认的顶部和底部填充:

  • 顶部填充:0px
  • 底部填充:0px

部分过渡

将分隔模块 #1 添加到第 1 列

背景颜色

接下来,将分隔模块添加到第一列。 打开其设置并添加背景颜色:

  • 背景颜色:rgba(176,182,219,0.34)

部分过渡

分隔线颜色

更改分隔线颜色:

部分过渡

分隔线样式

然后,转到样式设置并使用以下分隔线样式:

部分过渡

分压器重量

分隔器的重量应如下所示:

部分过渡

间距

最后但同样重要的是,使用自定义填充增加 Divider Module 的大小:

  • 上边距:50px
  • 底部填充:50px

部分过渡

克隆分隔模块并放入第 2 列

完成第一列中的 Divider Module 后,克隆它并将副本放在第二列中。

部分过渡

更改背景颜色

相应地更改此副本的背景颜色:

  • 背景颜色:#e4edea

部分过渡

克隆分隔模块 #1 并放入第 3 列和第 5 列

继续克隆紫色 Divider Module 两次,并将副本放在第 3 列和第 5 列中。

部分过渡

克隆分隔模块 #2 并放入第 4 列

克隆绿色的 Divider Module 并将副本放在第 4 列中。

部分过渡

在平板电脑和手机的第 3、4 和 5 列中隐藏分隔模块

隐藏在平板电脑和手机上

我们将做与第一部分转换示例相同的事情。 在第 3 列打开 Divider Module 的设置并将其隐藏在手机和平​​板电脑上。

部分过渡

复制可见性样式

复制这些可见性样式。

部分过渡

粘贴可见性样式

并将它们粘贴到第 4 列和第 5 列的 Divider Modules 中。

部分过渡

部分过渡#3

部分过渡

添加新部分

定位

要将最后一个部分转换添加到您的页面,请在此处添加一个新部分:

部分过渡

顶部分隔线

打开部分设置并添加顶部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#ffffff
  • 分隔线高度:150px
  • 分隔线排列:在章节内容之上

部分过渡

底部分隔线

接下来添加一个底部:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#ffffff
  • 分隔线高度:150px
  • 分频器翻转:垂直
  • 分隔线排列:在章节内容之上

部分过渡

间距

然后,转到间距设置并进行一些更改:

  • 上边距:100px
  • 下边距:100px
  • 顶部填充:0px
  • 底部填充:0px

部分过渡

添加新行

立柱结构

我们在本节中需要的行具有以下列结构:

部分过渡

浆纱

在不添加任何模块的情况下,打开行设置并增加行的宽度:

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

部分过渡

间距

接下来删除所有默认的顶部和底部填充:

  • 顶部填充:0px
  • 底部填充:0px

部分过渡

将分隔模块 #1 添加到第 1 列

隐藏分隔线

继续在第一列添加一个分隔模块。 禁用“显示分隔线”选项。

部分过渡

背景颜色

改为为分隔线添加背景颜色:

  • 背景颜色:rgba(176,182,219,0.34)

部分过渡

间距

通过使用顶部和底部填充来增加模块的大小:

  • 上边距:100px
  • 底部填充:100px

部分过渡

克隆分隔模块并放入第 2 列

更改背景颜色

克隆第一列中的分频器模块,并将副本放在第二列中。 打开其设置并更改背景颜色:

  • 背景颜色:rgba(228,237,234,0.58)

部分过渡

克隆分隔模块 #1 并放入第 3 列和第 5 列

将紫色 Divider Module 克隆两次,并将其放在第 3 列和第 5 列中。

部分过渡

克隆分隔模块 #2 并放入第 4 列

克隆绿色的 Divider Module 并将副本放在第 4 列中。

部分过渡

在平板电脑和手机的第 3、4 和 5 列中隐藏分隔模块

隐藏在平板电脑和手机上

在平板电脑和手机的第 3 列中隐藏分频器模块。

部分过渡

复制可见性样式

复制这些可见性样式。

部分过渡

粘贴可见性样式

并将它们粘贴到第 4 列和第 5 列的 Divider Module 上,您就完成了!

部分过渡

预览

现在我们已经完成了所有步骤,让我们最后看一下我们创建的三个不同示例。

部分过渡

最后的想法

在这篇用例博客文章中,我们向您展示了如何使用 Divi 的新列结构来创建令人惊叹的部分过渡。 本教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些东西。 如果您有任何疑问,请确保在下面的评论部分发表评论!

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