创建带图文的超级菜单(导航菜单)(二)

2023-11-04

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个都添加完成后效果如下。

 

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

主要还是调整填入小工具中的代码。

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建带图文的超级菜单(导航菜单)(二) 的相关文章

随机推荐

  • 使用JS完成一个简单的计算器功能

  • 全球云计算大会·中国站档期调整至11月29-30日, 议题征集及“云鼎奖”申报火热进行中

    近日 第十一届全球云计算大会 中国站议题征集及 云鼎奖 申报正式拉开帷幕 全球各地云计算领域的专家 学者和企业家将齐聚一堂 共同探讨云计算技术的最新发展和应用 据悉 大会将以 创新不止 应用无界 为主题 于本年度11月29 30日在宁波举行
  • 【参考答案】2023年“研究生科研素养提升”系列公益讲座

    一 单选题 1 李同学在撰写文献综述时发现 不少文献存在着不同版本 不同版本之间在页码标注甚至卷册划分上并不一致 下列选项中 李同学正确的处理方式是 将所引文字或观点的出处给出清晰的标示 掩盖转引为原创 转引标注为直接引用 引用译著中文版本
  • vue 动态ref绑定方法

    vue2 动态ref绑定方式 vue3动态组件ref 绑定方式
  • Vue 数据双向绑定原理——Vue 学习笔记(二)

    vue js 采用数据劫持结合发布者 订阅者模式的方式 通过 Object defineProperty 来劫持各个属性的 setter 和 getter 在数据变化时发布消息给订阅者 触发相应的监听回调 也就是说数据和视图同步 数据发生变
  • Atlassian Confluence 远程代码执行漏洞(CVE-2022-26134)漏洞复现

    目录 免责声明 Atlassian Confluence 远程代码执行漏洞 CVE 2022 26134 漏洞复现 漏洞概述 影响版本 漏洞复现 利用POC 利用过程 修复建议 参考 免责声明 本文章仅供学习和研究使用 严禁使用该文章内容对
  • Python实现图像质量评价准则PSNR

    本文引用自 Python代码之计算PSNR pytorch计算psnr qtSunnylove的博客 CSDN博客 计算PSNR的Python代码 网上有下面两种 import cv2 import numpy as np import m
  • windows安装nodejs【详细教程】

    安装nodejs 去官网下载https nodejs org zh cn download 双击安装msi 选择下一步 选择我同意 下一步 选择安装路径 点击下一步 点击下一步 点击下一步 点击安装 点击完成 查看版本号win r输入cmd
  • 线上知识竞答小程序

    前几天恰逢五四青年节 帮我们党支部开发了一套知识竞赛类答题小程序 文章末尾有小程序码可以体验 该小程序目前已完成 用户授权 授权后答题 答题完成展示排名 完整支持知识竞赛答题活动的需求 答题目前已支持单选 多选 判断三种题型 不详细介绍了
  • CATIA Automation对象架构-Application对象详解(一)Document/SettingControllers

    CATIA Automation对象架构 下面是CATIA Automation的对象架构 可以看出 Application是顶层对象 Application对象 从对象架构中 可以看到Application对象下的子对象主要如下 1 Do
  • 51单片机 数码管的静态显示和动态显示

    51单片机 数码管的静态显示和动态显示 数码管 Segment Displays 由多个发光二极管封装在一起组成 8 字型的器件 引线已在内部连接完成 只需引出它们的各个笔划 公共电极 数码管实际上是由七个发光管组成8字形构成的 加上小数点
  • ts如何使用终端直接输出console(基础教程)

    安装 typescript npm install g typescript 安装 ts node npm install g ts node 新建一个ts文件 比如 demo ts function add n1 number n2 nu
  • 前端安全总结

    你的服务器安全么 1 概述 在本人所处的公司的服务器正式遭到黑客攻击之前 一直都以为 黑客 是个遥不可及的词 直到真正成为了受害者时 才猛然意识到安全的重要性 有一些基本经验和心得总结出来 和同行分享一下吧 2 暴破手段 最粗暴的黑客行为
  • AB test 之 广告投放(二)

    在广告投放的A B测试中 有几个重要的注意要点需要考虑 目标和假设 明确测试的目标 并基于此制定假设 确定您希望测试的指标 例如点击率 转化率 收入等 并提出假设 即测试组和对照组之间是否存在显著差异 随机分组 确保测试组和对照组的分配是随
  • 【强烈推荐】 十多款2023年必备国内外王炸级AI工具 (免费 精品 好用) 让你秒变神一样的装逼佬感受10倍生产力 (5) AI编程自动写代码

    个人主页 极客小俊 作者简介 web开发者 设计师 技术分享博主 希望大家多多支持一下 我们一起进步 如果文章对你有帮助的话 欢迎评论 点赞 收藏 加关注 AI 编程自动代码生成 AI现在真的是无敌 连代码都可以生成 我的天 看来程序员失业
  • Conflux Hydra网络Hardfork升级已完成(2022.02.28)

    Conflux Hydra 网络 Hardfork 升级已经完成 目前网络状态稳定 最新网络版本号 v2 0 0 fix END 了解最新动态
  • Java单例模式(解决反射攻击,反序列化攻击)

    单例模式 什么是单例模式 单例模式就是确保类的实例对象只能有一个 类本身要实例化好这个对象提供给其他所有的类访问 单例模式就是为了避免状态不一致 单例模式特定 单例类只能有一个实例 单例类必须自己创建自己的唯一实例 单例类必须给所有其他对象
  • 雷军的发布会,真狠呀!

    在雷军演讲前 人物 用今年的热搜话题向雷军进行了提问 问题1 年年演讲灌鸡汤 算是卖成功学吗 雷军 成功学 说实话我真的不太懂 我每年办演讲 主要想跟大家分享一些我成长的经历 问题2 把失败经历当笑话讲 这心态要怎么练 雷军 刚开始的时候我
  • 比较运算符、逻辑运算符

    不管是比较运算符还是逻辑运算符 重点都是运算 是运算的话都会得到一个结果值 先说比较运算符 大概就是上面这些运算符 看运算符怎么运算的 直接判断这个比较逻辑上是不是正确的 就比如4 3 很明显是正确的 结果是正确的 值是用布尔值表示的也就是
  • 创建带图文的超级菜单(导航菜单)(二)

    Avada带有一个超级菜单功能 基本是在WP原有的基础上扩充的 功能还是挺好用 下面说下如何创建比较漂亮的超级菜单 此文内容主要在于理解超级菜单和其他项目的逻辑关系 搞清楚它的逻辑你就好操作了 本文目录 1 整体思路 2 其他须知 3 创建