关注VPS服务器
相关知识分享

Avada主题Mega Menu宽度如何调整

Avada主题Mega Menu宽度调整是个细节问题,当我们网站产品有很多分类的时候,就要启用 mega menu来丰富分类效果,让二级导航菜单能否放下更多内容。老魏在本文分享调整Avada主题Mega Menu宽度的方法。

调整Avada主题Mega Menu宽度

1、添加几个page页面,比如 products,porduct1~product5,这样方面看效果。

2、Avada Options -> Menu -> Mega Menu 中的 Mega Menu wrapper Max Width,设置最大宽度,默认和Layout中的Site Width一致,也可以改成 100% width 试试,或者根据自己的实际情况调整;

3、Appearance > menus 右侧找到 products 这个 Menu,点击右侧下三角,点击Avada Menu Options,开启 Fusion Mega Menu,而下面的 Mega Menu wrapper width 是用来设置宽度的,如果是 max width就是和Layout中的Site Width一致,fit content就和页面内容宽度一致。

如下图所示老魏是把这两个选项截到一起了,max width 和 fit content多试试就知道哪个适合你用了。

新手要注意的是这两项都是在 products这个一级(顶级)菜单中设置的,不要跑去设置二级菜单products1~product5。

Avada主题menu options 调整Mega Menu宽度

Avada主题menu options 调整Mega Menu宽度

Mega Menu子菜单宽度不同如何设置

就是说二级菜单分类的text文字不会都是一样的,有3个字有8个字的,这时候要考虑给字数多的留出更大宽度来,同时减小字数小的菜单宽度。

这时候直接去二级子菜单中挨个设置宽度百分比,只要保证这几个子菜单的宽度加起来 100%就行了。

具体操作是在 Appearance > menus 右侧找到 products1~products5 这5个 Menu,点击右侧下三角,点击Avada Menu Options,找到 Mega Menu Column Width,我这里依次设置为 20%,35%,15%,15%,15%,这样总和是 100%,如下图看效果。

avada主题Mega Menu子菜单宽度不同设置

avada主题Mega Menu子菜单宽度不同设置

经过这么一番设置就解决了Avada主题Mega Menu宽度调整的问题,这样我们可以根据需要来自定义设计 mega menu宽度了,为我们的网站需要提供服务。

安装 Avada主题前提条件

1、教程使用的国内服务器 1核1g从实际使用来看速度并不快。如果你是学习的话,选择 1核2g配置的服务器起步,如果用 avada主题建站要使用 2核4g配置,这样才能运行流畅。

国内服务器:阿里云腾讯云(都有代金券,付款时抵用省钱)

国外服务器:点我登陆 Vultr 主机

不知道如何选择地域、配置请在页面右侧+老魏的联系方式,我们一起研究。

2、如果是学习 Avada主题,那么也可以不用域名,直接用服务器IP当做网站域名使用。

如果是用来建站,那么就要注册域名了。主要用户是老外的话(外贸网站、B2C/C2C等),建议在国外注册,不要在国内注册。打开namesilo官网,在搜索框里输入要注册的域名,选择好之后注册,付费之前记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。

3、Avada主题

是themeforest中销量第一的wordpress主题,那里面有上万个国外主题销售,感兴趣可以点我去看看。目前在 themeforest上面这款主题是一次付款终身使用,和别的主题一年一付费的情况相比还是蛮划算的。付费后拿到注册密钥留用。

4、建站面板。老魏在本文中使用了宝塔面板,多亏宝塔的可视化操作界面,部署avada主题才这么快速。点我领取宝塔官方赠送 3188元优惠券礼包。新用户可享受0.99元体验1个月专业版。

5、siteground虚拟主机是 wordpress官方推荐的主机,与 wordpress是天生一对。老魏在实际使用当中发现 siteground虚拟主机上面的 wordpress网站速度、稳定性都很棒,而且在国外测试评分网站的得分也很高,如果你打算长期运行外贸网站,老魏强烈建议选择 siteground虚拟主机。

如果你要做外贸网站,点我打开 siteground去注册一个新账号,开始你的外贸建站之旅吧。

关于 siteground建站:siteground专题

本文是全系列中第8 / 30篇:Avada

赞(0) 打赏
允许转载,保留出处:魏艾斯笔记 » Avada主题Mega Menu宽度如何调整

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏