使用 Divi 的转换选项在悬停时创建扩展部分内容
已发表: 2019-04-21今天，我们将重点介绍 Divi 的新变换选项附带的变换比例设计选项。 更重要的是，我们将重新创建一个令人惊叹的设计，允许部分以优雅的方式在悬停时扩展。
您可以将此设计用于您正在创建的任何类型的网站。 它将帮助您以结构化和最少的方式共享相关内容。 在本教程结束时，您将能够免费下载整个页面布局。
让我们开始吧！
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
让我们开始重建吧！
添加第 1 节
间距
首先创建一个新页面。 将您的第一个常规部分添加到页面，打开部分设置并删除间距设置中的所有默认顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加新行
列结构
继续使用以下列结构添加第一行：
浆纱
还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
删除所有默认的顶部和底部填充。 我们这样做是为了限制行和节占用的空间。
- 顶部填充：0px
- 底部填充：0px
添加分频器模块
能见度
我们在这一行中唯一需要的模块是分频器模块。 在本教程结束时，我们会将分隔线转换为垂直分隔线，以连接所有即将到来的部分。 添加分隔线模块后，请确保启用“显示分隔线”选项。
- 显示分隔线：是
颜色
然后，转到设计选项卡并将分隔线的颜色更改为黑色。
- 颜色：#000000
浆纱
还要修改尺寸值。
- 分隔线重量：1px
- 高度：0px
间距
并通过添加一些负的左右边距来增加分隔线的长度。
- 左边距：-135vw（桌面）、-300vw（平板）、-340vw（手机）
- 右边距：-135vw（桌面）、-300vw（平板）、-340vw（手机）
添加第 2 节
背景颜色
进入下一个常规部分！ 添加新部分后，打开部分设置并添加完全白色的背景色。
- 背景颜色：#ffffff
间距
然后，转到间距设置并添加一些自定义的顶部和底部填充。
- 顶部填充：5vw
- 底部填充：5vw
默认边框
也为该部分添加边框。
- 边框宽度：1px
- 边框颜色：#000000
悬停边框
并删除悬停时的边框宽度。
- 边框宽度：0px
默认框阴影
我们还在悬停时添加框阴影。 为此，我们需要先添加一个默认值。 为了确保默认情况下不显示框阴影，我们使用了完全透明的阴影颜色。
- 框阴影模糊强度：80px
- 阴影颜色：rgba(0,0,0,0)
悬停框阴影
使用以下颜色代码更改悬停时的阴影颜色：
- 阴影颜色：rgba(0,0,0,0.13)
添加第 1 行
列结构
继续使用以下列结构将第一行添加到该部分：
浆纱
在不添加任何模块的情况下，打开行设置并允许行占据该部分的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
添加文本模块
添加 H2 内容
是时候开始添加模块了！ 我们需要的第一个模块是带有一些 H2 内容的文本模块。
H2 文本设置
转到设计选项卡并根据自己的喜好修改 H2 文本设置。
- 标题 2 字体：Abril Fatface
- 标题 2 文本对齐：居中
- 标题 2 文本颜色：#000000
- 标题 2 文字大小：7vw
间距
添加一些自定义边距值。
- 底边距：5vw
- 左边距：5vw
- 右边距：5vw
添加分频器模块
能见度
我们在这一行中需要的下一个也是最后一个模块是分频器模块。 确保启用了“显示分隔线”选项。
- 显示分隔线：是
颜色
然后，转到设计选项卡并将分隔线颜色更改为黑色。
- 颜色：#000000
添加第 2 行
列结构
到第二排！ 使用以下列结构：
浆纱
我们再次通过修改设计选项卡中的大小设置来确保该行占据屏幕的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
我们还通过在间距设置中添加一些自定义的左右填充来略微缩小行的大小。
- 左填充：10vw
- 右填充：10vw
展示
为了确保所有三列在较小的屏幕尺寸上彼此相邻显示，我们将向该行的主要元素添加一行 CSS 代码。
display: flex;
将 Blurb 模块添加到第 1 列
添加内容
继续向该行的第一列添加一个 Blurb 模块。 输入您选择的一些内容。
选择图标
接下来选择一个图标。
图标设置
然后，转到设计选项卡并更改图标颜色。
- 图标颜色：#000000
标题文字设置
转到标题文本设置并根据您自己的喜好更改设置。
- 标题字体：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 节
在悬停时修改这些值。 请注意我们如何使用与较小屏幕尺寸相同的值。 这样做将确保悬停效果只发生在较大的屏幕尺寸上。
- 底部：90%
- 正确：90%
克隆部分两次
然后，克隆第二部分两次（或根据需要复制多次）。
在第 1 节中将变换旋转添加到分隔器模块
并通过使用变换旋转值来变换您添加到第一部分的分隔符。
- 左：90度
免费下载扩展部分布局
要将您的手放在扩展部分布局上，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在本教程中，我们重点介绍了 Divi 的新变换选项附带的变换比例选项。 最重要的是，我们重新创建了令人惊叹的设计，使悬停效果有意义并增强人们在访问页面时的整体用户体验。 在教程结束时，您还可以免费下载整个布局。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！