WordPress divi主题

如何使用 Divi 在您的常见问题解答设计中添加交换粘性问题

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

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

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

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何在滚动查看常见问题解答设计时创建可互换的粘性问题。 这是为您的设计添加交互的好方法,同时允许人们找到他们正在寻找的信息。 您还可以免费下载 JSON 文件!

让我们开始吧。

预览

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

桌面

棘手的问题

移动的

棘手的问题

免费下载粘性问题常见问题解答设计

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

1.使用图书馆联系页面布局创建新页面

添加新页面

首先添加一个新页面。 输入页面标题,发布页面并启用 Divi Builder。

棘手的问题

上传图书馆联系页面布局

导航到预制布局并在库布局包中选择联系人页面布局。

WordPress divi主题

棘手的问题

2.删除当前常见问题部分

定位和删除常见问题部分

在页面上找到并删除已包含常见问题解答设计的以下部分:

棘手的问题

3.增加新的FAQ部分设计

添加新的常规部分

我们现在可以开始创建我们的新设计,其中包括互换的粘性问题! 为此,请插入一个新的常规部分。

棘手的问题

添加新行

立柱结构

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

棘手的问题

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。 此步骤的一个非常重要的部分是启用“均衡柱高”选项。 这将根据放置在第 2 列中的内容自动在第 1 列中生成一些空间。该空间将用于允许粘性问题在页面上下滚动时自由移动。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:100%
  • 最大宽度:100%

棘手的问题

间距

接下来删除所有默认的顶行和底行填充。

fiverr建站WordPress程序员
  • 顶部填充:0px
  • 底部填充:0px

棘手的问题

第 1 列

继续打开第 1 列设置。

棘手的问题

默认背景颜色

添加默认背景颜色。

  • 背景颜色:rgba(224,216,200,0.15)

棘手的问题

独立站选品工具

悬停背景颜色

并在悬停时更改此背景颜色。

  • 背景颜色:#FFFFFF

棘手的问题

第 2 栏

接下来打开第二列的设置。

棘手的问题

间距

并在不同的屏幕尺寸上应用一些自定义填充值。

高质量外链购买
  • 顶部填充:100 像素(桌面)、50 像素(平板电脑和手机)
  • 底部填充:100 像素(桌面)、50 像素(平板电脑和手机)
  • 左填充:100 像素(桌面)、50 像素(平板电脑)、30 像素(手机)
  • 右内边距:100 像素(桌面)、50 像素(平板电脑)、30 像素(手机)

棘手的问题

将文本模块添加到第 1 列

添加H3内容

是时候开始添加模块了! 我们在第 1 列中需要的第一个也是唯一的模块是包含一个常见问题的文本模块。 我们为此使用 H3。

棘手的问题

背景颜色

接下来为文本模块添加背景颜色。

  • 背景颜色:#FFFFFF

棘手的问题

JasperAI 10000字免费额度试用

H3 文字设置

转到设计选项卡并相应地更改 H3 文本设置:

  • 标题 3 字体:Open Sans
  • 标题 3 字体粗细:粗体
  • 标题 3 字体样式:大写
  • 标题 3 文本对齐:居中
  • 标题 3 文字大小:20px
  • 标题 3 字母间距:1px
  • 标题 3 行高:1.5em

棘手的问题

间距

也添加一些自定义填充值。

  • 上边距:20px
  • 底部填充:20px
  • 左填充:20px
  • 右内边距:20px

棘手的问题

CSS 类

通过为模块分配一个 CSS 类来完成设置。 在本教程的最后,我们将使用这个 CSS 类来使模块具有粘性。

WordPress备份工具updrafplus

棘手的问题

将文本模块添加到第 2 列

添加内容

到第二列。 在那里,我们将添加一个包含我们选择的一些内容的文本模块。

棘手的问题

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文字字体:Open Sans
  • 文本行高:2em(台式机和平板电脑),1.6em(手机)

棘手的问题

间距

以及模块间距设置的一些底部边距。

棘手的问题

克隆第 2 列中的文本模块并更改内容

克隆第 2 列中的整个文本模块并更改内容。

棘手的问题

删除底部边距

也删除底部边距。

棘手的问题

根据需要多次克隆整行

完成第一行及其所有模块后,您可以根据需要克隆整行; 取决于您想在页面上显示多少常见问题。

棘手的问题

更改问题和答案

当然,您必须修改所有副本。

棘手的问题

更改第 1 列的默认背景颜色

更改每行重复的第 1 列默认背景颜色。 如果您希望它与 Library Layout Pack 匹配,请使用以下颜色代码:

  • 颜色 1:#f2ece1
  • 颜色 2:rgba(0,0,0,0.2)
  • 颜色 3:rgba(0,0,0,0.64)
  • 颜色 4:#000000

棘手的问题

添加新行

立柱结构

本教程的最后一部分侧重于使粘性效果起作用。 为此,我们需要几行 CSS 代码。 在您的部分底部添加一个新行。

棘手的问题

将代码模块添加到列

插入粘性问题 CSS 代码

添加具有以下几行 CSS 代码的代码模块,这将使粘性效果适用于每个问题文本模块:

<style>
.sticky {
position: sticky;
position: -webkit-sticky;
top: 200px !important;
}
</style>

棘手的问题

预览

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

桌面

棘手的问题

移动的

棘手的问题

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的 Library Layout Pack 为您的下一个常见问题解答设计创建可互换的粘性问题。 尽管我们使用了 Library Layout Pack 的外观和感觉,但您可以根据需要设置此设计的样式,并将其用于您即将到来的 Divi 项目。 本教程是我们 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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