如何使用 Divi 的食物食谱布局包为您的食谱页面创建一个超级菜单

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

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的免费食品食谱布局包向您的食谱页面添加大型菜单。 此菜单将包括您的食谱类别，并将显示在一个大型菜单中，以方便您的访问者进行搜索。 我们没有将食谱布局用于页面，而是将其用于帖子。 这使您可以为每个食谱分配类别，人们也可以在评论部分与您互动。 在深入研究用例之前，让我们从视觉角度快速了解一下我们将在此用例中创建的内容。

抢先看

你需要知道什么

• 有多种方法来处理菜单，我们正在应用的一种方法可以让您自由添加您想要的任何食谱并排除其他食谱
• 我们正在使用食谱布局而不是页面创建食谱帖子（允许人们按类别浏览并在评论部分进行互动）
• 特色食谱帖子需要手动添加到您的菜单（这意味着您需要保持此菜单更新，具体取决于您发布新食谱的频率）
• 不要将所有食谱都添加到此菜单中，因为这会使访问者不知所措，他们总是可以转到类别页面以查看所有食谱

第 1 部分：从主菜单中排除食谱页面

第 1 步：转到菜单和删除个人资料页面

如果您已将食谱页面包含在主菜单中，请转到主菜单并将其删除。 如前所述，我们将为帖子而不是页面使用菜谱布局。

第 2 部分：创建类别

第 1 步：转到类别

在我们创建任何帖子之前，让我们先创建帖子类别。 为此，请转到 WordPress 仪表板 > 帖子 > 类别.

第 2 步：添加您的父类别

您需要添加的第一个类别是父类别。 例如，在此示例中，我们使用早餐和午餐作为父类别。 添加类别标题并确保父类别选项设置为“无”。

第 3 步：添加您的子类别并分配给父类别

根据您的父类别，您可以添加任意数量的子类别。 只需确保每次添加子类别时，都为其分配了正确的父类别。

第 3 部分：根据菜谱布局创建帖子

第 1 步：添加新帖子

现在我们有了类别，是时候创建食谱帖子了。 我们将向您展示如何从头开始创建一篇文章，之后，您还可以重复使用我们将保存的布局来创建其他食谱文章。

第 2 步：给帖子一个标题、特色图片和（子）类别

添加帖子后，为帖子命名，上传特色图片并选择与菜谱帖子匹配的父类别和子类别。

第 3 步：修改 Divi 帖子设置

为了确保菜谱布局以我们想要的方式显示，我们将使用以下 Divi 发布设置：

• 页面布局：全宽（这将删除您帖子的侧边栏）
• 帖子标题：隐藏（我们将在 Visual Builder 中添加帖子标题）

第 4 步：切换到 Visual Builder

现在，切换到 Visual Builder，我们将在其中修改外观。

第 5 步：上传食谱布局

您需要在 Visual Builder 中做的第一件事是上传菜谱布局。 单击页面底部的圆圈，转到加号图标并向下滚动预制布局选项卡，直到找到 Food Recipes Layout Pack。 在那里，选择食谱布局并单击“使用此布局”。

第 6 步：删除英雄部分

此布局的英雄部分不包含帖子标题。 但是，我们确实希望它自动出现在我们的页面上。 这就是为什么我们要删除这个英雄部分并创建一个新的部分。

第 7 步：添加全角部分

不要使用标准部分，而是使用全角部分。

第 8 步：将特色图片添加为部分背景图片

添加全角部分后，使用特色图片作为背景并进行以下设置：

• 背景图片尺寸：封面
• 背景图片位置：居中
• 背景图像重复：不重复
• 背景图像混合：乘法（这将有助于混合我们将在以下步骤中添加的背景图像和背景颜色）

第 9 步：添加背景颜色叠加

您可以通过选择灰色来决定要使图像（和文本可读）有多暗。 我们使用的是“#595959”。

第 10 步：将自定义填充添加到全角部分

我们还想为这个全角部分创建一些额外的填充。 转到您的部分的设计选项卡并将以下值添加到间距子类别：

• 顶部填充：85px
• 底部填充：140px

第 11 步：将全角帖子标题模块添加到全角部分

现在我们已经根据需要修改了全角部分，我们可以将全角帖子标题模块添加到该部分。 这将使您的帖子标题及其所有元素自动显示。

第 12 步：更改文本设置

当然，我们希望这个全角帖子标题模块与我们网站的其余部分相匹配。 这就是为什么我们首先将以下设置应用于文本子类别：

• 文字颜色：浅色
• 文本方向：居中

第 13 步：更改标题文本设置

然后，打开标题文本子类别并应用以下设置：

• 标题字体：Cormorant Garamond
• 标题字体粗细：常规
• 标题文字大小：53px

第 14 步：更改元文本设置

我们还将对 Meta Text 子类别进行一些小的修改：

• 元字体：Cormorant Garamond
• 元字体粗细：常规
• 元文本大小：18px

很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务

第 15 步：将布局保存到 Divi 库

我们完成了修改食谱布局！ 当然，您需要根据您的食谱修改其余内容，但您可以重复使用此布局而不是从头开始。 为了能够重复使用此布局，请单击页面底部的圆圈图标，然后通过为其提供匹配的布局名称将布局添加到您的库中。

第 3 部分：创建自定义菜单

第 1 步：转到菜单并创建新菜单

将所有需要的帖子添加到您的网站后，您就可以开始创建将显示在食谱页面上的自定义菜单。 首先转到您的菜单，创建一个新菜单并为您的菜单命名。

第 2 步：添加父类别

接下来打开类别选项卡并将您的父类别添加到您创建的这个新菜单中。

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱？可以免费试用Shopline智能建站工具，一个月都不要一顿火锅的钱！（这里就可以在线申请！） 或者扫描下方二维码

第 3 步：将子类别添加为第一个子菜单项

之后，您也可以添加子类别。 通过将每个子菜单项拖动到父类别的正下方，确保这些是父类别的第一个子子菜单项。

第 4 步：将食谱帖子添加为第二个子菜单项

现在，您可以将您选择的食谱帖子添加到每个子菜单项中。 您自己决定哪个帖子显示在您的菜单上。 这意味着如果您想要显示新的或有特色的食谱，您将需要经常更新此菜单。

第 5 步：启用 CSS 类

接下来，我们需要添加大型菜单 CSS 类。 但在此之前，我们需要先在菜单项上启用 CSS 类。 单击“屏幕选项”并启用 CSS 类。

第 6 步：将超级菜单类添加到父类别

完成后，您可以将“mega-menu”类添加到每个父类别中。

第 7 步：保存菜单

我们已经完成了菜单的创建！ 这里唯一要做的就是保存菜单。

第 4 部分：将自定义菜单添加到食谱页面

第 1 步：使用 Visual Builder 打开食谱页面

我们已经创建了帖子和菜单，唯一剩下要做的就是将这个菜单添加到我们的食谱页面。 为此，首先在食谱页面上启用 Visual Builder。

第 2 步：添加全角部分

然后，在该页面的英雄部分正下方添加一个全角部分。

第 3 步：将全角菜单添加到全角部分

我们使用全角部分的原因是它允许我们在页面上添加一个选择菜单。 我们将用来添加此菜单的模块称为全宽菜单。

第 4 步：选择超级菜单

将全角菜单添加到全角部分后，选择您在本教程前一部分中创建的菜单。

第 5 步：添加背景颜色

然后，打开背景子类别并为您的模块指定“#ffb8ad”背景色。

第 6 步：链接设置

接下来，转到此全角菜单模块的设计选项卡，并将以下设置应用于链接子类别：

• 活动链接颜色：#FFFFFF
• 下拉菜单文本颜色：#FFFFFF
• 移动菜单文本颜色：#FFFFFF
• 文本方向：居中

第 7 步：下拉菜单设置

向下滚动“设计”选项卡，打开“下拉菜单”子类别并对其应用以下更改：

• 下拉菜单背景颜色：#ff7864
• 下拉菜单线条颜色：#ffffff
• 移动菜单背景颜色：#ff7864

第 8 步：菜单文本设置

我们还需要通过转到“菜单文本”子类别并应用以下更改（匹配整个布局包）来更改此菜单的文本设置：

• 菜单字体：Cormorant Garamond
• 菜单字体粗细：粗体
• 菜单文字大小：18px
• 菜单文字颜色：#FFFFFF

第 9 步：将自定义 CSS 添加到主题选项

我们需要做的最后一件事是添加一些自定义 CSS 代码以获得与示例中完全相同的结果。 为此，请转到您的 WordPress 仪表板 > Divi > 主题选项 > 向下滚动直到遇到“自定义 CSS”并添加以下 CSS 代码行:

.fullwidth-menu-nav li.mega-menu>ul>li>a:first-child {
 border-bottom: 1px solid #FFFFFF;
 font-size: 20px;
 margin-top: 15px;
 text-transform: uppercase;
 padding-bottom: 20px;
}
.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu .nav li ul {
 border-radius: 5px;
 padding-top: 10px;
...