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

Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频)

文章导航

本文介绍Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程。Elementor Pro原生插件一直没有引入粘性和透明页眉的功能,虽然可以通过元素的sticky属性来实现下拉固定页眉,但是没法同步实现透明页眉的效果,这款插件很完美的解决了这个问题。

之前我是通过CSS代码来Elementor Pro的粘性和透明页眉效果,如果你熟悉CSS代码可以试试这个方法。如果不熟悉的CSS代码的话,这款插件你一定会很喜欢。

1、在线安装Sticky Header Effects for Elementor插件

Sticky Header Effects for Elementor插件是一款免费插件,你可以直接从网站后台的插件库中搜索并在线安装激活。

Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频)

安装激活之后你可以在Elementor Containner元素的Advanced标签卡中看到Sticky header Effects设置项目。实际上这个功能也只对Containner元素生效。

image 10 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

2、制作一个Header模版

Elementor Pro的Header模版制作过程我在本站的Elementor新手构建外贸网站系列教程中已经写过,详细过程请点击阅读下面的文章。

https://nutswp.com/elementor-pro%e5%88%b6%e4%bd%9c%e7%bd%91%e7%ab%99header

3、为Header模版添加Elementor Pro粘性和透明页眉效果

这部分在文章末尾有视频教程。

1)在Advanced中开启Sticky header Effects功能。

选中模版中的页眉Containner元素,在Advanced中开启Sticky header Effects功能。

image 11 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

2)Sticky header Effects功能和参数设置

开启Sticky Header Effects之后你会看到很多设置项目。

image 15 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Enable On

设置在哪些终端生效。

image 16 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Scroll Distance

设置用户滚动页面到多少像素粘性标题生效。设为1代表用户滚动页面向下1px,粘性页眉就生效。

image 17 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Transparent Header

开启透明页眉。

image 18 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Background Color

设置向下滚动页面时,粘性页眉的背景颜色。(这里我使用全局颜色是不生效的,需要手动选择具体的颜色)

image 20 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Bottom Border

设置向下滚动页面时,粘性页眉底部边框,同样颜色不能使用全局颜色,必须手动选择。

image 21 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

另外需要在Containner的Style中预设边框属性,粗细为0px,否则也是不生效的。

image 23 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Shrink Header

设置向下滚动页面时,粘性页面高度收缩效果,需要设置一个收缩的高度,同时可以在Layout中给页面Containner预设一个大于收缩高度的固定高度。

image 22 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

比如我在Container的Layout中设置固定高度为120px,这样当页面向下滚动时,Header的Containner高度会从120px自动收缩为90px。

image 24 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Shrink Header

设置向下滚动页面时,LOGO收缩效果,需要设置一个收缩高度百分比数值,比如我设置为50,则代表页面向下滚动式LOGO自动收缩到原来50%的高度(这里收缩是等比收缩)。注意这里只对Elementor的LOGO元素生效,如果你是用图片元素做的LOGO展示则不会生效。

image 25 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Change LOGO Color

这里设置LOGO的颜色,分为滚动之前(Before Scrolling)和滚动之后(After Scrolling),White LOGO表示将LOGO改为纯白色,Black LOGO表示将LOGO改为纯黑色。

image 26 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

另外在After Scrolling中还有Full Color Logo设置,代表将LOGO设为原本的颜色。

image 27 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

如果你开启了透明页眉,并且你的Banner为黑色调,彩色的LOGO无法凸显,你可以设置Before Scrolling中的LOGO颜色为白色,那么实际在也也买中的效果如下:

默认情况下是白色LOGO

image 28 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

页面滚动之后LOGO重新变成原来颜色

image 29 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Blur Background

设置页面向下滚动时,粘性页面背景模糊效果。如果你设置的背景是纯色,可能看不出效果。

image 30 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

# Hide header on scroll down

设置当页面乡下滚动时,页眉Containner自动隐藏,再次向上滑动时才会出现。你需要设置一个Scroll Distance (px)值,也就是当页面向下滚动多少高度时,页眉Containner隐藏。

image 31 - Sticky Header Effects for Elementor插件实现Elementor Pro粘性和透明页眉教程(视频) - NUTSWP

4、粘性和透明页眉效果预览

我将上文中讲解设置的内容保存,最终生成的效果制作成视频如下:

5、视频教程

高清视频请转到我的B站主页观看→

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