如何在 Elementor 中更改滚动时的粘性标题颜色

Rifat Oct 7, 2023

粘性标题是保持网站导航菜单始终可见的好方法,确保轻松访问重要链接和信息。但是,随着时间的推移,静态标题可能会变得单调,您可能希望更改滚动条上的颜色以创建更加动态和引人入胜的用户体验。在本指南中,我们将向您展示如何使用简单且易于遵循的步骤来更改Elementor中滚动条上粘性标题的颜色。无论您是初学者还是经验丰富的 Elementor 用户,您都可以轻松实现此效果,并为您的网站带来清新现代的外观。

设计方法

如果您还没有,您需要使用主题生成器来创建自定义标题模板。首先将徽标放入两列标题部分的图像小部件和导航小部件中。

高级选项卡

部分控件中的高级选项卡将用于以下步骤。

保证金设置

制作透明标题的最常见方法是为该部分提供等于其高度的负边距。解锁“高级”选项卡上的边距控件并将底部设置为负值(例如:-125px)。这会将标题下方的部分移动到页面顶部。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

Z 指数

您还需要增加该部分的 Z 索引,以确保它始终位于内容的顶部。您可以输入大于网站上其余内容的任何数字,但许多设计师使用 1,000。

置顶设置

从“运动效果”折叠面板中选择“粘性”选项并将其设置为“顶部”。

添加效果

现在我们已经创建了一个基本的透明标题部分,我们将添加滚动效果。

样式选项卡

部分控件中的样式选项卡将用于以下步骤。

最终颜色

在颜色选择器中设置最终背景或渐变的颜色。

滚动效果

在控制面板中切换滚动效果选择器。

设置值

我们现在需要调整视口滑块中的值以达到所需的效果。滚动到页面上您想要完全不透明度的位置,并减小“顶部”值,直到标题完全不透明(例如:25%)。您现在可以增加底部的值。在前面的示例中,我们希望效果快速发生,因此我们将值设置得非常接近(例如:22%)。这将导致页面滚动超过 3% 时出现效果。

包起来

总之,更改Elementor中滚动条上的粘性标题颜色可以增强网站的视觉吸引力和用户体验。这是一种简单有效的方法,可以让您的网站脱颖而出并给访问者留下难忘的印象。但是,请记住,您需要调整或考虑移动设备和平板电脑设备,因为标头行为可能会因不同的屏幕尺寸而异。找到最佳位置需要一些测试和调整,但最终结果将是值得付出努力的。因此,继续尝试这种技术,让您的网站焕然一新、现代的外观。

Divi WordPress Theme