WordPress divi主题

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

by | May 16, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

预览

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

桌面

问题卡网格

移动的

问题卡网格

让我们开始创作吧!

使用 ISP Layout Pack 的 About 页面创建新页面

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

问题卡网格

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

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

问题卡网格

WordPress divi主题

问题卡网格

在中间添加新部分

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

问题卡网格

添加新行

立柱结构

在不更改部分设置的情况下,使用以下列结构添加新行:

问题卡网格

浆纱

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

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

问题卡网格

间距

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

  • 上边距:10px
  • 底部填充:10px
  • 第 1 列左侧填充:10 像素(桌面)、5 像素(平板电脑和手机)
  • 第 1 列右填充:5px
  • 第 2 列左填充:5px
  • 第 2 列右填充:5px
  • 第 3 列左填充:5px
  • 第 3 列右侧内边距:10 像素(桌面)、5 像素(平板电脑和手机)

问题卡网格

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

添加内容

要创建悬停效果,我们需要的唯一模块是 Blurb 模块。 我们将首先创建一个,然后克隆它以创建整个结果。 在第一列添加一个模糊模块。 将您要回答的问题添加到标题字段并将答案添加到内容框。

fiverr建站WordPress程序员

问题卡网格

选择图标

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

问题卡网格

默认图标设置

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

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

问题卡网格

独立站选品工具

悬停图标设置

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

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

问题卡网格

文字设置

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

问题卡网格

默认标题文本设置

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

高质量外链购买
  • 标题字体:Poppins
  • 标题字体粗细:粗体
  • 标题文字颜色:#333333
  • 标题文字大小:40px
  • 标题字母间距:-3px

问题卡网格

悬停标题文本设置

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

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

问题卡网格

默认正文文本设置

继续更改正文文本设置。

  • 正文字体:Open Sans
  • 正文字体粗细:Light
  • 正文文本颜色:rgba(255,255,255,0)
  • 正文大小:25px
  • 正文字母间距:-2px
  • 车身线高:1.6em

问题卡网格

JasperAI 10000字免费额度试用

悬停正文文本设置

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

问题卡网格

间距

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

  • 顶部填充:9vw
  • 底部填充:9vw
  • 左填充:50px
  • 右内边距:50px

问题卡网格

默认圆角

我们还给我们的模块“30px”的圆角。

WordPress备份工具updrafplus

问题卡网格

悬停圆角

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

问题卡网格

默认边框

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

  • 底部边框宽度:0px
  • 底部边框颜色:#0fffeb

问题卡网格

悬停边框

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

  • 底部边框宽度:10px

问题卡网格

盒子阴影

为了增加一些深度,我们也将使用一个盒子阴影。

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

问题卡网格

过渡

最后但同样重要的是,我们将减少高级选项卡中的过渡持续时间。

  • 转换持续时间:250ms

问题卡网格

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

现在您的第一个 Blurb 模块已经完成,您可以通过克隆它并将副本放在剩余的两列中来节省时间。

问题卡网格

更改内容

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

问题卡网格

更改底部边框颜色

连同底部边框颜色。

问题卡网格

克隆整行两次

您可以根据需要多次克隆该行来创建问题卡网格。

问题卡网格

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

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

问题卡网格

预览

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

桌面

问题卡网格

移动的

问题卡网格

最后的想法

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题