每个定期与客户交流的网站都可以从常见问题解答部分中受益。 使用 Divi 创建网站时，有很多方法可以设计您的常见问题解答部分。 现在，在这篇文章中，我们将创建一个有趣的常见问题解答部分，专注于结合列和模块容器来创建一个漂亮的设计。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载专栏常见问题解答设计
要掌握免费专栏常见问题解答设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
订阅我们的 Youtube 频道
让我们开始重新创建
添加新部分
背景
首先向您正在处理的页面添加一个新的常规部分。 在添加行之前，调整部分背景。
- 背景：渐变
- 颜色一：深水色#50aebf
- 颜色二：浅水色#6bf2ff
- 方向：180度
- 起始位置：21%
间距
也修改该部分的填充值。
- 顶部填充：
- 台式机：4vw
- 平板电脑：15vw
- 电话：24vw
- 底部填充：2vw
添加新行
立柱结构
继续使用以下列结构向该部分添加新行：
列设置
间距
打开第 1 列设置并添加一些左右填充。
- 左右填充：
- 台式机：1vw
- 平板电脑+手机：3vw
添加文本模块
添加内容
是时候开始添加模块了！ 添加一个新的文本模块，其中包含您选择的一些 H2 和段落内容。
文本
转到设计选项卡并设置段落文本的样式。
- 文字字体：演员
- 文字颜色：灰白色##f6f6f6
- 字体大小：
- 台式机+平板电脑：1.5vw
- 电话：3.8vw
- 文字字母间距：1px
- 文本对齐：居中
标题文字
然后，设置标题文本的样式。
- 标题文本级别：H2
- H2字体：Verdana
- H2 字体粗细：半粗体
- H2 字体颜色：灰白色：#f6f6f6
- H2 字体大小：
- 台式机：3vw
- 平板电脑：5vw
- 电话：6vw
- H2 字母间距：7px
- H2 线高：
- 桌面：1.8em
- 平板电脑：1.6em
- 电话：1.5 厘米
浆纱
此外，调整大小。
间距
最后，调整间距。
- 最高边距：
- 底边距：
- 底部填充：0vw
- 左+右填充：7vw
添加分频器模块
线
在文本下方，添加一个分隔模块并将其设为黄色。
- 线条颜色：黄色#ffe100
浆纱
然后，调整重量和宽度。
- 分隔线重量：4px
- 宽度：12%
- 模块对齐：中心
间距
最后，调整间距。
- 最高边距：
- 台式机 + 平板电脑：-1vw
- 电话：10vw
添加新行
立柱结构
继续使用以下列结构添加新的：
浆纱
首先，调整大小。
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
然后调整间距。
- 最高边距：3vw
- 底边距：11vw
- 左右边距：自动
- 顶部填充：0vw
- 底部填充：11vw
- 左右填充：5vw
第 1 列设置
悬停背景
在添加其他列之前，将列 1 背景设置为如下样式：
- 悬停背景：渐变
- 颜色一：黄色#ffe100
- 颜色二：透明
- 渐变类型：径向
- 径向：左上
- 开始和结束位置：19%
间距
接下来将一些间距值添加到列中。
- 底部填充：
- 台式机+平板电脑：0vw
- 电话：4vw
- 左右填充：
- 台式机：1vw
- 平板电脑+手机：3vw
边界
还要在列中添加一些圆角。
- 圆角：1vw 所有四个角
转换
最后，将自定义转换转换值应用于列。
- 转换翻译：4vw y 轴（桌面），0vw（悬停，平板电脑和手机）
将第 1 列复制四次
现在，将第一列复制四次。
第 2 列设置
转换
然后，调整变换值。 首先，第 2 列。
- 转换翻译：2vw y 轴（桌面），0vw（悬停，平板电脑和手机）
第 3 列设置
转换
然后，重置第 3 列中的转换值。
- 转换翻译：重置
第 4 列设置
转换
此外，调整第 4 列中的变换值。
- 转换翻译：2vw y 轴（桌面），0vw（悬停，平板电脑和手机）
第 5 列设置
转换
最后，查看第 5 列中的转换值。
- 转换翻译：4vw y 轴（桌面），0vw（悬停，平板电脑和手机）
将切换模块添加到第 1 列
添加内容
是时候开始添加模块了！ 在第一列添加一个切换模块，其中包含您选择的一些内容。
状态
然后，选择“关闭”作为模块的状态。
背景
并添加一个问号的透明图像作为背景。
- 背景图片
- 背景图像混合：柔光
图标
在设计选项卡中，为图标设置样式。
- 图标颜色：黄色#ffe100
- 图标大小：
- 桌面：34px
- 平板电脑+手机：20px
切换
然后，为静态和悬停设置切换背景样式。
- 打开切换背景颜色：蓝绿色 #0092af
- 关闭 切换背景颜色：灰白色：#f7f7f7
标题文字
继续设置标题文本的样式。
- 打开标题文本颜色：灰白色：#f7f7f7
- 标题文字颜色：深灰色#3a3a3a
- 悬停：灰白色：#f7f7f7
- 标题标题级别：H5
- H5字体：演员
- H5 对齐方式：左
- H5 文字大小：
- 台式机：1.5 大众
- 平板电脑：3 大众
- 电话：4.5 大众
封闭的标题文本
也为封闭的文本设置样式。
- 封闭式标题文本颜色：深灰色 #3a3a3a
- 封闭的标题字体：演员
- 对齐方式：左
- 封闭文字大小：
- 台式机：1.5vw
- 平板电脑：3vw
- 电话：4.5vw
主体
不要忘记正文。
- 正文字体：演员
- 正文文本对齐：左
- 正文颜色：灰白色：#f7f7f7
- 正文大小：
- 台式机：0.9vw
- 平板电脑：2vw
- 电话：3vw
- 车身线高：1.8em
间距
在文本样式之后，添加一些间距值。
- 最高边距：
- 顶部 + 底部填充：
- 台式机：2vw
- 平板电脑：3vw
- 电话：5vw
- 左填充：
- 台式机：2vw
- 平板电脑：4vw
- 电话：5vw
- 右填充：
- 台式机：2vw
- 平板电脑：3vw
- 电话：4vw
边界
添加一些圆角并删除默认的 1px 边框。
- 圆角：1vw 所有四个角
- 边框：0px
盒子阴影
最后，添加一个内框阴影。
- 盒子阴影：第 6 个选项
- 盒子阴影模糊强度：
- 台式机+平板电脑：18px
- 电话：9px
- 盒子阴影传播强度：-4px
- 阴影颜色：rgba(0,0,0,0.21)
重复切换模块 4 次
将样式切换模块复制四次并将新的切换模块拖到空列中。
编辑内容
编辑复制的切换模块中的问题和答案，您就完成了！
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
结论
在这篇文章中，我们向您展示了如何创建独特的列常见问题解答设计。 我们添加了一些悬停选项，为设计提供有趣的黄色角落效果。 我们希望这个设计能激发您在 Divi 项目中创建有趣的常见问题解答设计。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！
