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

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

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

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

抢先看食谱

你需要知道什么

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

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

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

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

食谱

第 2 部分:创建类别

第 1 步:转到类别

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

WordPress divi主题

食谱

第 2 步:添加您的父类别

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

食谱

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

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

食谱

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

第 1 步:添加新帖子

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

食谱

第 2 步:给帖子一个标题、特色图片和(子)类别

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

食谱

食谱

谷歌SEO优化服务

第 3 步:修改 Divi 帖子设置

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

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

食谱

第 4 步:切换到 Visual Builder

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

食谱

第 5 步:上传食谱布局

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

H10的年终大促

食谱

第 6 步:删除英雄部分

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

食谱

第 7 步:添加全角部分

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

食谱

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

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

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

食谱

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

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

食谱

高质量外链购买

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

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

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

食谱

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

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

食谱

第 12 步:更改文本设置

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

writesonic
  • 文字颜色:浅色
  • 文本方向:居中

食谱

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

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

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

食谱

第 14 步:更改元文本设置

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

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

食谱

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

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

食谱

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

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

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

食谱

第 2 步:添加父类别

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

WordPress花园粉丝福利

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

食谱

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

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

食谱

食谱

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

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

食谱

食谱

第 5 步:启用 CSS 类

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

食谱

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

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

食谱

食谱

第 7 步:保存菜单

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

食谱

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

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

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

食谱

第 2 步:添加全角部分

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

食谱

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

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

食谱

第 4 步:选择超级菜单

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

食谱

第 5 步:添加背景颜色

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

食谱

第 6 步:链接设置

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

tiktok siteground
  • 活动链接颜色:#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;
...
5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES