文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

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

相关内容
WP基础:固定链接设置

本文介绍WordPress网站的固定链接设置,这是一项基础的WordPress设置,固定链接对SEO也有一定的影响。固定链接结构应该在网站创建之初或者网站上线之前设置好。 WordPress 中的固定链接是什么? 固定链接实际上就是用户通过浏览器访问某一个页面的唯一的地址,之所以称其为固定链接,就是

阅读全文 »
WP基础:搜索引擎可见性设置

通常我们安装启动一个新的WordPress网站,WordPress的基础设置中默认的搜素引擎可见性是开启的,但是我们在制作网站的过程中,网站内容是不完备的,所以并不希望搜索引擎索引网站的页面。 我们可以通过WordPress基础设置中的阅读设置页面,勾选上【 建议搜索引擎不索引本站点】,这样搜索引擎

阅读全文 »
Elementor的操作记录和修订版本

本文介绍如何借助Elementor的操作记录和修订版本进行Elementor页面恢复操作? 如果你在找古腾堡编辑器的修订版本的操作方法,请阅读《古腾堡编辑器的修订版本》 Elementor目前有2种画布窗口模式,所以我会分别介绍修订版本操作在哪里进入编辑。 如果你是传统的画布窗口 在编辑窗口左侧工具

阅读全文 »
WordPress语言设置基础教程

本文介绍WordPress语言设置基础教程,WordPress默认的语言是英文,但是支持非常多语言,你可以根据你的需求,将网站的语言设置成其他语言,同时还可以单独设置后台语言。 如何进行WordPress语言设置? 安装好WordPress网站之后,就可以设置网站的默认语言,在网站后台的Settin

阅读全文 »
Elementor Floating Buttons移动端全宽不生效

Elementor新出的Floating Buttons功能,发现了Mobile Bar的移动端全宽不生效,这个问题我在本地测试发现所有的Mobile Bar模版的移动端全宽开启都不生效。 根据排查的方法,我也进行了一些的排查工作,发现问题任然存在。 于是通过自定义CSS代码,修复了这个问题。 CS

阅读全文 »
文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!