WordPress divi主题

使用 Divi 创建独特的列常见问题解答设计

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

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

每个定期与客户交流的网站都可以从常见问题解答部分中受益。 使用 Divi 创建网站时,有很多方法可以设计您的常见问题解答部分。 现在,在这篇文章中,我们将创建一个有趣的常见问题解答部分,专注于结合列和模块容器来创建一个漂亮的设计。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载专栏常见问题解答设计

要掌握免费专栏常见问题解答设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

订阅我们的 Youtube 频道

让我们开始重新创建

添加新部分

背景

首先向您正在处理的页面添加一个新的常规部分。 在添加行之前,调整部分背景。

  • 背景:渐变
  • 颜色一:深水色#50aebf
  • 颜色二:浅水色#6bf2ff
  • 方向:180度
  • 起始位置:21%

WordPress divi主题

间距

也修改该部分的填充值。

  • 顶部填充:
    • 台式机:4vw
    • 平板电脑:15vw
    • 电话:24vw
  • 底部填充:2vw

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

列设置

间距

打开第 1 列设置并添加一些左右填充。

  • 左右填充:
    • 台式机:1vw
    • 平板电脑+手机:3vw

添加文本模块

添加内容

是时候开始添加模块了! 添加一个新的文本模块,其中包含您选择的一些 H2 和段落内容。

文本

转到设计选项卡并设置段落文本的样式。

  • 文字字体:演员
  • 文字颜色:灰白色##f6f6f6
  • 字体大小:
    • 台式机+平板电脑:1.5vw
    • 电话:3.8vw
  • 文字字母间距:1px
  • 文本对齐:居中

fiverr建站WordPress程序员

标题文字

然后,设置标题文本的样式。

  • 标题文本级别: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

添加新行

立柱结构

继续使用以下列结构添加新的:

浆纱

首先,调整大小。

JasperAI 10000字免费额度试用
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

间距

然后调整间距。

  • 最高边距:3vw
  • 底边距:11vw
  • 左右边距:自动
  • 顶部填充:0vw
  • 底部填充:11vw
  • 左右填充:5vw

第 1 列设置

悬停背景

在添加其他列之前,将列 1 背景设置为如下样式:

  • 悬停背景:渐变
  • 颜色一:黄色#ffe100
  • 颜色二:透明
  • 渐变类型:径向
  • 径向:左上
  • 开始和结束位置:19%

WordPress备份工具updrafplus

间距

接下来将一些间距值添加到列中。

  • 底部填充:
    • 台式机+平板电脑: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 项目中创建有趣的常见问题解答设计。 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

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