在 GeneratePress 中合并页眉与页面英雄块，打造紧凑专业的首页布局

使用 GeneratePress 主题搭配 GenerateBlocks 构建网站时，很多人希望页眉和页面顶部第一个区块无缝连接，形成统一且节省空间的视觉效果。本文介绍利用 GeneratePress Premium 的“合并”功能，把页眉和页面Hero Section合并，解决间距和配色问题，实现美观且实用的首页设计。

什么是页眉与页面英雄块的合并？

默认情况下，页眉与页面第一个内容区块之间有明显间距，导致顶部视觉分割。合并功能让页眉覆盖在页面英雄块上方，实现内容紧密连接，视觉更流畅。

步骤一：查看页面英雄块的内边距

• 在页面编辑器中，点击页面英雄容器。
• 打开“间距”设置，查看顶部和底部内边距，如默认 150px。

• 记录数值，后续调整用。

步骤二：新建页眉元素并启用合并

• 进入WordPress后台菜单 外观 > Elements。
• 点击“添加新建”，选择“Header Element”。

• 给元素命名，如“合并页眉”。
• 打开“合并”选项。

• 设定显示规则，比如 Post > All Post Publish。

• 保存发布。

页眉和页面英雄块合并，内容上移。

步骤三：调整页面英雄块顶部内边距修复间距

合并后，页面顶部内边距不均，页面英雄顶部内边距被页眉覆盖。

解决办法：

• 计算页眉高度，比如 60px。
• 在页面英雄容器顶部内边距中，将原有数值（如 150px）加上页眉高度，变为210px。

• 保存刷新页面。

保证页面英雄上下内边距均衡，视觉舒适。

步骤四：设置导航颜色，提升合并效果

调整导航颜色有助于无缝合并视觉效果。

• 设置导航背景透明。
• 修改站点标题颜色及导航文字颜色为白色，保证清晰。

• 调整导航文字悬停色和当前页面颜色，设为白色或高对比色。

• 保存刷新查看。

步骤五：粘性导航栏颜色继承自自定义器

粘性导航栏在滚动时固定显示，颜色继承主题自定义器设置。

• 进入自定义器。
• 在导航或页眉颜色设置中调整标题和文字颜色。
• 预览粘性导航栏颜色效果，保证协调。

步骤六：上传不同颜色的 Logo 适配合并与粘性状态

上传两种 Logo 颜色，适应不同状态：

• 自定义器上传暗色版 Logo，用于非合并或粘性导航状态。

• 上传白色版 Logo，用于合并页眉时。

• 关闭站点标题显示，只用 Logo。

• 在页眉元素中设置切换 Logo，保证不同状态显示对应版本。

刷新页面，即可看到白色 Logo 在合并页眉显示，粘性导航显示暗色 Logo。

总结

以上步骤能在 GeneratePress 主题中实现页眉和页面英雄块合并，消除顶部多余间距，提升整体页面设计的专业感和视觉统一。调整内边距、颜色和 Logo 细节，打造更完美的页面。

最近更新

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息