专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章分类
文章标签

如何Mega Menu制作【Astra主题】附视频

文章导航

本文介绍如通过Astra来制作网站Mega Menu(超级菜单)。Astra 提供了可以设置Mega Menu的Nav Menu功能,只需要启用相应的功能模块,你就可以制作带有超级菜单的顶部菜单。

Nav Menu的功能是有Astra Pro提供,再制作之前你需要将Astra升级到高级版本。

如何Mega Menu制作【Astra主题】

高清视频请直接转到B站主页观看!

1、激活模块Nav Menu

image 81 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

2、创建Mega Menu

通过【Appearance】-【Menu】创建一个菜单

image 83 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

点击开需要添加Mega Menu的菜单项目,设置【Astra Menu Settings】

image 84 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

启用这个菜单项目的Mega Menu,启用之后这个菜单项目的子菜单将全部放在一个超级菜单中显示。

你可以设置Mega Menu的宽度,背景等内容,设置完成之后保存并关闭。

image 85 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

Mega Menu width

  • 内容– 将菜单宽度设置为您的内容宽度
  • 菜单容器宽度——限制主菜单的宽度 
  • 全宽– 将大型菜单的宽度设置为屏幕的宽度,但将菜单内容限制为内容宽度。
  • Full Width Stretched – 将大型菜单的宽度设置为全宽,边到边。
  • 自定义宽度– 以像素为单位设置自定义宽度值

背景颜色/图像

背景颜色/图像将设置为父菜单的大型菜单框。您可以使用背景重复、背景大小和背景位置等设置来调整背景图像。

覆盖此大型菜单的颜色?

您可以为父菜单的大型菜单框中的菜单项设置颜色。可用选项有文本/链接颜色、文本/链接悬停颜色、列分隔线颜色。

突出显示标签

这是出现在菜单项旁边的文本。它突出显示菜单。标签可以是免费、促销、新品、精选等。您可以设置标签文本和颜色。

先进的

您可以为菜单项设置 Margin 和 Padding。

3、设置Mega Menu子菜单

点开子菜单的【Astra Menu Settings】

image 86 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

如果勾选【Make this menu as column heading?】改子菜单将作为Mega Menu中某一列的标题显示。

如何Mega Menu制作【Astra主题】

如果想要在标题项目下添加菜单列表,则添加这个标题菜单项目的子菜单。

image 88 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP
image 89 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

在Astra 的 Mega Menu 子菜单设置中:

Column Heading Separator Color:标题菜单分割线的颜色,也就是本文的【Product Category】下面的横线颜色。

Menu Label

Hide Menu Label/Description?:如果你需要影藏菜单描述可以勾选此项目。

Disable Link:关闭菜单项目的链接勾选此项目,本文的【Product Category】菜单是用自定义链接添加,在链接中添加的#空链接,所以不用勾选此项目,如果你添加页面、分类等内容到菜单项目并且不想用户点击跳转可以勾选此项目。

Content Source

内容来源,你可以设置如下:

Default:默认,即使用菜单项目作为内容,也就是本文介绍的添加菜单项目的子菜单到Mega Menu中。

Custom Text:自定义文字,添加一段文字到Mega Menu中。

Temple:添加一个Elementor模板到Mega Menu中。

Widget:添加一个小部件到Mega Menu中。

Highlight Labels

高亮的标签,你可以设置菜单项目高亮标签

image 90 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

Menu Highlight Label:高亮标签文字,对应本文的View All菜单项目的【recommend】

Highlight Label Color:高亮标签的文字颜色

Highlight Label Background Color:高亮标签的文字背景

4、Mega Menu的列设置

通常情况下,我们在以及菜单目录为某一个菜单项目开始Mega Menu设置,对应本文的Products菜单项目。

在一级目录项目下面添加的二级菜单项目,对饮本文的 Product Categorie和Product Gallery自动成为Mega Menu的两列。

而在二级菜单下面添加的三级菜单项目则会自动成为Mega Menu对应列中的内容。

image 91 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP
image 92 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

5、扩展:Mega Menu第二列的Galley是如何实现的

第一步:添加一个自定义链接到Products菜单项目的二级菜单中

链接设置为#,也就是空链接

image 93 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

第二步:进入Astra Menu Settings设置内容来源

内容来源选择小部件,并在小部件中选择gallery,并添加。

image 94 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

添加之后为Gallery添加图片

image 95 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

添加图片之后设置相册

Link to:attachement Page代表链接到添加这个图片的关联页面

Columns:设为2就代表设为2列

Random Order:勾选就代表相册随机排列,每次刷新排列的顺序都不一样

Size:图片尺寸,如果需要图片清晰一点就用full size。

image 97 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

添加之后保存Gallery返回到Astra Menu设置,保存这个Gallery设置,并保存Astra menu 设置,在退出到菜单列表。

第三步:保存菜单设置

image 98 - 如何Mega Menu制作【Astra主题】附视频 - NUTSWP

保存之后刷新页面验证结果。

文章分类
文章标签

最新文章

专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章导航
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!