在现代网站设计中,粘性页眉和透明页眉常被用于提升视觉效果和操作流畅度。使用 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 实现更细致的排版设计。