Kadence 教学：打造粘性与透明页眉效果（Sticky & Transparent Headers）

在现代网站设计中，粘性页眉和透明页眉常被用于提升视觉效果和操作流畅度。使用 Kadence 主题中的高级页眉功能，可以灵活实现这两种样式，也可以将它们结合使用，实现丰富的页面设计。

添加高级页眉模块

首先，在页面中添加 Header (Adv) 区块。系统会提示创建一个新的页眉，或从现有模板中选择。Kadence 提供多种预设模板，包括：

• 单行或多行桌面页眉
• 针对移动端优化的页眉布局

选择模板后，可以使用可视化编辑器添加内容模块，自由排列各个部分。

设置透明页眉

透明页眉常用于页面顶部有大图或背景内容的设计中，使页面更具层次感。

设置步骤如下：

• 选中 Header (Adv) 区块
• 在右侧的设置栏中进入 General 选项
• 启用 Transparent Header

启用后会出现 Auto Spacing Under 设置，用于在页面首个容器顶部自动添加间距，避免内容被遮挡。

同时，Header 和 Navigation 块会增加以下样式选项：

• 透明背景与边框设置

• 导航菜单透明样式与链接样式

可以根据页面配色和排版需求，微调这些样式。

设置粘性页眉

粘性页眉在页面滚动时始终保持在页面顶部，方便访问导航或操作入口。

启用方式如下：

• 选中 Header (Adv) 区块
• 在 General 设置中启用 Sticky Header

激活后可配置以下内容：

• Sticky Section：选择要固定的区域（整行、顶部、中部或底部）

• Reveal On Scroll Up：页面向上滚动时显示，向下滚动时隐藏

• Shrink Middle Row：粘性状态下缩小中间行，并设定缩小高度

Header 和 Navigation 模块中也会出现对应的粘性样式设置，包括背景颜色、边框和文字颜色等选项。

同时启用粘性与透明页眉

若需同时使用透明和粘性效果，只需在 Header (Adv) 的 General 设置中同时开启这两个选项。

之后进入 Style 设置，展开 Sticky Background Settings，自定义粘性状态下的背景颜色和透明度。

这种组合适合用于视觉要求较高的页面顶部区域，例如展示大图、品牌口号或首页横幅。

设置粘性页眉为透明或半透明

即使没有启用透明页眉，也可以让粘性状态下的页眉呈现透明或半透明样式。

只需进入 Header (Adv) 的 Style 设置，打开 Sticky Background Settings，使用颜色选择器调节透明度数值，调整至期望的视觉效果。

设置半透明的透明页眉

如果不希望透明页眉完全透明，也可以设置为略带背景色的半透明样式。在 Style 设置中展开 Transparent Background，使用颜色选择器调节颜色不透明度，让页眉呈现更柔和的视觉表现。

小结

Kadence 提供的高级页眉功能，支持粘性与透明样式的独立使用和组合使用，适配各种页面设计需求。结合自定义样式控制，可以打造出实用且美观的页眉区域，提升整体页面质量。

如需进一步定制样式，可结合 Kadence Blocks 实现更细致的排版设计。