WordPress divi主题

如何使用 Divi 为您的网站创建知识库

| 5月 15, 2022 | Divi主题使用教程 | 0 条评论

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

在您的网站上拥有一个知识库对于您的客户和您的员工来说都是非常宝贵的资产。 如果做得好,知识库可以成为您业务质量保证的长期标志。 它们可以成为常见问题解答、文档、软件手册、教程等的绝佳解决方案。

google广告开户

在本教程中,我将向您展示如何使用 Divi 将知识库添加到您的网站。 为此,我将使用 Echo 知识库插件(免费版),它具有一些有用的配置选项,可以轻松组织和设置知识库页面的样式。 我还将展示如何使用 Divi Builder 设置知识库主页和文章页面的样式。

抢先看

这是我们将要构建的内容的预览。

主知识库页面

迪维知识库

示例文章页面

迪维知识库

本教程需要什么

在 Divi 中启用知识库帖子类型

Divi 可以轻松地为某些第三方自定义帖子类型提供支持。 由于知识库插件使用他们自己的文章类型,您需要在 Divi 中启用它们。 这将允许您使用 Divi Builder 编辑这些文章。

为此,请转到您的 WordPress 仪表板并导航到 Divi > 主题选项。 单击生成器选项卡并启用帖子类型“知识库:知识库”。

迪维知识库

创建知识库文章和类别

为了更好地了解设计的外观,您需要设置一些知识库文章和类别。 目前,可以使用模拟内容。

创建您的知识库类别

您可以像在 WordPress 中创建普通帖子类别一样创建知识库类别。

WordPress divi主题

为此,请导航至知识库 > 类别。 然后为您将用于知识库文章的每个类别添加名称、Slug 和父类别(如果适用)。 对于此示例,我添加了 6 个父类别,每个类别都有几个子类别。

迪维知识库

为了让您了解它的发展方向,以下是父类别和子类别将如何显示在知识库主页上。

迪维知识库

为新文章分配类别

现在您的类别已经到位,但没有分配给它们的文章。 您将需要创建文章并将您创建的一个(或多个)类别分配给每个。

您可以像在 WordPress 中创建新文章一样创建新文章。 导航到知识库 > 添加新文章。 然后添加标题并为文章分配类别。 您会注意到可以激活 Divi Builder,因为我们在主题选项中启用了此帖子类型。 稍后我将分享一些这样做的技巧。 但是现在,您可以添加一些模拟内容默认的 WordPress 编辑器。 之后发表文章。

迪维知识库

继续这个相同的过程来创建所有需要的文章,以便每个类别至少有一篇文章分配给它。

检查默认知识库页面

激活插件后,会自动为您创建一个知识库页面。 此页面具有部署主要知识库所需的必要短代码。

迪维知识库

fiverr建站WordPress程序员

这是默认情况下页面的外观。

迪维知识库

配置知识库布局和样式

知识库插件有很多有用的选项来配置知识库以匹配您的网站设计。 主页、文章页面和存档页面都有可自定义的选项。

迪维知识库

配置主页

主页设置

首先,单击知识库配置页面顶部的主页按钮。 在设置选项卡下,您可以保留默认的布局样式和颜色。 但是对于这个示例,我将更改模板选项以使用“为文章设计的知识库模板”。 我这样做主要是因为它允许您使用不同的预制样式选项自定义存档页面。 但是,如果您想为此保留 Divi 主题模板,您可以将选项保留为“用于帖子和页面的当前主题模板”。

独立站选品工具

在 Templates 弹出窗口中,取消选择 Display Main Title 选项并将所有填充和边距设置为 0px。 这将允许我们使用 Divi Builder 作为页面标题和间距。

迪维知识库

主页组织和所有文本选项

现在,我打算将“组织”和“所有文本”选项保留为默认设置,但您可以自行更改这些选项。 在“组织”选项卡下,您甚至可以按照您想要的任何顺序拖放您的类别。 所有文本选项允许您更改整个页面使用的措辞(即搜索标题和按钮文本)。

主页调整选项

接下来,单击调整选项卡。 这是主要知识库的大部分样式设置。 我不会使用所有这些设置,但我会更改一些颜色并添加一些图标。 这样您就可以将知识库与预制的 Divi 布局相匹配。 由于我计划使用数字产品布局包,因此我将使用这些颜色来设置知识库页面的样式。

搜索框颜色

在下面 搜索框 类别,选择 颜色 并更新以下内容:

高质量外链购买

标题:#333333
搜索背景:#ffffff
按钮背景:#091c4f

迪维知识库

内容风格

在下面 内容 类别,选择 风格 并更新以下内容:

页面宽度:全宽

迪维知识库

JasperAI 10000字免费额度试用
文章样式和颜色列表

在下面 文章列表 类别,选择 风格 并更新以下内容:

图标:箭头三角形
文章列表高度:100px 最小高度(这对于使所有框的高度相同)

迪维知识库

然后选择 颜色 并更新以下内容:

文章文本:#091c4f
文章图标:#6767ef

WordPress备份工具updrafplus

迪维知识库

类别样式和颜色

接下来,根据 类别, 选择 风格 并更新以下内容:

图标位置:顶部

然后单击预览中的类别框之一以将其选中。 然后选择特定类别的类别图标。 对每个类别框执行此操作。

有超过 500 个图标可供选择!

迪维知识库

然后选择 颜色 并更新以下内容:

顶级类别图标:#ffffff
子类别文本和图标:#333333
分频器:#ffffff
类别框标题文本:#ffffff
类别框标题背景:#091c4f

迪维知识库

文章页面功能

现在我们已经配置了主页,单击页面顶部的文章页面。 然后单击功能选项卡。 在这里,您可以自定义后退按钮和面包屑等元素,它们将显示在文章布局的顶部。

现在,我只是将后退按钮与我将用于文章页面的预制布局相匹配。 在功能下,选择返回导航并更新以下内容:

文字颜色:#ffffff
背景颜色:#091c4f
边框颜色:#091c4f
边框宽度:3px

迪维知识库

存档页面布局样式

要更改存档页面的布局,请单击页面顶部的“存档页面”。 在设置选项卡下,您将看到可用不同样式的下拉列表。 我保留默认设置,但可以随意尝试其他样式。

下面是一个使用默认样式 1 的类别存档页面的示例。

迪维知识库

使用 Divi 设计知识库页面

现在我们已经完成了我们的知识库页面的配置,我们准备用 Divi Builder 完成知识库主页的设计。

首先,去编辑插件自动创建的页面标题“知识库”。

迪维知识库

然后部署 Divi Builder。 选择“Choose a Premade Layout”选项,然后从 Load from Library 弹出窗口中选择 Digital Product Layout Pack。 然后将文档页面布局部署到页面。

迪维知识库

布局加载到页面后,选择“在前端构建”。

您将看到顶部包含带有显示我们新样式知识库的简码的文本模块。

现在我们需要做的就是将它移动到我们希望它在预制布局中的位置,并使用 Divi Builder 选项根据需要调整设计。

对于这个例子,我将保存 KB 短代码的文本模块直接移动到标题为“文档”的文本模块下。

然后我删除了所有内容,直到我只剩下包含一行“文档”文本模块和包含简码的文本模块的顶部。 我还保留了 CTA 的底部部分。

迪维知识库

要完成设计,请打开包含简码的文本模块的设置并更新以下内容:

背景颜色:#ffffff
文字字体:Poppins
圆角:10px

迪维知识库

这是最终的设计。

迪维知识库

它也可以在移动设备上很好地调整。

迪维知识库

使用 Divi Builder 设计文章页面

因为我们在 Divi 主题选项中激活了 KB 知识库帖子类型,您可以使用 Divi Builder 设计您的文章。 知识库文章模板确实将 Divi Builder 限制为页面标题和面包屑以及后退按钮下的内容。 它还将 divi builder 内容的最大宽度限制为 1080 像素。

对于此示例,我将开始设计具有预制布局的知识库文章。 为此,请编辑其中一篇文章并部署 Divi Builder。 选择“Choose a Premade Layout”,然后从 Load from Library 弹出窗口中,选择 Digital Product Layout Pack 并部署 Digital Product Contact Page。

现在看看文章长什么样。 请注意,Divi Builder 内容直接位于文章标题、面包屑和后退按钮下方,Divi Builder 无法自定义这些按钮。

迪维知识库

但是对于允许 Divi Builder 的内容,您仍然有一些强大的自定义选项。 您可以使用联系页面布局的顶部部分背景作为文章不同部分(或步骤)的部分背景进行搜索。 您可以使用图像模块轻松添加屏幕截图。 基本上,您在整篇文章中都拥有 Divi Builder 的无限潜力。

这是一个使用 Divi 设计的文章页面的简单示例。

迪维知识库

当然,您可以添加一些自定义 CSS 调整文章容器的宽度,以获得全宽布局。 您可以添加一些代码来隐藏标题,然后使用 Divi 的动态内容将文章标题放置在 Divi Builder 中您想要的任何位置。

最后的想法

Echo 知识库插件非常强大,即使没有所有可用的高级插件(尽管它们值得一试)。配置选项允许您组织和设置知识库页面的样式以轻松匹配您的 Divi 布局。 最重要的是,您甚至可以使用 Divi Builder 来设计您的知识库页面和文章页面。 我希望本教程对那些希望将知识库添加到您的 Divi 网站的人有所帮助。

我期待在评论中收到您的来信。

干杯!