如何使用 Divi 的转换选项精美地堆叠投资组合项目

新的 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度

翻译歪斜

最后但并非最不重要的一点是，使用以下值启用平移倾斜：

• 底部：-4deg
• 右：24度

将图像模块 #2 添加到第 1 列

上传图片

进入下一个图像模块！ 将以下打印屏幕保存到您的计算机或使用您选择的另一个打印屏幕：

继续将打印屏幕上传到第 1 列中的第二个图像模块。

浆纱

然后，转到大小设置并启用“强制全角”选项。

• 强制全角：是

间距

我们通过在间距设置中使用一些自定义边距值来缩小图像的大小并使其与前一个图像重叠。

• 最高边距：-81vw（台式机），-50vw（平板电脑和手机）
• 左边距：11vw
• 右边距：11vw

边界

接下来，我们将在边框设置中的每个角上添加“2vw”。

盒子阴影

我们也将添加一个框阴影。 请注意我们如何为第二个投资组合项目图像使用较暗的框阴影。 这将帮助您在投资组合项目之间创建更多深度。

• 框阴影模糊强度：150px
• 阴影颜色：rgba(0,0,0,0.6)

转换 翻译

然后，转到转换设置并修改转换转换值：

• 底部：-8vw
• 右：0px

同样，这些值实际上取决于您希望如何定位打印屏幕以及打印屏幕的尺寸。 图像越小，您就越需要使用更大的负值将其向左推。

变换旋转

转到变换旋转选项卡并使用所有三个值。

• 左：24度
• 中心：46度
• 右：-7度

翻译歪斜

最后但并非最不重要的一点是，修改平移偏斜值：

• 底部：-4deg
• 右：24度

将图像模块 #3 添加到第 1 列

上传图片

转到第 1 列中我们需要的下一个也是最后一个图像模块。 将以下打印屏幕保存到您的计算机或使用您选择的任何其他打印屏幕：

将您保存的打印屏幕添加到新的图像模块。

浆纱

然后，转到大小设置并启用“强制全角”选项。

• 强制全角：是

间距

接下来转到间距设置并相应地修改边距值：

• 上边距：-107vw
• 左边距：19vw
• 右边距：19vw

边界

继续向图像模块的每个角添加“2vw”。

盒子阴影

接下来添加一个框阴影。 同样，我们使用了比之前两个图像模块中使用的阴影颜色更强的阴影颜色。

• 框阴影模糊强度：200px
• 阴影颜色：rgba(0,0,0,0.82)

转换 翻译

然后，转到转换设置并修改转换转换值：

• 底部：-42vw
• 右：11vw

变换旋转

转到变换旋转选项卡并在那里进行一些更改。

• 左：24度
• 中心：46度
• 右：-7度

翻译歪斜

最后但并非最不重要的是，修改平移偏斜值。

• 底部：-4deg
• 右：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 列中需要的下一个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

颜色

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

• 颜色：#8193fa

浆纱

也修改大小设置。

• 分隔线重量：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（手机）
• 颜色 1：#5627ba
• 颜色 2：#8fb5fc
• 梯度方向：122deg
• 按钮边框宽度：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 的新转换选项发挥创意。 更具体地说，我们堆叠了投资组合项目以创建美观且具有视觉吸引力的设计。 我们还确保图像在所有屏幕尺寸上看起来都很棒。 如果您有任何问题或建议，请务必在下方评论区留言！