Dragon
  • 欢迎来到主题派官网,主题源码,插件,模板下载。wordpress,thinkphp,discuz,织梦模板,小程序。
主题派主题派  2023-06-16 14:12 主题派 隐藏边栏 |   抢沙发  1 
文章评分 0 次,平均分 0.0

 

Avada 带有一个超级菜单功能,基本是在 WP 原有的基础上扩充的。功能还是挺好用,下面说下如何创建比较漂亮的超级菜单。

此文内容主要在于理解超级菜单和其他项目的逻辑关系。搞清楚它的逻辑你就好操作了。

整体思路

Avada 的超级菜单,实际上是通过调用小工具来实现的效果,所以下文中你会看到我们会创建一些小工具。并且在超级菜单设置里选择上要显示的小工具。

本教程中超级菜单延时我们创建 3 二级菜单。这样能铺满整个顶部好看一些。教程只演示第一个,其他的操作相同。

其他须知

下面的话有点绕,但是很多小白不给他写出来的话。他就是不知道怎么回事,有一定经验的可以跳过本段内容。

为了能够实时预览到超级菜单的显示效果,实际上我们先随便搞了一下网站的全局顶部内容。在菜单中随便先创建一个菜单。并选择显示位置为“Main Navigation”这个导航主菜单。

然后在 Avada 设置中将全局顶部显示超级菜单。

上面截图这一步中的 head 是我创建的一块内容,类似于页面。他会显示到网站所有顶部中。所以你可以直接理解为是个导航栏。

实际上这个 head 类似于一个页面,只不过布局是导航类型。我们类似于将一个页面显示到了网站全局顶部。

创建菜单

我们正常创建一个菜单。

这个菜单将要被我们显示到网站全局顶部导航。所以你可以思考下要显示哪些导航内容。

开启超级菜单

我们一级菜单需要设置下开启超级菜单,设置为 3 列。

 

添加小工具

这里博主准备创建一个带有 3 个图片的二级导航。所以添加 3 个小工具,具体数量根据自己情况决定。

给小工具添加内容

小工具的内容我们随便新建一个页面,然后使用 avada 编辑器编辑。

添加新容器,容器列数选择 1 列。

点击“element”添加元素,元素选择分隔器。因为我们图片是有一定高度的,为了显示好看,我们加一个分隔器,在图片上部分隔出来一段空白,让文字显示在图片下半部分。

分隔器让他只显示再大屏幕上,防止小屏幕上显示错乱。这一点需要慢慢调整分隔器的大小参数。本文受长度限制就不进行小屏幕的细调了。

分隔器参数中,我们设置让他距离底部 10%。分隔器颜色给他选择全透明的。右侧透明度拉到底即可。

你也可以直接填入:rgba(255,255,255,0)

 

然后点“默认编辑器”我们添加一些文本。(在默认编辑器添加文本最后出来的代码比较简洁)

点击“文本”查看他的代码,将其复制下来。

回到我们小工具设置页面,给 menu-1 小工具添加一个文本小工具。

把前面我们的内容,复制到小工具文本里。

设置背景图像和小工具

因为我们要创建带有图片的导航。所以这里的图片大小以及风格最好统一。

图片大小不限,建议是长宽比例 1:2 左右。大致符合你的展示情况即可。

示例图片:

打开菜单编辑页面,我们给作品集下面添加一些自定义链接。

添加后我们需要把里面的 URL 再删掉!

点击“Avada 菜单选项”。添加背景图像。

设置好了背景图像,我们再选择一下要显示的小工具。这里选择 menu-1 小工具。

然后超级菜单列标题需要关闭!

完成后保存菜单!!

到这里我们超级图文菜单第一个二级菜单就完成了,其他两个操作方法相同。依次添加即可。

3 个都添加完成后效果如下。

可能感觉还是一般,具体的细节需要自己微调了。

主要还是调整填入小工具中的代码。具体可以自己摸索下,也可以添加本站 QQ 群交流。

 

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

主题派给主题派打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

主题派
主题派 关注:0    粉丝:0
Wordpress主题,插件,源码商城

发表评论

表情 格式 贴图 链接 私密 签到 常用语
扫一扫二维码分享
×
艾瑞克网