如何使用 Divi 设计响应式五列“展示”布局

为您的内容设计具有足够空间的五列布局可能具有挑战性。 更不用说确保它在所有浏览器尺寸上都能很好地扩展的更大挑战。 在本教程中，我将向您展示如何在不影响较小屏幕尺寸（如平板电脑和智能手机）的设计的情况下，最大限度地增加五列布局内的内容所需的空间。 这种设计非常适合展示产品、服务和项目。 我什至会加入一些额外的设计功能以获得一点灵感。

让我们开始吧。

抢先看

使用的响应技术

使用自定义行宽和装订线宽度

使五列布局响应的关键是首先为您的列提供足够的空间来容纳内容。 在本教程的设计中，我将给包含五列的行自定义宽度为 89%。 然后我将通过将装订线宽度设置为 1 来创建更多空间，这基本上消除了列之间的任何边距。 对于此设计，重要的是使用 89% 的自定义宽度而不是将行设置为全宽，因为您可以将装订线宽度设置为 1 并且仍然在行的每一侧保留边距。 你会明白我的意思。

对间距和标题文本使用 vw 长度单位

在五列布局上保持响应的另一个关键是使用 vw 长度单位分隔您的内容。 重要的是要在所有间距中使用 vw 保持一致。 这将确保在所有浏览器大小上保持一致缩放，而不会在您调整窗口宽度时使元素中断或跳跃。 使用 vw 长度单位作为标题文本也是关键，这样文本不会在较小的浏览器窗口中换行。 然而，对于标题文本，我们需要为平板电脑和智能手机分配一个 px 单位，以适应文本缩小太多。

第 1 部分：入门

本教程所需要的只是 Divi 主题。 我们将使用 Visual Builder 和建筑公司主页布局。

因此，首先，创建一个新页面，为页面指定标题，然后部署 Visual Builder。 选择“选择预制布局”选项。 在从库加载弹出窗口中，选择室内设计布局包，然后将建筑公司主页布局加载到您的页面。

第 2 部分：创建标题部分

首先，复制包含三个简介的第二部分。

这个设计需要两个部分，因为顶部有两个目的。 首先，它将保存我们下面部分的标题。 其次，它将允许我们使用部分分隔器添加独特的设计。

让我们继续。

在原始部分（不是重复部分）中，删除三个简介并将行的列结构更改为一列。

然后向下滚动到布局底部到最后一部分并复制左列中的文本模块。

然后将其粘贴到您刚刚创建的一列行中并删除 h2 标题下的所有文本内容，以便只留下“让我们构建一些东西”。

第 3 部分：为五列布局自定义模糊

现在是时候访问我们在 3 列行中使用原始三个简介复制的部分了。 首先，让我们将行结构更改为五列布局。

打开第一列中的blurb模块的blurb设置，然后删除用作图标的图像。

然后复制第一列中的模糊模块。 我们将在此设计中每列使用两个简介，因为我们需要顶部简介来保存我们的背景图像。

在第一列中打开顶部简介的设置并删除内容框中的正文。

为顶部的 Blurb 模块添加背景图像和渐变

然后给相同的模糊背景图像并添加渐变以覆盖图像，如下所示：

添加背景图片
背景渐变左颜色：rgba(255,255,255,0)
背景渐变右颜色：rgba(18,18,18,0.65)
起始位置：50%
将渐变放置在背景图像上方：是

渐变对于帮助我们的标题文本在背景图像较浅的情况下变得更具可读性是必要的。

使用大众单位作为标题文本和间距

然后更新设计选项卡设置如下：

标题文字大小：2.7vw（桌面）、46px（平板电脑）、36px（智能手机）
标题字母间距：-3px
自定义边距：1.5vw 左，1.5vw 右
自定义填充：35vw 顶部，2vw 底部，1vw 左，1vw 右

保存设置。

35vw 的自定义顶部填充创造了独特的长垂直图像设计。 标题文本被赋予 2.7vw 值，以便在不同浏览器宽度上保持文本缩放一致。 一旦我们稍后为行添加更多间距，其余的间距将更有意义。

自定义底部宣传语

然后打开第一列下方第二个模糊模块的设置并删除标题文本。 然后更新以下内容：

正文对齐方式：左
正文颜色：#666666
自定义填充：2vw 顶部，2vw 底部，2vw 左，2vw 右

现在我们在第一列中设计了两个简介。 复制它们并将它们粘贴到剩余的每一列中。 您首先需要先删除第 2 列和第 3 列中的原始模糊模块。 现在你的设计应该是这样的。

第 4 部分：自定义部分设置

现在让我们更新我们的部分设置，在底部有一个白色背景和一个框阴影，这将为我们的行创建一个重叠的空间。

背景颜色：#ffffff
自定义填充：默认顶部，5vw 底部，默认左，默认右
盒子阴影：见截图
框阴影垂直位置：-200px
框阴影模糊强度：0px
阴影颜色：#121212

第 5 部分：自定义行设置

现在让我们回到我们的行并按如下方式更新设置：

背景图片：#ffffff
行对齐：居中
自定义宽度：89%
天沟宽度：1
自定义保证金：-10vw
自定义填充：3vw 顶部，3vw 底部，1.5vw 左，1.5vw 右
盒子阴影：见截图
框阴影模糊强度：80px

正如本教程前面提到的，自定义宽度和装订线宽度对于创建五列布局所需的内容空间至关重要。

至此，设计的基本结构就完成了。 这是到目前为止的设计。

第 6 部分：添加最后的润色

现在我们可以添加更多的设计调整来完成它。

错综复杂

首先，让我们通过减少一些填充来错开模糊背景图像的高度。 打开第二行顶部模糊模块的设置，更新padding如下：

自定义填充：28vw 顶部

对于第三列中的顶部简介，将顶部填充更改为 30vw。

添加部分分隔线以将纹理添加到您的五列行

一种很酷的设计技术是在带有我们的五列的部分正上方的部分中添加一个顶部分隔器。 分隔线背景将显示在五列行的背景上，即使它与上面的部分重叠。 为此，请转到包含标题“让我们构建一些东西”的部分，并按如下所示为其添加分隔符：

由于分隔线的颜色与不透明度为 15% 的部分背景颜色相同，因此分隔线在顶部部分不可见，但在下方部分和重叠行中可见。 因为我们给这一行一个盒子阴影，这创造了一个独特的设计。

我继续更新了一些背景图像，以便更好地了解不同图像的设计效果。

这是最终的设计。

五列布局的一大优点是您可以在平板电脑上获得漂亮的两列布局。

这就是它在智能手机上的样子。

最后的想法

我喜欢探索 Divi 创建响应式布局的能力。 五列布局的挑战在于，除非您使用正确的技术来适当地分隔您的内容以在所有浏览器尺寸上很好地缩放，否则实际上没有多少内容空间。 我希望这个设计有助于为您的下一个项目介绍使用五列布局的一些可能性。

我期待在评论中收到您的来信。

干杯!