罗伊 
当访客滚动时,粘性标头会固定在屏幕顶部。无论有人走多远,您的徽标、菜单和号召性用语按钮都可以触及,这就是为什么几乎每个 SaaS 和代理网站都会发送一个。
本指南展示了如何使用免费在 Elementor 中创建粘性标头 主插件主题生成器(elementor Pro),所以你就不需要了,而我在这里使用 Master Addons 的时候,方法是通用的:将头部构建为模板,然后将其容器位置设置为固定。任何允许你在 Elementor 中编辑头部的头部构建器都遵循相同的三次点击。
2020版的这篇帖子告诉你把一个CSS ID掉到一个版块上粘贴到导航菜单小部件中,那就是Sections时代,Elementor从3.6开始就使用Flexbox Containers作为默认布局,位置控件现在正好坐在面板中,所以整个CSS ID舞就没有了。
2种不同的行为被叫成同一个名字,而混在一起就是为什么人们最终会去寻找一个不存在的环境。
甲 固定标头 从页面加载且永不离开的那一刻起就在屏幕上。就是这样 position: fixed does,而这就是我们在这里构建的。
甲 滚动粘性标头 正常坐在顶部,滚动离开,然后当访客向上滚动时滑回,你会看到它被称为智能滚动或隐藏滚动,它需要滚动效果,elementor保留了pro中的那些。
对于大多数网站来说,固定标头是您实际想要的标头,也是您可以免费构建的标头。
1个起点,一个普通的Elementor头像其他任何容器一样坐在页面顶部。
向下滚动一点就消失了。徽标、菜单、请求免费演示按钮,所有这些都从屏幕顶部掉落。因此,访问您的定价部分并想要单击"联系人"的访问者必须向上滚动才能再次找到菜单。
这就是粘性标头解决的全部问题。
您需要免费的 Elementor 版本 3.6 或更新版本,以便打开容器。
设置也需要头模板才能应用到。Elementor 自己的主题生成器仅限 Pro,因此请获取一个免费的: 主插件 包括免费 标头生成器并且其主题生成器还处理页脚、404、档案和单个模板。
已经有来自另一个插件的标头模板了吗?跳到步骤 2。位置设置是本机 Elementor,因此无论您的标头来自哪里,其行为都相同。
去 主插件 > 主题生成器。你的模板按类型列出。我的有一个头和一个页脚,都是Active,都设置为在整个站点上显示。
还没有头?点击 添加新模板、将类型设置为header、打开激活、将条件设置为整个站点。的 标头生成器文档 盖上它,流就是我在里面走过的那条流 elementor 中页脚的编辑指南.
悬停标头模板并点击 使用元素器编辑。标头在自己的画布上打开。
人们经常会错这个,所以这里要准确地说:你想要 外容器 的头。不是标志,不是导航菜单小部件,也不是一个嵌套的容器塞在里面。
可靠的确定方法是 结构 panel,top bar中的图层图标,点击那个树中的top-level Container整个头部应该突出显示,如果只有logo或者菜单亮起,你已经抓到一个子元素,在上面设置位置会把那个小部件钉在屏幕上,而不是你的头部看起来很奇怪,首先检查你的结果是否很奇怪。
选择标头容器后,打开 高级 选项卡并展开 布局 部分。 位置 下拉有三个选项。
Default就是你现在拥有的:头部随页面滚动离开,Absolute将头部固定到页面而不是屏幕上,所以它仍然滚动关闭,这是为了覆盖头部,而不是粘性固定到视口,这就是你想要的。
挑 固定并且面板随着方向控制而扩展。
将水平方向设置为左侧,偏移量为 0并且垂直方向到顶部,偏移量为 0.两个上的零都将头粘到视口的最左上角。如果您愿意,请将头浮在顶部边缘下方一点,请提高垂直偏移。
Elementor 还会向您发出警告: “自定义定位不被认为是响应式网页设计的最佳实践,不应过于频繁地使用” Ignore it。就是一般的注意事项,不要通过布局散射固定和绝对元素,而固定头是调用正确的教科书案例,做完的时候查看移动视图就可以了,我再来。
仍在布局部分,找到 Z 索引 field 并把它设置成舒适的高。我用99。
Z-index决定两个重叠时哪个元素位于顶部,一个固定的标头保证在访问者滚动时重叠您的页面内容,如果它的z-index太低,内容会直接滚动到它的顶部,这就是典型的错误,其中标头在技术上很粘,但滑块,弹出窗口和图像直接穿过它。
如果某些东西仍然覆盖头部,请将数字向上碰。它只需要击败它所输给的任何东西,并且大量的滑块和弹出插件将自己的 z 索引设置为数千。
击 发表.
Live站点打开,滚动。头部一直锁定在屏幕顶部向下。
如果它仍然在前端滚动离开但在编辑器中看起来正确,请在开始调试之前清除缓存。缓存插件将愉快地为旧标头 CSS 服务一段时间。
上面的步骤将标头固定。接下来是将一个与真实网站联系后幸存下来的粘性标头与一周后撕回的标头分开。
固定元素从正常页面流中提升出来,因此它停止从任何事物继承背景,如果您从未在标头上设置背景颜色,则您的页面内容会滚动 下面 它并直接显示,当图像经过其后面的那一刻,您的菜单文本就会变成无法读取的汤。
选择标头容器,转到 风格 > 背景的,并赋予它纯色,如果你真的想要一个透明的头,那是一个有效的外观,但随后设计第一个部分,以便在它后面工作。
同根源,一个固定的头不再占用布局空间,所以第一部分向上滑动,填补它留下的空白,一部分最终被困在头后面。
1节添加顶部填充,大致匹配页眉的高度,如果页眉高80px,给英雄80px顶部填充,如果不确定有多高,右键点击前端的页眉,检查一下;高度就在浏览器工具中。
Phone屏幕很短,桌面显示器上感觉还不错的头可以吞下手机的一个严重的大块视口,然后跟随访问者到每个页面。
Elementor 的响应模式下切换到移动视图,并剪切头的垂直填充,位置控制也是每台设备,因此您可以将位置设置回 默认 on mobile only,然后让头部滚动到那里,在通常比较好的通话的长文章页面上,如果你运行自定义断点,则 自定义断点扩展 让您将其调整为真实的设备宽度。
是的,这是值得理解的部分。 位置:固定是本机 Elementor 控件的, 不是一个主插件功能 主插件在这里恰好做一项工作:给你一个在 Elementor 中打开的免费头模板,一旦你在编辑器中,粘性部分就是普通的 Elementor。
因此,如果您使用不同的主题构建器构建标头,或者您的主题导出自己的 Elementor 可编辑标头,则适用相同的高级 > 布局 > 位置 > 固定路径。唯一改变的是您打开标头进行编辑的位置。
Fixed position 将头部抬出页面流,这就是为什么你要把第一部分垫过去,所以后面没有任何隐藏,如果你想跳过那一步,CSS position: sticky 是替代方案,它将头保持在流程中,只有在到达顶部时才将其固定,因此没有内容跳转可以修复。
Catch是你添加CSS的地方。Elementor的每个元素自定义CSS框是一个Pro功能,但免费的主插件 自定义 CSS 扩展 无偿为您提供相同的框。选择标头容器, 打开其自定义 CSS 字段, 并粘贴此内容:
selector {
position: sticky;
top: 0;
z-index: 99;
}selector 是元素的简写,用于您正在编辑的元素,因此您不需要 ID 或类。一个 gotcha:如果任何父容器具有 overflow: hidden粘性默默地停止工作,如此清晰,以至于如果标头拒绝固定,则从祖先。完整的行为记录在。 CSS 位置上的 MDN 参考.
其中三条路线是免费的,并且每条路线都适合不同的需求。如果您更喜欢引导面板而不是原始高级选项卡,则主插件 定位扩展 在一个地方暴露相同的固定控制。
| 方法 | 需要代码 | 成本 | 内容跳转 | 最好的 |
|---|---|---|---|---|
| 固定位置(本机或定位) | 否 | 免费的 | 需要修复填充 | 始终可见的标头 |
| 位置:粘性(自定义 CSS) | 一个片段 | 免费的 | 没有 | 布局干净,无跳跃 |
| Elementor Pro 粘性卷轴效果 | 否 | 支付 | 处理 | 滚动隐藏并缩小 |
| 专用粘性标头插件 | 否 | 免费的 | 处理 | 预构建的滚动效果 |
想要访问者滚动后标题缩小或交换颜色吗?那就是读取滚动距离,CSS 无法自行完成。通过免费的主插件执行几行 JavaScript 自定义 JS 扩展 can切换标题上的类超过滚动阈值,那么你在custom CSS中为该类进行样式。它比一个存储效果的插件更有效,所以在你手工构建之前权衡努力。
100%的时候粘到屏幕上,头部是可见的,所以值得再传一遍。
先修剪高度一个永远不会消失的高头速度很快,而且你保存的每个像素都是访问者可以看到的内容像素,然后看看里面有什么:屏幕上的永久插槽是您最佳链接的好家,无论是演示、定价还是联系按钮。
大站点?大师插件 导航菜单小部件 builds mega 菜单,所以你可以保持整个结构一键离开,而不会出现标题增长的情况。并密切关注权重,因为标题现在加载到每个页面,并且永远不会卸载。 元素速度指南 如果您的加载时间已经很紧,值得阅读。
如果你不想从头开始构建头, 主插件模板库 拥有现成的标头,您可以导入,然后通过相同的步骤使标头变得粘稠,并且 模板套件 船舶匹配整个站点的集管和页脚。
是。《位置:固定控制》是免费元素器的一部分,你只需要一个头模板就可以应用它,而主插件主题生成器免费给你一个,元素器自己的主题生成器及其粘性滚动效果是Pro-only部分。
Page load中始终可以看到一个固定的头,永远不会滚动离开,一个粘性滚动头滚动掉,然后当访问者向上滚动时滑回位置:Fixed给你第一个,第二个需要Elementor Pro的滚动效果。
1个固定页眉从正常页面流中移除,因此下面的部分在它下面向上滑动,在你的第1个部分添加顶部填充,大致匹配页眉的高度,并在页眉容器上设置纯背景颜色。
Z-index太低,在布局下的高级选项卡中,在头部容器上将Z-Index设置为99(或更高),因此它堆叠在页面上所有其他内容之上。
Often not。固定头吃掉手机上稀缺的垂直空间。Elementor的位置控制是每台设备的,所以切换到移动视图,并将位置设置回默认值,或者至少将头的填充切下来。
Elementor中创建粘性标头是一个元素上的三个设置,选择标头容器,将位置设置为固定,偏移为零,抬高z指数,之后的一切都是清理:给标头一个坚实的背景,垫上第一部分,这样后面就没有隐藏任何东西,并在打电话之前检查手机的感觉。
All it运行在免费元素器上,你唯一需要的是一个头模板来编辑,也就是免费 主插件中的主题生成器 provide,连同页脚,404,存档,和单个模板,如果你后来想要工具包的其余部分,那就是 专业计划 cover,但是本教程中没有任何内容需要它。
相关阅读: 如何使用 Elementor 编辑 WordPress 中的页脚, elementor 中如何创建偏斜背景、和 如何使用 Elementor 创建一页网站.
每个 Master Addons Pro 许可证都附带一个 14天无问题退款、终身更新、优先支持,今年春天无风险试试吧 .. 4折优惠 以“重置40″ 券。
