本文介绍如何使用Elementor制作透明和固定页眉，使用Hello Elementor主题是不带页眉设置选项的，需要通过Elementor Pro的Theme buider创建和编辑Header模板来实现网站的页面设置。但是在Elementor Header模板实际制作过程中如果需要同时实现透明和固定页眉还是比较麻烦的，需要借助CSS来实现。
本文是基于Elementor Pro和Hello Elementor主题进行讲解。在操作之前需要确保网站已经安装好对应的主题和插件。
如果你用了Astra Pro，你可以阅读《如何使用Astra主题制作透明和固定页眉？》了解如何实现，Astra 提供了一种通过自定义设置选项的方式来实现透明和固定页头，操作上相对简单和方便。
本站提供Elementor Pro官方授权49元/年一个站点，如有需要可以联系获取。
1、创建Header模板
通过Elementor Pro 的Theme Builder创建Header模板，
我之前写过一篇详细的Header模板制作教程《如何用Elementor Pro制作网站Header？》
这里就不再赘述。
点击添加之后会弹出一个模板窗口，你可以选择Elementor提供的模板进行修改，也可以关闭模板弹出框自己手动创建和添加。
通常我都是手动添加。
2、在模板中创建一个Section
创建一个Section用于放需要透明和固定的页眉内容，比如LOGO，菜单，搜索框这些。
为了体现效果，我这里将真个模板的背景颜色改成了黑色。
注意：需要设置透明页眉的话，Section不不能设置背景颜色。
PS：如果你还要在透明页眉顶部插入一些内容，并且不需要这个内容固定的话，直接再顶部插入一个新的Seciton，并将内容放在里面即可，如果你不需要这个内容透明的话，可以为这个Section设置以下背景颜色。
设置固定和透明页眉section的高度，设置高度是为了后面在页面中设置透明页眉效果的时候，知道将第一个section向上偏移多少个像素。
通常我会设置100px高度。
如果你在透明和固定页面的上面还添加了Section内容，建议也设置好固定的高度。这样页面里面设置透明页面的时候知道向上大概偏移多少像素。
3、设置固定页眉Seciton固定效果
选中要固定的Section，切换到Advance设置，在Motion Effects中设置Sticky为TOP。
需要注意的是Effects Offset需要设置为0以上的数值，这里设置代表当用户鼠标向下滑动多少个像素时出现固定页眉效果。
4、给固定页眉添加CSS效果
这里添加的效果是为了用户在下拉时页眉可以清晰可见，会给固定的section添加背景颜色，并修改字体元素的颜色。
我这个固定页眉中默认设置的菜单字体和搜索图标颜色都是白色的，但是需要在用户向下滚动时固定页眉的背景颜色变成白色，并且里面菜单和搜搜图标的颜色变成黑色。
/*修改sticky--effects固定效果下下面下的固定效果下的背景的背景颜色 */
selector.elementor-sticky--effects{ background-color:#FFFFFF !important }
/*修改sticky--effects固定效果下的section背景颜色切换速度 */
selector{ transition: background-color 1s ease !important; }
/*修改sticky--effects固定效果下的section高度 */
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }
/*修改sticky--effects固定效果下的section高度变化速度 */
selector > .elementor-container{ transition: min-height 1s ease !important; }
/*修改sticky--effects固定效果下的section内菜单字体的颜色wei为黑色，这里需要根据自己元素的选择器进行设置不可以直接复制*/
selector.elementor-sticky--effects .elementor-nav-menu--main .elementor-item {
color: #54595f;
}
/*修改sticky--effects固定效果下的section内搜索按钮图标颜色为黑色，这里需要根据自己元素的选择器进行设置不可以直接复制*/
selector.elementor-sticky--effects .elementor-search-form__toggle{
color: #54595f;
}
需要注意是的是，上面代码中前面三个代码可以直接复制生效，后面两个是修改Section内部元素在固定页眉中的颜色需要根据自己网站的元素选择器进行设置，直接复制这段代码是不会生效的。
如果你会一点CSS选择器的相关知识，应该可以轻松应对。
设置之后默认的透明页头效果如下：
用户滚动页面向下时效果如下图
5、固定和透明页头在页面中的设置
1）通过设置Display Condition来控制透明和固定页眉在哪些页面展示
如果你的透明和固定页头并不是需要整站显示的，你可以通过Display Condition来进行设置，设置需要展示透明和固定页头的内容和页面或者设置排除项目。
如何设置Elementor Theme Builder模板的Display Condition，可以阅读我之前写的文章《Elementor Display Condition显示条件设置详解(附视频)》
这里我设置这个固定和透明页头在网站的页面展示即可。
其他页面，例如产品分类目录、产品详情、文章分类以及文章详情页面则通过创建一个新的Header模板来展示，这个模板设置固定页眉，不用设置透明页眉效果。
这种方式需要制作两个Header模板以满足不同页面的Header展示效果。
2）在页面中设置透明页眉
我们制作好了透明和固定页眉之后，虽然在页面中已经可以展示了，但是由于页面布局的原因，在页面中并不会自动形成透明页眉的效果，需要我们设置页面中第一个Section的向上偏移像素来实现。
我以首页为例：
我们在首页中通常添加一个Section是Banner内容，但是默认情况下首页的第一个section是排列在Header模板之下的。
我们需要设置首页的第一个Banner的Section向上偏移和Header一样高度的像素。之前我在Header中设置了固定告诉是100px，那么我们就在首页Banner 的Section中设置向上偏移101像素。
注意：Margin TOP我设置-100PX之后发现顶部会有大概1像素的间隙，于是我设置成101像素来覆盖这个1像素，这样顶部就不会有间隙，只要能覆盖顶部的间隙就可以，不需要设置超过Header高度过多的像素来覆盖，否则Header会向下偏移较多，影响视觉效果。
这一步设置好之后，你可以发现你的透明和固定页面在首页就已近设置完成了。
其他页面的设置，你可以参照首页的设置方法即可实现。
3）如何通过只设置一个透明和固定页眉的Header模板来实现不同页面不同页眉效果
通常我们做透明页眉，默认的页眉的内容都是浅色的，比如我做的这个，为了在背景上可以看清楚菜单的文字，我会将文字设置成白色，这样话如果你页面背景也是白色，在不做背景section向上偏移衬托的情况下，用户是看不清楚文字的。
所以我就产生了一个新的思路，直接将页面背景也设置成深色的，这样就算不做背景section向上偏移设置，也会是一个常规的Header展示效果，并且不影响固定页眉的展示。
在这个基础之上，如果需要展示透明页眉效果，就只需要将带有背景图片的section模板设置向上偏移和Header差不多告诉的像素即可。
当然这种方式虽然操作上会更佳简单，但是局限在不能设置一个明亮的默认Header，为了匹配透明页眉效果，Header只能用深色效果来展示。
