文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至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元!
文章标签
相关文章
Admin Column设置页面无法访问处理

最近遇到Admin Column设置页面无法访问的问题,尝试停用所有的插件,切换主题都无法解决。也尝试了重新安装插件,或者安装之前版本,或者免费版本。 查阅了官方的文档说是用户权限的问题,经过各种尝试都没有解决。 最后找到下图中强制运行安装脚本的方式,尝试了一下,完美解决问题。 最后判断可能是数据库

阅读全文 »
WordPress网站添加WhatsApp聊天的终极指南

本文介绍实现WordPress网站添加WhatsApp聊天的方法,WhatsApp是外贸最常用的在线聊天工具之一,也是外贸网站最常用的聊天工具。 通常我们是通过实现点击跳转的方式打开本地的WhatsApp程序,并且直接打开链接对应的账号聊天窗口。 建议的做法网站设置一个全局的WhatsApp连接入口

阅读全文 »
B2B外贸建站Cookies同意横幅设置指南2025

本文介绍如何设置B2B外贸网站的Cookies同意横幅,Cookies同意横幅设置需要基于B2B外贸网站隐私政策和不同地区的法律要求去设置,本文将详细介绍需要设置Cookies同意横幅的场景,如何选择合适的CPM平台,如何完成网站Cookies横幅设置的详细操作步骤。 1、什么是Cookies? C

阅读全文 »
通过CSS代码美化Gtranslate自动翻译Popup的外观

本文介绍如何通过CSS代码美化Gtranslate自动翻译Popup的外观,默认的Popup外观虽然也很好看,但是他的弹出框在网页中是居中显示的,并且还会添加黑色蒙版,用户体验比较差。 Gtranslate小部件的其他显示模式也不能完全匹配网站的展示需求,调研了之后,我使用Popup模式,并通过CS

阅读全文 »
Elementor添加Bilibili视频2种方法

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

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

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

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