文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】

文章导航

本篇教程将使用免费的Elementskit插件进行网站Header和Footer制作,包含如何制作Mega菜单。

1、安装Elementskit插件

网站后台搜索【Elementor】,找到插件Elementskit,并点击【立即安装】,安装成功之后点击【启用】。

安装Elementskit插件

2、插件设置

启用插件后返回插件列表,点击插件【setting】按钮,进入插件设置界面。

image 1 1024x495 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 2 1024x549 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 1024x685 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 1 1024x690 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 2 1024x793 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 3 1024x724 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 3 1024x747 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 4 1024x667 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

3、创建Header

网站后台【ElementsKit】-【Header Footer】,然后点击【Add New】创建一个Header。

image 5 1024x450 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 7 1024x432 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

4、为Header添加内容

Header中会用到的元素有logo,menu,search,Social icon等,如果会使用Elementor编辑器就可以自己按照自己的想法创建,布局和编辑,这里我们通过导入Elementkits现成的模板来快速实现一个Header。

image 8 1024x239 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 9 1024x716 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 9 1024x341 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 10 1024x390 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 11 1024x461 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

所有内容都修改成你自己的信息之后点击【update】发布。

image 12 1024x564 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

发布之后结果

image 13 1024x544 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

5、创建mega菜单

在创建mega菜单之前,确保你Header中的菜单是使用ElementKits Nav Menu元素创建的。

image 14 1024x237 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

然后返回网站后台,【外观】-【菜单】,选择我们要添加Mega菜单的菜单,这里选择是Main Menu,勾选Enable this menu for Megamenu content,然后点击需要添加mega菜单的菜单项目,这里选择是Product项,鼠标移动到该菜单项,点击【Mega menu】按钮。

image 15 1024x522 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

激活mega menu,然后进入mega 菜单的Elementor编辑窗口。

image 17 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

你可以自己创建mega菜单的内容,也可以导入ElementKits的模板进行修改,这里我们还是通过导入模板来演示。

image 18 1024x390 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 19 1024x699 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 19 1 1024x553 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

关闭编辑窗口之后,点击【save】保存mega菜单设置,点击叉号关闭设置窗口。

image 19 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

最后,需要保存一下菜单才能生效。

image 20 1024x502 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

保存之后我们回到页面,刷新页面,可以看到megamenu的效果,mega菜单里面放什么内容,如何布局,你可以使用Elementor自定义。详细的使用教程可以参见官方文档

image 21 1024x329 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

6、创建Footer

创建Footer的方式和Header的方式类似。

image 21 1024x382 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 22 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

footer的内容,我们依旧通过导入模板修改来实现。

image 23 1024x286 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP
image 24 1024x644 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

修改内容之后,发布。

image 24 1024x562 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

查看效果。

image 25 1024x538 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

我们需要把底部主题的版权信息给删除。

image 26 1024x513 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

进入网站自定义,如果网站前台看不到这个入口,回到网站后台【外观】-【自定义】。

image 27 1024x555 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

进入页脚编辑器。

image 28 1024x495 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

删除版权。

image 30 1024x546 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

发布保存设置。

image 31 1024x547 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

刷新页面查看结果。

image 32 1024x540 2 - ElementsKit插件制作网站Header、Footer、Mega Menu【附视频教程】 - NUTSWP

视频教程

文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
相关文章
Elementor添加Bilibili视频2种方法

本文介绍Elementor添加Bilibili视频2种方法,第一种是通过HTML代码插入Iframe,另外一种是通过插件实现,本文会对这2种方法做详细的介绍。 我自己也会在网站中添加B站视频,通常我使用的都是Iframe的方法,这种方法可以写一个全局的CSS代码,来控制样式,然后复制的Iframe代

阅读全文 »
Woodmart主题Elementor元素加载问题

最近发现了Woodmart主题更新之后,Elementor的Table Of Content,Silder轮播自动播放等元素和效果受到了影响,经过一些列的排查和修复之后我将过程整理如下: 一开始我以为这个问题和网站的缓存插件,比如WPRocket有关系,但是停用插件,发现问题仍然存在。 我其他的El

阅读全文 »
Elementor版本回滚教程

本文介绍Elementor版本回滚教操作过程,版本回滚操作在日常网站遇到一些兼容问题,或者当前版本有BUG的情况下非常实用。 Elementor提供版本管理选项,只需要登录到网站后台,进入Elementor的Tools菜单下即可进行Elementor版本回滚操作。 温馨提示:版本回滚的操作虽然是常规

阅读全文 »
2种方法Elementor表单实现电话字段国家代码教程

本教程介绍2种Elementor表单实现电话字段国家代码,默认的Elementor表单电话字段没有国家区号,本教程提供了2个有效的方案,实现根据用户位置自动显示电话号码的国家区号效果。 方案一:Ali Addons For Elementor插件实现表单手机号码国家代码 方案一实现效果如下图,可以根

阅读全文 »
Elementor Popup设置点击连接弹出的2种方法

本文介绍Elementor Popup设置点击连接弹出的2种方法法,在Elementor中创建一个Popup弹出框,我们可以通过多种方式进行点击有弹出设置。 方法一:通过Elementor元素Link的动态标签设置弹出 这种方法仅限于在Elementor编辑中使用,任何带有Link选项的链接都可以进

阅读全文 »
2步解决ACF自定义产品固定链接中没有分类的问题

本文介绍如何解决ACF自定义产品固定链接中没有分类的问题,目前使用ACF(Advanced Custom Fields)创建的自定义内容类型默认是不注册分类的固定链接的,WordPress设置中的固定链接修改也对其无效,这样当我们创建产品和产品分类的时候,产品页面的固定链接中就不包含产品分类的信息。

阅读全文 »
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!