如何将帖子类别菜单小部件添加到您的 Divi 全局页脚

当您在 Divi 的 Theme Builder 中构建自定义页脚时，有多种方法可以添加页脚项目。 您可以选择基于模块的页脚，您可以使用适当的链接在文本模块中添加页脚项，但您也可以决定使用 Divi 的侧边栏模块将不同的页脚小部件添加到您的设计中，并使用 Divi 的内置样式来设置它们的样式选项。 在今天的教程中，我们将向您展示如何进行第二个选项。 更具体地说，我们将向您展示如何将帖子类别菜单小部件添加到页脚。 我们使用的设计风格与 Food Recipes Layout Pack 完美匹配。 我们将首先向我们的网站添加不同的帖子类别。 然后我们将在 WordPress 中构建页脚菜单。 接下来，我们将创建我们的小部件，最后但并非最不重要的一点是，我们将小部件添加到我们在 Divi Theme Builder 内定制的 Divi 页脚中。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载全局页脚模板

要使用免费的全局页脚模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

1. 为您的网站设置帖子类别

转到您的帖子类别

在本教程的第一部分中，我们将确保在开始将它们添加到自定义页脚菜单之前设置所有帖子类别。 为此，请导航到 WordPress 后端中的帖子类别。

设置您选择的帖子类别结构

如果您还没有这样做，请设置要包含在页脚中的所有不同帖子类别。 对于本教程，我们将需要三个不同的帖子类别组，因为我们将在自定义页脚中包含三个不同的帖子类别菜单小部件。

2.创建几个类别的WordPress菜单

前往菜单

接下来，我们将为每组帖子类别创建一个单独的菜单。 导航到 WordPress 网站外观设置中的菜单。

创建页脚菜单

添加第一个页脚菜单并为其指定一个可识别的名称。

• 菜单名称：页脚菜单#1

添加帖子类别

将您的第一组帖子类别添加到这个新菜单中。

为其他帖子类别创建第二和第三页脚菜单

对另外两个帖子类别组执行相同的操作。

• 菜单名称：页脚菜单#2

• 菜单名称：页脚菜单 #3

3. 创建页脚小部件

转到小部件

现在我们已经有了我们的帖子类别和帖子类别菜单，我们可以将它们放在我们的页脚区域小部件中。 为此，请导航到 WordPress 后端中的小部件。

将页脚菜单 #1 添加到页脚区域 #1

在那里，将第一个导航菜单小部件添加到页脚区域 #1。 在导航菜单中，选择您在本教程的前一部分中创建的第一个页脚菜单。

将页脚菜单 #2 添加到页脚区域 #2

将第二个帖子类别菜单放在第二个页脚区域。

将页脚菜单 #3 添加到页脚区域 #3

以及第三页脚区域中的第三页脚菜单。

将最近的帖子添加到页脚区域 #4

我们需要的最后一个小部件，我们将添加到第四个页脚区域，是最近的帖子小部件。 此小部件将动态显示您最近发布的 5 个帖子作为链接。

3.在Divi Theme Builder中构建全局页脚

转到您的 Divi 主题生成器并开始构建页脚模板

现在我们的帖子类别、帖子类别菜单和小部件都已就位，是时候切换到 Divi 了！ 转到您的 Divi Theme Builder 并开始构建全局或自定义页脚。

部分设置

背景颜色

进入页脚模板后，您会注意到一个部分。 打开该部分并为其添加背景颜色。 我们在整个设计中使用的样式与 Food Recipes Layout Pack 完美匹配，但该方法适用于您选择的任何类型的设计。

• 背景颜色：#ff7864

背景图片

接下来添加背景图像。 如果您想使用与本教程中完全相同的内容，可以在本教程开头可以下载的文件夹中找到它。

• 背景图片尺寸：适合

间距

转到该部分的设计选项卡，然后删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

添加第 1 行

列结构

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

渐变背景

尚未添加任何模块，打开行设置并应用渐变背景。

• 颜色 1：RGBA(10,10,10,0.05)
• 颜色 2：RGBA(10,10,10,0.18)

浆纱

移动到行的设计选项卡并修改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是
• 最大宽度：1680px

间距

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

• 顶部填充：0px
• 底部填充：0px

第 1 列设置

间距

然后，打开第 1 列设置并在设计选项卡中添加一些自定义填充值。

• 顶部填充：5%
• 底部填充：5%
• 左填充：5%
• 右填充：5%

边界

我们也在桌面上使用右边框。

• 右边框宽度：
  • 桌面：2px
  • 平板电脑和手机：0px
• 右边框颜色：#ff7864

第 2 列设置

间距

接下来，打开第 2 列设置并对其应用以下填充值：

• 顶部填充：5%
• 底部填充：5%
• 左填充：5%
• 右填充：5%

将图像模块添加到第 1 列

上传标志

是时候添加模块了，从第 1 列中的图像模块开始。上传您选择的徽标并根据需要对其进行样式设置。

将文本模块添加到第 2 列

添加 H2 内容

在第二列中，我们添加了一个带有一些描述性 H2 内容的文本模块。

H2 文本设置

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

• 标题 2 字体：Cormorant Garamond
• 标题 2 字体粗细：中等
• 标题 2 文本颜色：#ffffff
• 标题 2 文字大小：
  • 台式机和平板电脑：40px
  • 电话：35px
• 标题 2 行高：1.3em

添加第 2 行

列结构

进入下一行。 在这一行中，我们将放置所有小部件。 选择以下列结构：

背景颜色

尚未添加任何模块，打开行设置并应用背景颜色。

• 背景颜色：RGBA(10,10,10,0.05)

浆纱

转到设计选项卡并按如下方式更改尺寸设置：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是
• 最大宽度：1680px

间距

删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

所有列间距

然后，单独打开列并将以下填充值应用于其中的每一列：

• 顶部填充：5%
• 底部填充：5%
• 左填充：5%
• 右填充：5%

第 1 列边框

接下来，我们将为第 1 列添加边框。

• 右边框宽度：
  • 台式机和平板电脑：2px
  • 电话：0px
• 右边框颜色：#ff7864

第 2 列边框

我们对第二列使用相同的边框，但具有一些不同的响应值。

• 右边框宽度：
  • 桌面：2px
  • 手机和平板电脑：0px
• 右边框颜色：#ff7864

第 3 列边框

最后但并非最不重要的一点是，我们还将为第三列添加一个右边框。

• 右边框宽度：
  • 台式机和平板电脑：2px
  • 电话：0px
• 右边框颜色：#ff7864

将侧边栏模块添加到第 1 列

是时候添加我们的帖子类别菜单小部件了！ 为此，我们将使用 Divi 的内置侧边栏模块。 将一个添加到行的第一列。

选择页脚区域 #1

选择第一个页脚区域。 这与我们创建的第一个帖子类别菜单相关联。

• 小部件区域：页脚区域 #1

布局

转到模块的设计选项卡并禁用边框分隔符。

• 显示边框分隔符：否

正文设置

还要修改正文设置。

• 正文字体：蒙特塞拉特
• 正文字体重量：中等
• 正文颜色：#ffffff
• 正文大小：13px

间距

并通过在间距设置中添加一些顶部和底部填充来完成模块设置。

• 顶部填充：5%
• 底部填充：5%

克隆侧边栏模块两次并在第 2 列和第 3 列中放置重复项

完成第一个侧边栏模块后，您可以将其克隆两次并将重复项放置在第 2 列和第 3 列中。

更改页脚区域

修改每个副本的小部件区域以显示您创建的不同帖子类别菜单。

• 小部件区域：页脚区域 #2

• 小部件区域：页脚区域 #3

将侧边栏模块添加到第 4 列

现在，在最后一栏中，我们添加了一个新的侧边栏模块。

选择页脚区域 #4

在这个模块中，我们选择我们创建的包含我们最近的帖子的第四个页脚区域。

• 小部件区域：页脚区域 #4

标题文字设置

转到模块的设计选项卡并修改标题文本设置，如下所示：

• 标题字体：鸬鹚 Garamond
• 标题文字颜色：#ffffff
• 标题文字大小：30px

正文设置

也对正文文本设置进行一些更改。

• 正文字体：蒙特塞拉特
• 正文字体重量：中等
• 正文颜色：#dddddd
• 正文大小：13px

间距

并通过向模块的间距设置添加一些自定义顶部和底部填充来完成模块设置和本教程。 就是这样！ 在您的网站上查看结果之前，请确保保存所有 Divi Theme Builder 更改。

• 顶部填充：5%
• 底部填充：5%

预览

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

桌面

移动的

最后的想法

在本教程中，我们向您展示了如何将 Divi Theme Builder 与 WordPress 页脚小部件和 Divi Sidebar Module 结合使用。 更具体地说，我们向您展示了如何将帖子类别菜单小部件添加到您的全局页脚，以使您的访问者的导航旅程更轻松。 这种方法将帮助您使用 Divi 的内置选项设置页脚项目的样式，同时将页脚菜单和小部件保留在您的 WordPress 后端中。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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