本文介绍如何使用Elementor Pro和扩展插件Ultimate Addons for Elementor制作一个带有Off-Canvas和固定页眉的Header模板。
视频参考的模板是我创建的Demo004模板,适用于家居行业的外贸B2B营销网站。
第一步:创建一个Header模板
进入网站后台,Template下面的Theme Builder,选择Header类型的模板,添加一个新的。

第二步:添加Header内容
添加2个section。
第一个section左右2个column。
左边添加一个social icons元素用来添加社交媒体主页链接,居左对齐。
右边添加一个Search orm,Skin设置为Full Screen,居右对齐。
设置2个column的Vertical Align为Middle。
为section添加一个浅浅灰色的底部边框。
然后调整元素样式适配你网站的整体风格。
当然,如果不需要也可以不设置这个Section。

第二个section,有个3个column,一个放logo,一个放菜单,一个放按钮,宽度根据效果自己拖拽即可。
3个column的Vertical Align为Middle。
菜单设置为居右。
按钮设置为居右,按钮可以加链接或者弹出框popup。
为section添加一个浅浅灰色的底部边框。
然后调整元素样式适配你网站的整体风格。

第三步:设置固定在顶部的页眉
选中需要固定的页眉内容,比如我这里是需要设置第二个Section,在页面向下滚动的过程中,固定的顶部。
那么我就选中这个section,在左边的元素编辑窗口中选择Advanced,找到Motion Effects进行设置。
sticky设置为top,在顶部固定。
Sticky On选择Desktop、Tablet、Mobile,在三个终端都显示。
其他设置默认即可。

固定的section是没有背景色的,我们在向下滚动页面时,页面中有颜色的内容会和固定页眉重叠影响阅读,所以需要设置这个固定页眉的section背景颜色为白色。

第四步:设置响应式布局并添加Off-Canvas按钮
从左下角的按钮,进入Elementor页面编辑器的响应式模式

然后切换到Tablet模式,查看Header效果

可以看到上面的布局并不是我们想在移动端看到的效果,移动端我希望只看到左边一个logo,右边一个Off-canvas按钮就可以,然后搜索框和social icons还有按钮等都放在Off-canvas的内容中。
那我们设置第二个section在移动端不可见

添加一个新的section,左右两个column布局,左边放LOGO,右边放一个Off-Canvas元素,并设置其在Desktop不可见。

通过修改column的百分比,适当调整LOGO的大小,左边column20%,右边column80%。

调整Off-Canvas按钮居右对齐

设置这个section中的两个column上下对齐为居中

设置按钮:删除文字,添加一个icon

设置这个新的section在Deaktop不显示

设置这个section固定在顶部

设置这个Section背景色为白色

切换到Mobile模式,调整2个Column的内容占比,30%和70%,

最后设置第一个Section在移动端不显示,这样移动端只看到一个logo和一个Off-Canvas按钮。

第四步:设置Off-Canvas内容
选中Off-Canvas按钮,设置Off-Canvas弹出内容的宽度,Desktop不显示所以不用设置。
Tablet模式设置为600px。

Mobile模式设置为300PX。

设置Off-Canvas的内容类型为 Saved Section,选择你做好的Off-Canvas section模板

如果你还没有做好,回到网站后台,进入Temples,创建一个Section类型的模板。

模板里面的内容根据你的需求排放和布局,我的模板排放了如下内容。
红色框内容的就是Off-Canvas模板里面的内容,做这个模板的时候需要注意也需要调一下响应式的布局效果。你也可以发布之后实际查看之后,觉得哪里需要调整的再回来修改这个模板。

添加之后,在编辑状态下预览效果。
Tablet模式下

Mobile模式下

第五步:发布Header
制作完成之后点击左下角的发布按钮

选择Dispaly Condition(展示设置),通常选择为整站。然后点击【Save&Close】,这样就保存发布了我们制作的Header。

发布之后就可以查看自己制作的header了,注意如果样式和你编辑的不一样,查看是否开启了缓存,清理一下缓存再查看,或者使用无痕模式查看。