WordPress divi主题

使用 Divi 的变换选项创建对角线设计结构(免费下载!)

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

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

我们一直在寻找方法来扩展 Divi 的设计可能性。 并且自从转换选项更新出来后,许多新技术已经成为可能,而无需自定义编码知识。

google广告开户

在这篇文章中,我们将向您展示如何创建令人惊叹的对角线设计结构。 我们将重新创建的设计非常适合英雄部分,并且可以匹配您想要设置的任何类型的网站。 在教程结束时,您还可以免费下载 JSON 文件!

让我们开始吧!

预览

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

对角线设计

让我们开始重建吧!

添加新部分

渐变背景

首先创建一个新页面或打开一个现有页面,然后向其中添加一个常规部分。 打开部分设置并使用以下设置为其添加渐变背景:

  • 颜色1:#ffd633
  • 颜色 2:#efefef
  • 渐变方向:217度
  • 起始位置:45%
  • 结束位置:45%

对角线设计

间距

然后,转到设计选项卡并添加一些自定义顶部和底部填充。

  • 顶部填充:4vw
  • 底部填充:12vw

对角线设计

溢出

我们需要确保转换选项不超过节容器。 为此,我们将在该部分的主要元素中添加一行 CSS 代码。

WordPress divi主题
overflow: hidden;

对角线设计

添加第 1 行

立柱结构

继续使用以下列结构添加第一行:

对角线设计

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。 在本文的下一步中,我们将通过使用视口单元添加一些自定义左右填充值来替换刚刚删除的空间。 这将确保设计在所有屏幕尺寸上保持响应。

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

对角线设计

间距

接下来为间距设置添加一些自定义填充值。

  • 顶部填充:0px
  • 底部填充:0px
  • 左填充:25vw(桌面)、16vw(平板电脑)、7vw(手机)
  • 右填充:25vw(台式机和平板电脑)、27vw(手机)

对角线设计

展示

我们还通过向行的主要元素添加一行 CSS 代码来确保列在较小的屏幕尺寸上彼此相邻。

display: flex;

对角线设计

将 Blurb 模块添加到第 1 列

添加标题

是时候开始添加模块了! 将 Blurb Module 添加到第 1 列并输入您选择的标题。

fiverr建站WordPress程序员

对角线设计

上传插图

继续上传您选择的插图。 我们将在本教程中使用的是 App Developer Layout Pack 的一部分。 您可以通过转到帖子并在最后下载它们来免费下载插图。

对角线设计

背景

然后,将完全白色的背景颜色添加到 Blurb 模块。

  • 背景颜色:#ffffff

对角线设计

独立站选品工具

标题文本设置

转到设计选项卡并相应地修改标题文本设置:

  • 标题字体:Poppins
  • 标题字体粗细:半粗体
  • 标题字体样式:大写
  • 标题文本对齐方式:居中
  • 标题文字大小:0.5vw(桌面)、1.6vw(平板电脑)、2.4vw(手机)
  • 标题字母间距:1px
  • 标题行高度:1.6em

对角线设计

间距

接下来修改间距设置。

  • 顶部填充:1.3vw(台式机)、4vw(平板电脑)、6vw(手机)
  • 底部填充:1.3vw(桌面)、4vw(平板电脑)、6vw(手机)
  • 左填充:1vw(桌面),7vw(平板电脑和手机)
  • 右填充:1vw(桌面)、7vw(平板电脑和手机)

对角线设计

边界

继续在 Blurb 模块的左上角和右上角添加“1vw”。

高质量外链购买

对角线设计

盒子阴影

最后但同样重要的是,使用以下设置为模块添加一个盒子阴影:

  • 盒子阴影垂直位置:10px
  • 盒子阴影模糊强度:60px
  • 阴影颜色:rgba(39,39,52,0.37)

对角线设计

克隆 Blurb 模块两次并在剩余列中放置重复项

自定义 Blurb 模块后,您可以继续克隆它两次。 将重复项放在该行的剩余两列中。

对角线设计

JasperAI 10000字免费额度试用

更改重复 #1

更改副本和插图

更改第一个副本的副本和插图。

对角线设计

更改间距

连同间距设置。

  • 最高边距:-3vw
  • 顶部填充:2.7vw(桌面)、8vw(平板电脑)、11vw(手机)
  • 底部填充:2.7vw(桌面)、8vw(平板电脑)、11vw(手机)

对角线设计

更改重复 #2

更改副本和插图

修改第二个副本的副本和插图。

WordPress备份工具updrafplus

对角线设计

添加第 2 行

立柱结构

到下一行! 使用以下列结构:

对角线设计

渐变背景

尚未添加任何模块,打开行设置并为其添加渐变背景。

  • 颜色 1:#fff20a
  • 颜色2:#ffb200
  • 渐变方向:165度

对角线设计

浆纱

然后,转到设计选项卡并启用“使此行全宽”选项。

  • 使这一行全宽:是

对角线设计

盒子阴影

最后但并非最不重要的一点是,为该行添加一个盒子阴影。

  • 盒子阴影垂直位置:0px
  • 盒子阴影模糊强度:100px
  • 阴影颜色:rgba(0,0,0,0.39)

对角线设计

添加分频器模块

能见度

我们仅将此行用于设计目的,而不是展示任何模块。 但是为了确保我们确切地知道行的外观,我们需要向它添加一个 Divider 模块。 我们不希望模块显示,因此请确保禁用“显示分隔线”选项。

对角线设计

将转换选项应用于行

第 1 行

转换翻译

现在我们已经完成了前两行,我们将对它们进行转换以适应我们要创建的对角线设计结构。 首先打开第一行的设置并修改转换转换值。

对角线设计

变换旋转

然后,更改左变换旋转值。

对角线设计

第 2 行

变换比例

继续打开第二行的设置并修改变换比例值。

  • 底部:133%(台式机)、171%(平板电脑)、176%(手机)
  • 右:133%(台式机)、171%(平板电脑)、176%(手机)

对角线设计

转换翻译

随着变换翻译值。

  • 底部:12vw(台式机)、1vw(平板电脑)、3vw(手机)
  • 右:-2vw(台式机)、-6vw(平板电脑)、-4vw(手机)

对角线设计

变换旋转

并在变换旋转设置中旋转行。

对角线设计

添加第 3 行

立柱结构

到下一行和最后一行! 您可以使用此行及其列来共享您想要的任何类型的信息。 要重新创建您在本文预览中看到的确切设计,请选择以下列结构:

对角线设计

浆纱

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

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

对角线设计

将文本模块 #1 添加到第 1 列

添加H1内容

是时候开始添加模块了! 我们将从标题文本模块开始。 输入您选择的一些 H1 内容。

对角线设计

H1 文字设置

然后,转到设计选项卡并修改 H1 文本设置。

  • 标题字体:Poppins
  • 标题文字大小:3vw(桌面)、5vw(平板电脑)、6vw(手机)
  • 标题字母间距:-2px

对角线设计

间距

接下来添加一些自定义间距值。

  • 最高边距:-6vw(台式机和平板电脑),11vw(手机)
  • 左边距:10vw

对角线设计

将文本模块 #2 添加到第 1 列

添加内容

我们需要的第二个模块是另一个文本模块。 添加一些您选择的内容。

对角线设计

文字设置

然后,转到设计选项卡并修改文本设置。

  • 文字字体:Open Sans
  • 文字大小:0.8vw(桌面)、1.5vw(平板电脑)、2.2vw(手机)
  • 文字行高:2.6em

对角线设计

间距

也更改间距值。

  • 最高边距:3vw(电话)、5vw(电话)
  • 左边距:10vw
  • 右边距:28vw(平板电脑),20vw(手机)

对角线设计

将按钮模块添加到第 1 列

添加副本

我们需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。

对角线设计

按钮设置

然后,转到设计选项卡并修改按钮设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.9vw(桌面)、2.5vw(平板电脑)、3.5vw(手机)
  • 按钮文字颜色:#000000
  • 按钮边框宽度:1px
  • 按钮边框颜色:#000000
  • 按钮边框半径:1px
  • 按钮字体:Poppins
  • 字体粗细:轻

对角线设计

对角线设计

间距

最后但同样重要的是,使用一些自定义间距值来塑造你的模块,你就完成了!

  • 最高利润:2vw(桌面),5vw(平板电脑和手机)
  • 左边距:10vw
  • 顶部填充:1vw
  • 底部填充:1vw
  • 左填充:3vw
  • 右填充:3vw

对角线设计

免费下载对角线设计部分

要接触免费的对角线设计部分,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

预览

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

对角线设计

最后的想法

在这篇文章中,我们向您展示了如何仅使用 Divi 的内置选项创建令人惊叹的对角线设计结构。 我们希望本教程能帮助您熟悉新的 Divi 变换选项。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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