使用 Divi 创建独特的列常见问题设计
已发表: 2019-10-04每个定期与客户交流的网站都可以从常见问题部分中受益。 使用 Divi 创建网站时，有多种方法可以设计常见问题解答部分。 现在，在这篇文章中，我们将创建一个有趣的 FAQ 部分，重点是结合列和模块容器来创建一个漂亮的设计。 您也可以免费下载 JSON 文件！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载专栏常见问题设计
要了解免费专栏常见问题设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
订阅我们的 YouTube 频道
让我们开始重建
添加新部分
背景
首先向您正在处理的页面添加一个新的常规部分。 在添加行之前，调整部分背景。
- 背景：渐变
- 颜色一：Dark Aqua #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 em
浆纱
此外，调整大小。
- 宽度：100%
间距
最后，调整间距。
- 最高保证金：
- 台式机 + 平板电脑：1.5vw
- 底部边距：
- 电话：-5vw
- 底部填充：0vw
- 左 + 右填充：7vw
添加分频器模块
线
在文本下方，添加一个分隔模块并使其变为黄色。
- 线条颜色：黄色#ffe100
浆纱
然后，调整重量和宽度。
- 分隔线重量：4px
- 宽度：12%
- 模块对齐：居中
间距
最后，调整间距。
- 最高保证金：
- 台式机 + 平板电脑：-1vw
- 电话：10vw
添加新行
列结构
继续使用以下列结构添加一个新的：
浆纱
首先，调整大小。
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
然后调整间距。
- 最高利润率：3vw
- 底边距：11vw
- 左右边距：自动
- 顶部填充：0vw
- 底部填充：11vw
- 左右填充：5vw
第 1 列设置
悬停背景
在添加其他列之前，将列 1 的背景样式设置如下：
- 悬停背景：渐变
- 颜色一：黄色#ffe100
- 颜色二：透明
- 渐变类型：径向
- 径向：左上角
- 开始和结束位置：19%
间距
在接下来的列中添加一些间距值。
- 底部填充：
- 台式机 + 平板电脑：0vw
- 电话：4vw
- 左右填充：
- 台式机：1vw
- 平板+手机：3vw
边界
向列添加一些圆角。
- 圆角：1vw 所有四个角
转变
最后，将自定义转换转换值应用于列。
- Transform Translate：4vw y 轴（桌面），0vw（悬停、平板电脑和手机）
复制第 1 列四次
现在，将第一列复制四次。
第 2 列设置
转变
然后，调整变换值。 首先，第 2 列。
- Transform Translate：2vw y 轴（桌面），0vw（悬停、平板电脑和手机）
第 3 列设置
转变
然后，重置第 3 列中的转换值。
- 转换 翻译：重置
第 4 列设置
转变
此外，调整第 4 列中的变换值。
- Transform Translate：2vw y 轴（桌面），0vw（悬停、平板电脑和手机）
第 5 列设置
转变
最后，查看第 5 列中的变换值。
- Transform Translate：4vw y 轴（桌面），0vw（悬停、平板电脑和手机）
将切换模块添加到第 1 列
添加内容
是时候开始添加模块了！ 将切换模块添加到具有您选择的某些内容的第一列。
- 标题
- 身体
状态
然后，选择“关闭”作为模块的状态。
- 状态：关闭
背景
并添加一个问号的透明图像作为背景。
- 背景图片
- 背景图像混合：柔光
图标
在设计选项卡中，设置图标样式。
- 图标颜色：黄色 #ffe100
- 图标大小：
- 桌面：34px
- 平板电脑 + 手机：20px
切换
然后，设置静态和悬停的切换背景样式。
- 打开切换背景颜色：青色 #0092af
- 关闭切换背景颜色：白色：#f7f7f7
- 悬停：青色 #0092af
标题文字
继续设置标题文本的样式。
- 打开标题文本颜色：白色：#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
间距
在文本样式之后，添加一些间距值。
- 最高保证金：
- 台式机 + 平板电脑：1vw
- 顶部 + 底部填充：
- 台式机：2vw
- 平板电脑：3vw
- 电话：5vw
- 左填充：
- 台式机：2vw
- 平板电脑：4vw
- 电话：5vw
- 右填充：
- 台式机：2vw
- 平板电脑：3vw
- 电话：4vw
边界
添加一些圆角并删除默认的 1px 边框。
- 圆角：1vw 所有四个角
- 边框：0px
盒子阴影
最后，添加一个内框阴影。
- 方框阴影：第 6 个选项
- 框阴影模糊强度：
- 桌面 + 平板电脑：18px
- 电话：9px
- 框阴影扩散强度：-4px
- 阴影颜色：rgba(0,0,0,0.21)
重复切换模块 4 次
复制样式切换模块四次并将新的拖到空列。
编辑内容
编辑重复切换模块中的问题和答案，您就完成了！
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
结论
在这篇文章中，我们向您展示了如何创建独特的专栏 FAQ 设计。 我们添加了一些悬停选项，使设计具有有趣的黄角效果。 我们希望这个设计能激励您创建有趣的常见问题设计，作为您的 Divi 项目的一部分。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！