WordPress divi主题

如何使用 Divi 的变换选项旋转部分分隔线以创建令人惊叹的侧边框

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

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

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

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的新变换选项和 Calligrapher Layout Pack 旋转部分分隔线以创建令人惊叹的侧边框。 这是调整您正在处理的任何页面设计的好方法,而无需使用图像编辑软件创建自定义插图。 我们希望这个用例教程能启发您结合 Divi 的分区分隔符和转换选项来创建定制和个性化的网页设计。

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下我们将在不同屏幕尺寸下重新创建的四个不同示例。

示例 #1

侧边

示例 #2

侧边

示例#3

侧边

示例 #4

侧边

将书法家登录页面上传到新页面

我们将在 Calligrapher Layout Pack 的登陆页面布局中添加部分分隔器侧边框,您可以在预制布局中找到该布局。 继续并在您的网站上创建一个新页面以开始使用! 虽然我们正在使用这种特定的布局,但请注意,您可以将这种技术用于您正在处理的任何类型的网站。

侧边

WordPress divi主题

重新创建示例 #1

侧边

在英雄部分下方添加新部分

让我们开始重新创建第一个效果! 在新页面的英雄部分正下方添加一个新的常规部分。 我们仅将此部分用于其容器和部分分隔符。 这意味着我们不会向其中添加任何行或模块。 事实上,我们将通过删除本文后面的所有默认填充来确保该部分完全不占用垂直空间。 唯一剩下的就是节容器的宽度和我们添加的节分隔符。

侧边

背景颜色

添加部分后,打开部分设置并将背景更改为完全透明的颜色。

  • 背景颜色:rgba(255,255,255,0)

侧边

底部分隔线

继续转到设计选项卡并使用以下设置将底部分隔线添加到您的部分:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#f2264c
  • 分隔线高度:700px(台式机)、300px(平板电脑)、200px(手机)
  • 分隔线排列:在章节内容之上

侧边

间距

继续进行间距设置。 在这里,我们要做两件事。 首先是删除所有自定义的顶部和底部填充。 第二件事是在桌面上缩小节容器的大小并在移动设备上增加它。

  • 左边距:11vw(桌面)、0vw(平板电脑)、-35vw(手机)
  • 右边距:11vw(桌面)、0vw(平板电脑)、-35vw(手机)
  • 顶部填充:0px
  • 底部填充:0px

侧边

变换旋转

完成自定义间距设置后,转到变换设置并旋转整个部分。 您现在将拥有一个垂直部分,而不是水平部分分隔线。

fiverr建站WordPress程序员

侧边

转换翻译

旋转部分分隔线后,您需要将部分重新定位到页面的左侧。 您会注意到我们也在使用宽度视口单元,以确保所有内容在所有屏幕尺寸上都保持响应。

  • 右:-40vw(台式机)、-54vw(平板电脑)、-86vw(手机)
  • 底部:-52vw

侧边

重新创建示例 #2

侧边

在英雄部分下方添加新部分

继续第二个例子! 同样,在 hero 部分的正下方添加一个新的常规部分。

独立站选品工具

侧边

背景颜色

打开部分设置并将背景颜色更改为完全透明的颜色。

  • 背景颜色:rgba(255,255,255,0)

侧边

底部分隔线

转到分隔线设置并使用以下设置添加底部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#ffdc00
  • 分隔线高度:700px(桌面),300px(平板电脑和手机)
  • 分频器翻转:垂直
  • 分隔线排列:在节节内容之上

侧边

高质量外链购买

间距

然后,转到间距设置并从删除该部分的顶部和底部填充开始。 您需要在间距设置中做的第二件事是在桌面上减小节容器的大小,并在移动设备上使用自定义边距值增加它。

  • 左边距:11vw(桌面)、0vw(平板电脑)、-35vw(手机)
  • 右:11vw(台式机)、0vw(平板电脑)、-35vw(手机)
  • 顶部填充:0px
  • 底部填充:0px

侧边

变换旋转

继续转到变换设置并旋转该部分。

侧边

转换翻译

最后但同样重要的是,通过添加一些自定义转换转换值来重新定位该部分。

JasperAI 10000字免费额度试用
  • 右:-40vw(台式机)、-54vw(平板电脑)、-86vw(手机)
  • 底部:50vw

侧边

重新创建示例 #3

侧边

将新部分添加到页面底部

继续第三个例子! 向下滚动页面并在底部添加一个新的常规部分。

侧边

背景颜色

打开部分设置并添加完全透明的背景颜色。

WordPress备份工具updrafplus
  • 背景颜色:rgba(255,255,255,0)

侧边

底部分隔线

转到设计选项卡并使用以下设置添加底部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#2bffe9
  • 分隔线高度:700px(桌面),300px(平板电脑和手机)
  • 分隔线排列:在章节内容之上

侧边

间距

继续进行间距设置并添加一些自定义边距和填充值。

  • 左边距:27vw
  • 右边距:27vw
  • 顶部填充:0px
  • 底部填充:0px

侧边

变换旋转

继续将部分旋转 270 度。

侧边

转换翻译

最后但并非最不重要的一点是,通过更改转换转换输入来更改部分的位置。

  • 右:-39.7vw
  • 底部:50vw

侧边

在上面的部分添加更高的 Z 索引

要切断部分分隔线的一部分,我们将通过增加上一部分的可见性设置中的 Z 索引来确保上一部分放置在两个部分的顶部。

侧边

侧边

重新创建示例 #4

侧边

将新部分添加到页面底部

继续下一个也是最后一个示例! 同样,在页面底部添加一个常规部分。

侧边

背景颜色

打开部分设置并添加透明背景颜色。

  • 背景颜色:rgba(255,255,255,0)

侧边

顶部分隔线

接下来转到设计选项卡并使用以下设置添加顶部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#28b0ef
  • 分隔线高度:700px(桌面),300px(平板电脑和手机)
  • 分隔线排列:在部分内容下方

侧边

底部分隔线

还要添加一个底部分隔线。

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#28b0ef
  • 分隔线高度:700px(桌面),300px(平板电脑和手机)
  • 分隔线排列:在章节内容之上

侧边

间距

继续更改该部分的间距设置中的边距和填充值。

  • 左:23vw
  • 右:23vw
  • 顶部填充:0px
  • 底部填充:0px

侧边

变换旋转

转到变换设置并相应地旋转该部分:

侧边

转换翻译

使用以下转换转换值将该部分放置在页面的左侧:

  • 右:-36vw(台式机)、-46vw(平板电脑)、-53vw(手机)
  • 底部:-44vw

侧边

删除文本模块渐变背景

最后但同样重要的是,删除下面打印屏幕中标记的文本模块的渐变背景,您就完成了!

侧边

预览

现在我们已经完成了所有步骤,让我们最后看看我们重新创建的所有四个示例,以及它们在不同屏幕尺寸下的外观。

示例 #1

侧边

示例 #2

侧边

示例#3

侧边

示例 #4

侧边

最后的想法

在这篇文章中,我们向您展示了如何旋转部分分隔线来为您构建的任何类型的网站创建令人惊叹的侧边框。 这种方法允许您从另一个角度查看 Divi 的内置选项。 经过 创造性地 结合各种设置,几乎不需要图像编辑软件。 本教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。