使用 Divi 为下一个关于页面创建交互式问题卡网格

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 为下一个关于页面创建交互式问题卡网格。 我们将使用 Internet Service Provider Layout Pack 的 about 页面，但您可以在您正在处理的任何页面上使用该方法。 它为访问者提供了不同的用户体验，并允许您与他们就您共享的信息进行交互。 掌握方法后，您可以通过使用 Divi 的内置选项来创建您选择的替代问题卡网格设计。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下我们将从头开始重新创建的问题卡网格。

桌面

移动的

让我们开始创作吧！

使用 ISP 布局包的关于页面创建新页面

要创建我们上面显示的设计，我们将使用 Internet 服务提供商布局包的关于页面，因此继续使用此布局创建一个新页面。 像往常一样，您可以在预制布局中找到它。

删除英雄部分和页脚之间的所有部分

我们将用问题网格卡替换所有当前内容。 为此，我们首先需要删除英雄部分和页脚之间的所有部分。

在中间添加新部分

我们将创建的问题卡网格可以包含您想要回答的任何类型的公司问题。 您还可以使用网格来展示常见问题。 继续在页面的英雄部分和页脚之间添加一个新的常规部分。

添加新行

列结构

在不对部分设置进行任何更改的情况下，使用以下列结构添加新行：

浆纱

我们将删除列之间的所有默认空间。 打开行设置并对大小设置进行一些更改。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是

间距

我们仍然需要在列之间留出一些空间才能有一个漂亮的设计。 转到间距设置并添加一些自定义填充值。

• 顶部填充：10px
• 底部填充：10px
• 第 1 列左填充：10 像素（桌面）、5 像素（平板电脑和手机）
• 第 1 列右填充：5px
• 第 2 列左填充：5px
• 第 2 列右填充：5px
• 第 3 列左填充：5px
• 第 3 列右内边距：10 像素（桌面）、5 像素（平板电脑和手机）

将新的 Blurb 模块添加到第 1 列

添加内容

要创建悬停效果，我们唯一需要的模块是 Blurb 模块。 我们将从创建一个开始，然后克隆它以创建整个结果。 将 Blurb 模块添加到第一列。 将您要回答的问题添加到标题字段和内容框中的答案。

选择图标

然后，在图像和图标设置中选择一个合适的图标。 此图标将帮助您的访问者了解他们必须将鼠标悬停在问题卡上才能看到答案。

默认图标设置

继续更改设计选项卡中的图标设置。

• 图标颜色：#aaaaaa
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：40px

悬停图标设置

并在悬停时修改图标颜色。 我们在悬停时使用完全透明的颜色来使图标在悬停时消失。

• 图标颜色：rgba(255,255,255,0)

文字设置

接下来，在文本设置中更改文本方向。

• 文字方向：居中

默认标题文本设置

也对标题文本设置进行一些更改。

• 标题字体: Poppins
• 标题字体粗细：粗体
• 标题文字颜色：#333333
• 标题文字大小：40px
• 标题字母间距：-3px

悬停标题文本设置

并在悬停时更改标题文本颜色。 我们再次使用完全透明的颜色来确保当有人将鼠标悬停在 Blurb 模块时不会出现问题。

• 标题文字颜色：rgba(255,255,255,0)

默认正文设置

继续更改正文设置。

• 正文字体：Open Sans
• 正文字体重量：轻
• 正文颜色：rgba(255,255,255,0)
• 正文文字大小：25px
• 正文字母间距：-2px
• 车身线高：1.6em

悬停正文设置

并在悬停时更改正文颜色。

• 正文颜色：#000000

间距

要将我们的模块塑造成正方形，我们将添加一些自定义填充值。

• 顶部填充：9vw
• 底部填充：9vw
• 左填充：50px
• 右填充：50px

默认圆角

我们还为我们的模块提供了圆角的“30px”。

悬停圆角

我们将在悬停时移除这些圆角。

默认边框

我们将添加一个底部边框。

• 底部边框宽度：0px
• 底部边框颜色：#0ffeb

悬停边框

更改悬停时的底部边框宽度以使其显示。

• 底部边框宽度：10px

盒子阴影

为了增加一些深度，我们还将使用框阴影。

• 阴影颜色：rgba(0,0,0,0.05)

过渡

最后但并非最不重要的一点是，我们将减少高级选项卡中的过渡持续时间。

• 转换持续时间：250ms

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

现在您的第一个 Blurb 模块已完成，您可以通过克隆它并将重复项放置在剩余的两列中来节省时间。

更改内容

确保更改每个重复项的内容。

更改底部边框颜色

与底部边框颜色一起。

克隆整行两次

您可以根据需要最多克隆该行，从而创建问题卡网格。

单独更改每个项目的内容和底部颜色

但是不要忘记更改内容和底部颜色，使每一张问题卡都独一无二！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的 Internet 服务提供商布局包创建交互式问题卡网格。 尽管我们已确保设计与布局包的样式相匹配，但您可以使用此方法将任何 about 页面转换为具有交互性的页面。 如果您有任何问题或建议，请务必在下方评论区留言！