全国咨询热线:18720358503

如何创建网站给用户-AVADA主题实现图片菜单导航

类别:媒体报道 发布时间:2021-04-15 浏览人次:

--------

如何创建网站给用户

-------Avada的作用强劲,今日来详细介绍下应用Avada mega menu 来完成AVADA主题完成照片菜单导航栏栏的方式(导航栏照片)

注:本文根据Avada 6.02, 假如你還是4系或5系的版本号,提议升級,由于假如你不升級的话,后边会出現许多bug,avada主题升級参照AVADA主题升級升级的方式


提前准备內容: 每个1级归类对应一张照片,宽度100~500px不等,高宽比按占比调,一般宽高比为1.1或1.3:1等,实际的宽度依据具体状况调剂,本文示范性的照片的尺寸为500×500。假如是镂空的png文件格式照片更好。


我今日示范性的是6个归类,仅有一级归类,以下。假如你有8个,10个,12个归类也没难题,但是最好是偶数个,便于排版。


LED bulb
LED Streetlight
LED Flood light
LED spot light
LED High bay
LED Linear light


进到appearance - menus 菜单下面,点开你要设定照片导航栏的上一级,也就是我示范性的product,随后点一下avada menu options开展设定。


Mega Menu Number of Columns 挑选适合的列数,例如我的是6个归类那就挑选2行三列,还可以一行6列,你能够依据你的具体状况来设定。


接下来大家进到第一个归类提交导航栏照片,点一下LED Linear light菜单上的小三角进行,随后点一下Avada menu options,随后在Mega menu thumbnail 后边点 Upload image,随后把之前提前准备好的归类照片提交上去。


立即拖进去便可以。再挑选LED the near light 对应的照片,随后把alt标识填一下,再点一下select。


照片早已加上上去了,可是尺寸毫无疑问显示信息不对,需要再次调剂,那末尺寸显示信息多大比较好,这个比较灵便,沒有固定不动的规范。


大家一般选用照片在上面,随后文本在下面的这样一个合理布局。因此照片的宽度要超出文本的宽度。我示范性的这6个归类的最长的宽度在180px左右,因此大家先暂定,这个照片的宽度为180px。


大家根据以下CSS编码来调剂照片的显示信息宽度和高宽比。拷贝以下编码到avada - theme options- Customs Css之中。


.fusion-megamenu-icon{width:280px!important;margin-right:5px;margin-bottom:5px;}
.fusion-megamenu-icon img{max-height:280px!important;}
.fusion-megamenu-wrapper .fusion-megamenu-submenu .sub-menu a{padding:5px 10px!important;}
.fusion-megamenu-wrapper .fusion-megamenu-submenu{padding:10px 0!important;}
.fusion-megamenu-title{padding:0 10px 5px!important;}
.fusion-megamenu-wrapper .fusion-megamenu-submenu:hover {background:#fc821b!important;}
.fusion-megamenu-wrapper .fusion-megamenu-submenu:hover a{color:#fff!important;}
.fusion-main-menu .sub-menu li a:hover{background:#333!important;}
.fusion-megamenu .current-menu-item {background:#fc821b!important;}
.fusion-megamenu .current-menu-item a{color:#fff!important;}

显示信息实际效果以下,随后把width 和max-height这两个主要参数后边的值数据所有改成180(假如你的并不是1:1的照片,那末高宽比就按占比换成相应的值)随后点一下右下角的储存


再更新一下前台接待,大家能够看到,照片早已变大了。可是这样并不是很漂亮,大家一般的把文本放在照片的下面,因此这个情况下大家需要去调剂一下这个照片导航栏的宽度。


大家還是进到avada - theme options - menu - mega menu , 随后Mega Menu Max-Width后边挑选custom width, 随后在下面的框里边键入608。留意这个数据并不是固定不动的,需要依据你自身的具体状况来调。


明确以后点save change储存,随后更新前台接待网页页面。便可以看到早已做到了大家预期的实际效果,上照片下文本的实际效果。


接下来大家来调剂一下照片的hover也有active两种色调。我默认设置设定的色调是橙色,假如你对这个色调不喜爱,或跟你的网站不配配的话,你能够自身去键入一个新的色调。


方式就是在刚刚加上的css编码之中。把这两个地区的色调值换成你自身需要的色调值,随后储存更新便可以有做到实际效果了


上面讲到的方式早已把照片导航栏的实际效果基本做出来了,我觉得早已够用了,可是假如你还想折腾一下别的的实际效果还可以。例如你能够给全部照片导航栏加一个情况,部位在这里。


方式,跟上面的差很少,依然是在第1级归类那里提交照片。第2级归类不需要提交照片。实际效果以下。


不需要的,我写的是方式,要是你学会了方式,你彻底能够依照你自身的具体状况来开展设定。


能够的, 例如说我的site width宽度为1100,你能够设定为1200, 1300直到它的最大值。实际只需要在custom width里边去设定那个数据便可以。

SummaryArticle NameAVADA主题完成照片菜单导航栏的方式DescriptionAVADA的照片导航栏菜单作用是由AVADA自带的Mega menu完成的,方式并不是很难,本文关键解读了两类avada照片导航栏菜单完成的方式,供大伙儿参照,期待能协助到大伙儿Author Hunk Publisher Name Hunk出口外贸建网站营销blog

Hunk, 你好! 用了你共享的方式设定了mega menu,可是如今有一个难题就是往下拉菜单里的照片和文本正中间沒有任何间距,请问这个怎样调剂呢?


Hunk,你好,看了您的实际操作是一级菜单底下归类成商品,随后加上商品照片做为小标志。有方法再二级菜单底下也归类成多个栏目,随后二级菜单下再归类成商品系列的再做小标志呢?这个回应作用仿佛不可以提交照片截图。


你好Hunk,Avada6上 这CSS仿佛不可以用了啊。改动不了mega manu的照片的尺寸了,有新的吗?


恰好需要用到这个作用,把商品照片改成全透明情况或全透明的简图情况实际效果会更佳,谢谢Hunk共享~


Search for: 欢迎定阅Hunk建网站营销blog 添加Hunk QQ群沟通交流 出口外贸建网站1群: 已满
出口外贸建网站2群:
Hunk, 86后,师范学校院校电子器件技术专业大学毕业, 2010年从事出口外贸业务流程工作中,2012年起尝试转型,学习培训WP建网站和SEO。现阶段从事Wordpress出口外贸建网站的工作中和出口外贸自主创业。 本站为Hunk的唯一汉语blog,关键纪录Hunk在Wordpress出口外贸建网站,出口外贸互联网营销的工作中中的一些工作经验和方式,期待帮到别人。 ---------

如何创建网站给用户

------------
下一篇:没有了

推荐阅读

如何创建网站给用户-AVADA主题实现图片菜单导航

Avada的作用强劲,今日来详细介绍下应用Avada mega menu 来完成AVADA主题风格完成照片莱单导航栏栏的方式(导航栏照片)注:文中根据Avada 6.02, 假如你要是4系或是5系的版本号,提议升級,...

2021-04-15
微信h5作品欣赏-【E企盈教程】微信小程序如何对

连接调节早期提前准备工作中1.联络E企盈启用微信小程序系统软件后台管理,2.代理商微信小程序业务流程的代理商商必须提前准备网站域名根据办理备案并申请办理SSL资格证书,网络...

2021-04-15
湘潭市企业网站建设-东莞微官网制作

散播速率快,实际操作简易... 网站访问量有33%来源于移动互联网网并不断升高中 56%的移动互联网网网友每日网上1钟头之上 78%每日网上1次之上 将来发展趋势... 移动互联网网时期,移动...

2021-04-14
免费秒玩小游戏-湖州企业网站建设如何对网页进

公布時间:2020.08.26 访问频次: 网页页面的合理布局太重要,下边湖州企业网站建设网编就和大伙儿来聊一聊网站的合理布局难题,针对公司来讲,在今日,要想创造一个取得成功的...

2021-04-14
图片在线编辑器-凡科抠图入门教程色彩的基本要

Photoshop新手入门实例教程颜色的基本要素腾龙视觉效果 公布 创作者:佚名 我想评价颜色针对一幅著作来讲尤其关键,因此对颜色的掌握是很必须的。触碰过PS的朋友都是听过RGB颜...

2021-04-14
郑州市手机微信每日签到系统软件作用

郑州市手机微信每日签到-出示手机软件及当场技术性适用 手机微信每日签到早已广火爆!常常报名参加大会主题活动及展览会的小伙伴们应当常常看到一些主题活动当场的互动交流...

2021-04-14
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信