WordPress divi主题

使用 Divi 的转换选项在悬停时创建扩展部分内容

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

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

今天,我们将重点介绍 Divi 新变换选项附带的变换比例设计选项。 更重要的是,我们将重新创建一个令人惊叹的设计,允许部分以优雅的方式在悬停时扩展。

google广告开户

您可以将此设计用于您正在创建的任何类型的网站。 它将帮助您以结构化和最小化的方式共享相关内容。 在本教程结束时,您将能够免费下载整个页面布局。

让我们开始吧!

预览

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

桌面

扩展部分内容

移动的

扩展部分内容

让我们开始重建吧!

添加第 1 节

间距

首先创建一个新页面。 将您的第一个常规部分添加到页面,打开部分设置并删除间距设置中的所有默认顶部和底部填充。

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

扩展部分内容

添加新行

立柱结构

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

扩展部分内容

WordPress divi主题

浆纱

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

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

间距

删除所有默认的顶部和底部填充。 我们这样做是为了限制行和部分将占用的空间。

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

扩展部分内容

添加分频器模块

能见度

我们在这一行中唯一需要的模块是 Divider Module。 在本教程结束时,我们会将分隔线转换为垂直分隔线,以连接所有即将到来的部分。 添加分隔器模块后,请确保启用了“显示分隔器”选项。

扩展部分内容

颜色

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

扩展部分内容

浆纱

同时修改大小值。

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

扩展部分内容

fiverr建站WordPress程序员

间距

并通过添加一些负的左右边距来增加分隔线的长度。

  • 左边距:-135vw(桌面)、-300vw(平板电脑)、-340vw(手机)
  • 右边距:-135vw(桌面)、-300vw(平板电脑)、-340vw(手机)

扩展部分内容

添加第 2 节

背景颜色

进入下一个常规部分! 添加新部分后,打开部分设置并添加完全白色的背景颜色。

  • 背景颜色:#ffffff

扩展部分内容

间距

然后,转到间距设置并添加一些自定义顶部和底部填充。

独立站选品工具
  • 顶部填充:5vw
  • 底部填充:5vw

扩展部分内容

默认边框

也为该部分添加边框。

  • 边框宽度:1px
  • 边框颜色:#000000

扩展部分内容

悬停边框

并删除悬停时的边框宽度。

扩展部分内容

高质量外链购买

默认框阴影

我们还在悬停时添加了一个盒子阴影。 为此,我们需要先添加一个默认值。 为了确保默认情况下不显示盒子阴影,我们使用完全透明的阴影颜色。

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

扩展部分内容

悬停框阴影

使用以下颜色代码更改悬停时的阴影颜色:

  • 阴影颜色:rgba(0,0,0,0.13)

扩展部分内容

添加第 1 行

立柱结构

继续使用以下列结构将第一行添加到该部分:

JasperAI 10000字免费额度试用

扩展部分内容

浆纱

在不添加任何模块的情况下,打开行设置并允许行占据部分的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

添加文本模块

添加H2含量

是时候开始添加模块了! 我们需要的第一个模块是一个带有一些 H2 内容的文本模块。

扩展部分内容

WordPress备份工具updrafplus

H2 文本设置

转到设计选项卡并根据自己的喜好修改 H2 文本设置。

  • 标题 2 字体:Abril Fatface
  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:#000000
  • 标题 2 文字大小:7vw

扩展部分内容

间距

还添加一些自定义边距值。

  • 底边距:5vw
  • 左边距:5vw
  • 右边距:5vw

扩展部分内容

添加分频器模块

能见度

我们在这一行中需要的下一个也是最后一个模块是 Divider 模块。 确保启用了“显示分隔线”选项。

扩展部分内容

颜色

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

扩展部分内容

添加第 2 行

立柱结构

上第二排! 使用以下列结构:

扩展部分内容

浆纱

我们再次通过修改设计选项卡中的大小设置来确保行占据屏幕的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

间距

我们还通过在间距设置中添加一些自定义左右填充来略微缩小行的大小。

  • 左填充:10vw
  • 右填充:10vw

扩展部分内容

展示

为了确保所有三列在较小的屏幕尺寸上彼此相邻显示,我们将在该行的主要元素中添加一行 CSS 代码。

display: flex;

扩展部分内容

将 Blurb 模块添加到第 1 列

添加内容

继续向该行的第一列添加一个模糊模块。 输入您选择的一些内容。

扩展部分内容

选择图标

接下来选择一个图标。

扩展部分内容

图标设置

然后,转到设计选项卡并更改图标颜色。

扩展部分内容

标题文本设置

转到标题文本设置并根据您自己的喜好更改设置。

  • 标题字体:Abril Fatface
  • 标题文本对齐方式:居中
  • 标题文字颜色:#000000
  • 标题文字大小:1.5vw(桌面)、2.5vw(平板电脑)、3.5vw(手机)
  • 标题行高度:2em

扩展部分内容

正文文本设置

对正文设置执行相同的操作。

  • 正文字体:Open Sans
  • 正文文本对齐:居中
  • 正文颜色:#666666
  • 正文文本大小:0.8vw(桌面)、1.5vw(平板电脑)、2vw(手机)
  • 车身线高:2em

扩展部分内容

间距

最后但并非最不重要的一点是,为 Blurb 模块添加一些自定义的左右边距。

  • 左边距:2vw
  • 右边距:2vw

扩展部分内容

克隆 Blurb 模块两次并放置在剩余的列中

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

扩展部分内容

添加第 3 行

立柱结构

到下一行和最后一行。 为其选择以下列结构:

扩展部分内容

浆纱

在不添加任何模块的情况下,打开行设置并通过修改大小设置让行占据部分的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

添加按钮模块

添加内容

我们在这里需要的唯一模块是一个按钮模块。 添加一些您选择的副本。

扩展部分内容

结盟

然后,转到设计选项卡并更改按钮对齐方式。

扩展部分内容

按钮设置

接下来更改按钮设置。

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

扩展部分内容

扩展部分内容

间距

并使用一些自定义边距和填充值为按钮创建一个形状。

  • 最高边距:5vw
  • 顶部填充:2vw
  • 底部填充:2vw
  • 左填充:10vw
  • 右填充:10vw

扩展部分内容

将变换设置添加到第 #2 节

将默认变换比例添加到第 #2 节

现在我们已经完成了创建和修改添加到页面的两个部分,我们可以开始应用转换选项。 打开第 #2 部分并添加一些自定义变换比例值。

  • 底部:60%(台式机)、90%(平板电脑和手机)
  • 右:60%(台式机)、90%(平板电脑和手机)

扩展部分内容

悬停变换比例到第 #2 节

在悬停时修改这些值。 请注意我们如何使用与较小屏幕尺寸相同的值。 这样做可以确保悬停效果只发生在较大的屏幕尺寸上。

扩展部分内容

克隆部分两次

然后,克隆第二个部分两次(或任意多次)。

扩展部分内容

在第 #1 节中将变换旋转添加到除法器模块

并通过使用变换旋转值来变换您添加到第一部分的分隔线。

扩展部分内容

免费下载扩展部分布局

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

预览

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

桌面

扩展部分内容

移动的

扩展部分内容

最后的想法

在本教程中,我们重点介绍了 Divi 新变换选项附带的变换比例选项。 最重要的是,我们重新创建了一个令人惊叹的设计,使悬停效果变得有意义,并增强了人们在访问页面时的整体用户体验。 在教程结束时,您还可以免费下载整个布局。 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

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