本篇教程将使用免费的Elementskit插件进行网站Header和Footer制作,包含如何制作Mega菜单。
1、安装Elementskit插件
网站后台搜索【Elementor】,找到插件Elementskit,并点击【立即安装】,安装成功之后点击【启用】。

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








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


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





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

发布之后结果

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

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

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

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



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

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

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

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


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


修改内容之后,发布。

查看效果。

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

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

进入页脚编辑器。

删除版权。

发布保存设置。

刷新页面查看结果。
