WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧。

预览

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

桌面

移动的

发布类别菜单小部件

免费下载全局页脚模板

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

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

转到您的帖子类别

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

发布类别菜单小部件

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

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

发布类别菜单小部件

2.创建几个类别WordPress菜单

转到菜单

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

WordPress divi主题

发布类别菜单小部件

创建第一个页脚菜单

添加第一个页脚菜单并为其命名。

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

发布类别菜单小部件

添加帖子类别

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

发布类别菜单小部件

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

对另外两个帖子类别组做同样的事情。

发布类别菜单小部件

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

发布类别菜单小部件

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

发布类别菜单小部件

3. 创建页脚小部件

转到小部件

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

fiverr建站WordPress程序员

发布类别菜单小部件

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

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

发布类别菜单小部件

发布类别菜单小部件

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

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

独立站选品工具

发布类别菜单小部件

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

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

发布类别菜单小部件

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

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

发布类别菜单小部件

高质量外链购买

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

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

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

发布类别菜单小部件

部分设置

背景颜色

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

  • 背景颜色:#ff7864

发布类别菜单小部件

背景图片

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

JasperAI 10000字免费额度试用
  • 背景图像大小:适合

发布类别菜单小部件

间距

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

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

发布类别菜单小部件

添加第 1 行

立柱结构

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

发布类别菜单小部件

WordPress备份工具updrafplus

渐变背景

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

  • 颜色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

发布类别菜单小部件

标题文本设置

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

  • 标题字体:Cormorant Garamond
  • 标题文字颜色:#ffffff
  • 标题文字大小:30px

发布类别菜单小部件

正文文本设置

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

  • 正文字体:蒙特塞拉特
  • 正文字体粗细:中
  • 正文文本颜色:#dddddd
  • 正文大小:13px

发布类别菜单小部件

间距

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

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

发布类别菜单小部件

预览

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

桌面

移动的

发布类别菜单小部件

最后的想法

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

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