WordPress divi主题

使用 Divi 的变换选项使用 Divider 模块创建背景形状

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

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

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

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的转换选项和 Paralegal Layout Pack 使用 Divider Modules 创建背景形状。 分隔模块非常通用,可以真正提升页面的整体设计。 虽然我们将重新创建一些专门匹配律师助理布局包的示例,但您可以将此技术用于您使用 Divi 构建的任何类型的网站。

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

背景形状

移动的

背景形状

使用 Paralegal Layout Pack 的登陆页面创建新页面

创建一个新页面并将 Paralegal Layout Pack 的登录页面上传到该页面。

背景形状

重新创建示例 #1

部分溢出

让我们开始创建第一个示例! 继续并打开英雄部分设置并转到设计选项卡。 在这里,我们要确保没有任何东西超出部分容器。 为此,我们将在主元素中添加一行 CSS 代码。

overflow: hidden;

背景形状

WordPress divi主题

将分隔模块添加到第 2 列

能见度

然后,继续在专业部分的第二列添加一个分隔模块。 确保启用了“显示分隔线”选项。

背景形状

背景颜色

我们将使用布局包调色板中的颜色作为分隔线的背景颜色。

  • 背景颜色:#d94144

背景形状

颜色

然后,我们将转到设计选项卡并更改分隔线的颜色。

背景形状

风格

转到样式设置并修改分隔线样式。

背景形状

浆纱

也可以使用大小设置。 你可以让这个 Divider Module 看起来像你想要的那样,但如果你想让它看起来与本文预览中显示的完全一样,请使用以下设置:

  • 分隔线重量:4px
  • 高度:0px

背景形状

fiverr建站WordPress程序员

间距

现在,我们将使用一些自定义边距和填充值来更改 Divider 模块的位置和大小。 确保根据不同的屏幕尺寸修改值,以便一切都保持响应。

  • 最高边距:-30vw(台式机),-100vw(平板电脑和手机)
  • 左边距:-100vw(台式机)、-138vw(平板电脑)、-300vw(手机)
  • 顶部填充:0px
  • 底部填充:1.3vw(台式机)、2.2vw(平板电脑)、3vw(手机)

背景形状

转换

变换比例

是时候改造模块了! 我们在变换设置中要做的第一件事是通过添加以下变换比例值来增加分隔线大小:

背景形状

变换旋转

我们还将在变换旋转设置中旋转分隔器模块。 正如您所注意到的,由于我们在本教程开始时添加的一行 CSS 代码,Divider 模块并没有超出该部分。

独立站选品工具

背景形状

重新创建示例 #2

部分溢出

继续下一个例子! 同样,我们希望通过向节的主要元素添加一行 CSS 代码来确保没有任何内容超出节容器。

overflow: hidden;

背景形状

将新行添加到部分末尾

立柱结构

继续使用以下列结构在该部分的末尾添加一个新行:

背景形状

高质量外链购买

间距

为了减小行占用的大小,我们将删除间距设置中的默认顶部和底部填充。

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

背景形状

添加分频器模块

能见度

是时候添加 Divider 模块并设置样式了! 确保启用了“显示分隔线”选项。

背景形状

背景颜色

我们再次使用布局包调色板中的一种颜色作为背景颜色。

JasperAI 10000字免费额度试用
  • 背景颜色:#d94144

背景形状

颜色

转到设计选项卡并更改分隔线颜色。

背景形状

浆纱

我们也在调整大小设置。

  • 分隔线重量:10px
  • 高度:0px

背景形状

WordPress备份工具updrafplus

间距

我们将使用一些自定义填充创建我们想要的确切形状,我们将在不同的屏幕尺寸上修改这些填充。

  • 顶部填充:2vw
  • 底部填充:2.5vw(桌面)、3vw(平板电脑)、3.9vw(手机)

背景形状

转换

变换比例

是时候转型了! 我们要做的第一件事是缩放 Divider Module。 我们这样做是为了确保该部分的开头或结尾没有间隙。 不要担心过多地缩放您的分频器模块,超出该部分的所有内容都不会显示在您的设计中。

  • 底部:153%
  • 右:153%(台式机)、250%(平板电脑)、500%(手机)

背景形状

转换翻译

然后,我们还将更改 Divider Module 的位置,使其显示在右侧。 确保将这些值与不同的屏幕尺寸相匹配。

  • 底部:25vw(台式机)、27vw(平板电脑和手机)
  • 右:0px(桌面),-32vw(平板电脑和手机)

背景形状

变换旋转

最后但同样重要的是,我们将通过使用变换旋转设置将水平分隔线变为垂直分隔线。

背景形状

重新创建示例 #3

部分溢出

继续下一个也是最后一个示例! 再次,通过向部分的主要元素添加一行 CSS 代码来确保没有超出部分容器的内容。

overflow: hidden;

背景形状

将新行添加到节的开头

立柱结构

继续在该部分的顶部添加一个新行。 将行放在顶部很重要,这样它就不会在教程后面与下面的内容重叠。

背景形状

浆纱

在不添加任何模块的情况下,打开行设置并让列占据屏幕的整个宽度。

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

背景形状

添加分频器模块

能见度

接下来添加您的分频器模块。 确保启用了“显示分隔线”选项。

背景形状

背景颜色

转到背景设置并添加您选择的背景颜色。

  • 背景颜色:#d94144

背景形状

颜色

修改分隔线颜色。

背景形状

风格

并在样式设置中更改分隔线样式。

背景形状

浆纱

然后,转到尺寸设置并进行一些更改。

  • 分隔线重量:4px
  • 高度:0px

背景形状

间距

并在间距设置中使用一些顶部和底部填充创建您想要的形状。

  • 顶部填充:3vw
  • 底部填充:3vw

背景形状

盒子阴影

我们还将通过给分隔线一个微妙的盒子阴影来为我们的页面添加一些深度。

  • 盒子阴影模糊强度:80px
  • 阴影颜色:rgba(0,0,0,0.3)

背景形状

转换

变换比例

现在我们已经设置了分隔线的样式,我们可以开始转换它了。 我们要做的第一件事是在变换比例设置中增加 Divider Module 的大小。

背景形状

转换翻译

然后,我们将进入变换转换设置并更改分隔模块的位置。 将行放在该部分的顶部有助于我们保持比其下方的行更低的 z-index,这会产生这种美丽的重叠!

  • 底部:4vw
  • 右:16vw(台式机)、26vw(平板电脑)、35vw(手机)

背景形状

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

背景形状

移动的

背景形状

最后的想法

在这篇文章中,我们向您展示了如何使用 Divider 模块和 Divi 的新转换选项来创建背景形状并增强页面的整体外观。 本教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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