本篇教程将使用免费的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的内容,我们依旧通过导入模板修改来实现。
修改内容之后,发布。
查看效果。
我们需要把底部主题的版权信息给删除。
进入网站自定义,如果网站前台看不到这个入口,回到网站后台【外观】-【自定义】。
进入页脚编辑器。
删除版权。
发布保存设置。
刷新页面查看结果。