提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

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

视频教程

文章分类
文章标签
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!