首页>文档>Astra教程>如何使用 Astra 添加粘性标题或滚动固定标题

此组别内的文章

需要支持?

如果通过文档没办法解决您的问题,请提交工单获取我们的支持!

如何使用 Astra 添加粘性标题或滚动固定标题

注意:Sticky Header 功能是 Astra Pro Addon 插件的一部分。要使用此功能,请确保您的 WordPress 网站上安装了 Astra 主题和 Astra Pro Addon。

什么是粘性标题?

Astra 中的粘性标题功能允许您在用户滚动时将标题固定在网页顶部,从而快速访问菜单。

就好像无论您在页面上的什么位置,菜单都触手可及。

激活粘性标题的快速步骤

  • 安装并激活Astra Pro Addon 插件。 
  • 从 WordPress 仪表板中的 Astra 选项激活 Sticky Header 模块。
  • 在 WordPress 定制器中的“外观” > “自定义” > “标头生成器” > “粘性标头”下自定义粘性标头模块设置。

有关更多详细信息,请查看以下步骤。

激活粘性标题模块

  • 从Astra >仪表板激活 Sticky Header 模块。 
如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站
  • 访问设置:Astra >自定义Header Builder > Sticky Header
如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

粘性标题设置 

以下是一些您可以尝试的粘性标题设置。

坚持主要标题

此设置将您的网站的主标题固定在顶部。 

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

粘贴在标题部分的上方和下方 

在您的设置中,有两个关键区域 -上方标题和下方标题。 

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

上方标题是主标题上方的上部,您可以在其中展示按钮、菜单和其他内容。 

标题下方位于主标题的正下方,为额外的菜单、搜索栏和小部件提供了空间。

注意:请确保您已从Astra Pro 仪表板激活Header Sections 模块才能看到这些选项。

更改粘性徽标和宽度选项

粘性标题的不同徽标

这允许您为粘性标题选择与站点徽标不同的徽标。如果您想使用与站点徽标相同的徽标,请将此项留空。 

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

添加粘性 Retina 徽标

您可以上传常规徽标和视网膜徽标,以确保它们在高质量屏幕上看起来清晰。

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

粘性徽标宽度

您可以使用此滑块轻松调整这些徽标的宽度。

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

如果您打开Astra Pro 中的颜色和背景模块,并在Astra >自定义>页眉生成器>粘性页眉中为页眉选择背景颜色,则该颜色将自动延续到粘性页眉。 

在这种情况下,您可以使用粘性背景不透明度选项来管理背景颜色的不透明度。

添加收缩效果

点击启用收缩效果选项以使用此功能。这会缩小粘性标题的尺寸,以便在向下滚动时显示更紧凑。

当您的主标题高度很大,而您想在转换为粘性标题时将其变小时,此功能很有用。

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

添加动画效果

将动画效果应用于粘性标题条目。

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

向下滚动时隐藏固定标题

此选项仅在读者向下滚动时隐藏粘性标题。向上滚动时,粘性标题会再次出现。

此选项必须与Stick Primary Header选项一起启用。

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

显示选项

前往“启用”部分以在桌面、移动设备或两者上显示粘性标题。

如何使用 Astra 添加粘性标题或滚动固定标题-HEIWP-外贸建站

使用 CSS 进行定制

注意:默认情况下,粘性标题会出现阴影。要删除默认阴影效果,请添加此自定义 CSS:

#ast-fixed-header .main-header-bar {
	box-shadow: unset;
}
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
搜索