专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
文章分类
文章标签

2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频

文章导航

本文介绍如何使用Elementor Pro和扩展插件Ultimate Addons for Elementor制作一个带有Off-Canvas和固定页眉的Header模板。

视频参考的模板是我创建的Demo004模板,适用于家居行业的外贸B2B营销网站。

第一步:创建一个Header模板

进入网站后台,Template下面的Theme Builder,选择Header类型的模板,添加一个新的。

创建一个Header模板

第二步:添加Header内容

添加2个section。

第一个section左右2个column。

左边添加一个social icons元素用来添加社交媒体主页链接,居左对齐。

右边添加一个Search orm,Skin设置为Full Screen,居右对齐。

设置2个column的Vertical Align为Middle。

为section添加一个浅浅灰色的底部边框。

然后调整元素样式适配你网站的整体风格。

当然,如果不需要也可以不设置这个Section。

image 133 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

第二个section,有个3个column,一个放logo,一个放菜单,一个放按钮,宽度根据效果自己拖拽即可。

3个column的Vertical Align为Middle。

菜单设置为居右。

按钮设置为居右,按钮可以加链接或者弹出框popup。

为section添加一个浅浅灰色的底部边框。

然后调整元素样式适配你网站的整体风格。

image 134 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

第三步:设置固定在顶部的页眉

选中需要固定的页眉内容,比如我这里是需要设置第二个Section,在页面向下滚动的过程中,固定的顶部。

那么我就选中这个section,在左边的元素编辑窗口中选择Advanced,找到Motion Effects进行设置。

sticky设置为top,在顶部固定。

Sticky On选择Desktop、Tablet、Mobile,在三个终端都显示。

其他设置默认即可。

image 135 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 156 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

第四步:设置响应式布局并添加Off-Canvas按钮

从左下角的按钮,进入Elementor页面编辑器的响应式模式

image 136 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 137 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

那我们设置第二个section在移动端不可见

image 158 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 159 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 160 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

调整Off-Canvas按钮居右对齐

image 161 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 163 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 162 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 164 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

设置这个section固定在顶部

image 165 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

设置这个Section背景色为白色

image 167 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 166 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 157 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

第四步:设置Off-Canvas内容

选中Off-Canvas按钮,设置Off-Canvas弹出内容的宽度,Desktop不显示所以不用设置。

Tablet模式设置为600px。

image 146 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

Mobile模式设置为300PX。

image 147 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 149 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 150 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

模板里面的内容根据你的需求排放和布局,我的模板排放了如下内容。

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

Off-Canvas模板里面的内容

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

Tablet模式下

image 152 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

Mobile模式下

image 153 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

第五步:发布Header

制作完成之后点击左下角的发布按钮

image 154 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

image 155 - 2022如何制作带有Off-Canvas和固定页眉的网站Header(Elementor Pro+UAE)附视频 - NUTSWP

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

想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
微信联系我
Whatsapp联系我
文章分类
文章标签
专注WordPress外贸建站实用教程,提供基于WordPress的外贸建站服务!
外贸建站交流群
广告勿扰
企业微信
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!