本文介绍如何使用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了，注意如果样式和你编辑的不一样，查看是否开启了缓存，清理一下缓存再查看，或者使用无痕模式查看。
