新的 Divi 转换选项为创建具有视觉吸引力的网页设计打开了许多新的大门。 从头开始设计网站时，它使我们离不需要任何图像编辑软件又近了一步。 我们可以将其转换成我们想要的样子，同时仍然拥有 100% 响应式设计。
在这篇文章中，我们将使用新的转换选项来精美地堆叠投资组合项目。 例如，这是展示以前制作的网站的好方法。 无论访问者使用何种屏幕尺寸，我们还将确保图像保持在原位。 我们希望本教程能激发您在根据您的需求定制网站时使用 Divi 的新转换选项发挥创意。
让我们开始吧！
预览
在我们深入教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
让我们开始重建吧！
添加新部分
渐变背景
首先向您的页面添加一个新部分。 打开部分设置并为其添加渐变背景。
- 颜色 1：#f4f4f4
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
- 起始位置：30%
- 结束位置：30%
间距
然后，转到设计选项卡并修改间距设置中的自定义填充值。
- 顶部填充：0px（桌面）、18vw（平板电脑）、40vw（手机）
- 底部填充：0px（桌面）、18vw（平板电脑）、40vw（手机）
添加新行
立柱结构
继续使用以下列结构向该部分添加新行：
浆纱
尚未添加任何模块，打开行设置并更改大小设置。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡柱高：是
间距
然后，转到间距设置并删除顶部和底部的默认填充。
- 顶部填充：0px
- 底部填充：0px
展示
我们还确保两列在较小的屏幕尺寸上彼此相邻。 为此，我们需要在该行的主要元素中添加一行 CSS 代码。
display: flex;
将图像模块 #1 添加到第 1 列
上传图片
我们现在可以开始添加不同的模块了！ 为了能够遵循本教程，请继续并将以下打印屏幕保存到您的计算机：
将打印屏幕上传到第一列中的图像模块。
浆纱
然后，转到设计选项卡并启用“强制全宽”选项。 完成后，图像将占据列的整个宽度。
间距
为了缩小图像的大小，我们将添加一些自定义的左右边距。 您会注意到我们使用视口单元来确保图像的大小保持不变，无论屏幕大小如何。
- 最高边距：-10vw
- 左填充：11vw
- 右填充：11vw
边界
接下来将“2vw”添加到边框设置中的每个角落。
盒子阴影
连同一个盒子阴影。
- 盒子阴影模糊强度：80px
- 阴影颜色：rgba(0,0,0,0.3)
转换翻译
现在我们可以开始转换图像了！ 将以下值添加到转换选项的转换转换选项卡：
- 底部：-26vw
- 右：-2vw
您在此处添加的值取决于图像的宽度和高度，因此如果您使用不同的图像，则必须相应地修改这些值。 确保您使用视口单位来确保图像的位置在所有屏幕尺寸上保持相同。
变换旋转
转到变换旋转选项卡并相应地旋转图像：
- 左：24度
- 中心：46度
- 右：-7度
平移偏斜
最后但同样重要的是，使用以下值启用平移倾斜：
- 底部：-4度
- 右：24度
将图像模块 #2 添加到第 1 列
上传图片
进入下一个图像模块！ 将以下打印屏幕保存到您的计算机或使用您选择的另一个打印屏幕：
继续将打印屏幕上传到第 1 列中的第二个图像模块。
浆纱
然后，转到尺寸设置并启用“强制全宽”选项。
间距
我们通过在间距设置中使用一些自定义边距值来缩小图像的大小并使其与前一个图像重叠。
- 最高边距：-81vw（台式机），-50vw（平板电脑和手机）
- 左边距：11vw
- 右边距：11vw
边界
接下来，我们将为边框设置中的每个角添加“2vw”。
盒子阴影
我们还将添加一个盒子阴影。 请注意我们如何为第二个投资组合项目图像使用较暗的框阴影。 这将帮助您在投资组合项目之间创建更多深度。
- 盒子阴影模糊强度：150px
- 阴影颜色：rgba(0,0,0,0.6)
转换翻译
然后，转到转换设置并修改转换转换值：
同样，这些值实际上取决于您希望如何定位打印屏幕以及打印屏幕的尺寸。 图像越小，您就越需要使用较大的负值将其向左推。
变换旋转
转到变换旋转选项卡并使用所有三个值。
- 左：24度
- 中心：46度
- 右：-7度
平移偏斜
最后但同样重要的是，修改平移倾斜值：
- 底部：-4度
- 右：24度
将图像模块 #3 添加到第 1 列
上传图片
在第 1 列中我们需要的下一个和最后一个图像模块。将以下打印屏幕保存到您的计算机或使用您选择的任何其他打印屏幕：
将您保存的打印屏幕添加到新的图像模块。
浆纱
然后，转到尺寸设置并启用“强制全宽”选项。
间距
接下来转到间距设置并相应地修改边距值：
- 最高边距：-107vw
- 左边距：19vw
- 右边距：19vw
边界
继续将“2vw”添加到图像模块的每个角落。
盒子阴影
接下来添加一个盒子阴影。 同样，我们使用的阴影颜色比我们之前用于两个图像模块的阴影颜色更强。
- 盒子阴影模糊强度：200px
- 阴影颜色：rgba(0,0,0,0.82)
转换翻译
然后，转到转换设置并修改转换转换值：
- 底部：-42vw
- 右：11vw
变换旋转
转到变换旋转选项卡并在那里进行一些更改。
- 左：24度
- 中心：46度
- 右：-7度
平移偏斜
最后但同样重要的是，修改平移倾斜值。
- 底部：-4度
- 右：24度
将标题文本模块添加到第 2 列
添加 H2 副本
进入第二列！ 添加带有您选择的一些 H2 内容的文本模块。
H2 文本设置
接下来转到 H2 文本设置并进行一些更改。
- 标题 2 字体：Roboto
- 标题 2 字体粗细：细
- 标题 2 文本对齐：左
- 标题 2 文本颜色：#000000
- 标题 2 文本大小：5vw（桌面）、6vw（平板电脑）、7vw（手机）
- 标题 2 字母间距：-1px
间距
继续在间距设置中添加一些自定义边距值。
- 最高边距：35vw（台式机）、10vw（平板电脑）、0vw（手机）
- 左边距：-4vw
- 右边距：4vw
将分隔模块添加到第 2 列
能见度
我们在第 2 列中需要的下一个模块是分频器模块。 确保启用了“显示分隔线”选项。
颜色
然后，转到设计选项卡并更改分隔线颜色。
浆纱
也修改大小设置。
- 分隔线重量：8px
- 宽度：28%
间距
并添加一些自定义边距值。
- 最高边距：1vw
- 左边距：-4vw
- 右边距：4vw
将描述文本模块添加到第 2 列
添加内容
第 2 列中我们需要的下一个模块是另一个文本模块。 添加您选择的一些段落内容。
文字设置
然后，转到文本设置并进行一些更改。
- 文字字体：Open Sans
- 文字大小：0.6vw（桌面）、1.2vw（平板电脑）、1.8vw（手机）
- 文本行高：3.1em（桌面）、2.7em（平板电脑）、2.6em（手机）
- 文字方向：左
间距
接下来添加一些自定义边距值。
- 最高边距：1vw
- 左边距：-4vw
- 右边距：4vw
将按钮模块添加到第 2 列
添加副本
我们需要完成设计的下一个也是最后一个模块是按钮模块。 添加一些选择的副本。
按钮设置
然后，转到设计选项卡并修改按钮设置。
- 为按钮使用自定义样式：是
- 按钮文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 颜色一：#5627ba
- 颜色2：#8fb5fc
- 渐变方向：122度
- 按钮边框宽度：0px
- 字体粗细：超粗体
- 字体样式：大写
间距
更改自定义边距和填充值。
- 上边距：2vw（台式机）、3vw（平板电脑）、5vw（手机）
- 底部边距：6vw（平板电脑）、8vw（手机）
- 左边距：-4vw
- 右边距：4vw
- 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
- 左填充：3vw（桌面）、5vw（平板电脑）、7vw（手机）
- 右填充：3vw（桌面）、5vw（平板电脑）、7vw（手机）
盒子阴影
最后但同样重要的是，添加一个微妙的盒子阴影，你就完成了！
- 盒子阴影模糊强度：40px
- 阴影颜色：rgba(0,0,0,0.3)
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的新转换选项发挥创意。 更具体地说，我们已经堆叠了投资组合项目，以创建一个漂亮且具有视觉吸引力的设计。 我们还确保图像在所有屏幕尺寸上看起来都很棒。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
