跳到主要内容

导航样式

自定义教会网站的导航栏颜色以匹配您的品牌。您可以为实心背景和透明叠加配置颜色，给您完全控制导航在不同页面上的外观。

开始前

  • 您需要管理教会网站的权限。详情请参阅角色和权限。
  • 准备好您的品牌颜色，包括十六进制颜色代码（如#03A9F4）。
  • 理解您网站上实心和透明导航样式之间的差异。

理解导航模式​

您的网站导航可以根据页面以两种不同样式显示：

  • 实心导航 -- 带有背景色的导航栏，通常用于内容页面
  • 透明导航 -- 叠加在页面内容上的导航，通常用于带有英雄图像或全屏背景的页面

您可以独立自定义两种模式的颜色。

访问导航样式​

  1. 在B1 Admin中，打开Jump菜单（左上角的搜索栏）并展开网站
  2. 点击外观
  3. 在样式设置列表中，点击导航

导航样式编辑器有两张卡片：页眉（实心）和页眉覆盖英雄区（透明）。

配置实心导航​

实心导航在导航栏后面带有背景色显示。这些设置位于**页眉（实心）**卡片中。您可以自定义：

背景色​

  1. 为背景色切换覆盖交换机
  2. 点击颜色选择器
  3. 选择您想要的背景色
  4. 默认为白色（#FFFFFF）

链接颜色​

  1. 为链接颜色切换覆盖交换机
  2. 选择导航链接文本的颜色
  3. 这影响默认状态的链接
  4. 默认为深灰色（#555555）

链接悬停颜色​

  1. 为链接悬停颜色切换覆盖交换机
  2. 选择用户悬停链接时链接更改为的颜色
  3. 这为可点击链接提供视觉反馈
  4. 默认为浅蓝色（#03A9F4）

活动颜色​

  1. 为活动链接颜色切换覆盖交换机
  2. 选择当前活动页面链接的颜色
  3. 这帮助用户知道他们在哪个页面上
  4. 默认为浅蓝色（#03A9F4）

配置透明导航​

透明导航叠加您的页面内容，无背景。这些设置位于**页眉覆盖英雄区（透明）**卡片中。您可以自定义：

链接颜色​

  1. 为链接颜色切换覆盖交换机
  2. 选择与您的页面背景对比良好的颜色
  3. 通常白色或浅色在深色背景上效果最好
  4. 默认为深灰色（#555555）

链接悬停颜色​

  1. 为链接悬停颜色切换覆盖交换机
  2. 选择悬停状态颜色
  3. 确保它在您的页面背景上可见
  4. 默认为浅蓝色（#03A9F4）

活动颜色​

  1. 为活动链接颜色切换覆盖交换机
  2. 选择活动页面指示器颜色
  3. 应该突出显示，同时仍然适合您的设计
  4. 默认为浅蓝色（#03A9F4）
信息

透明导航没有背景色设置，因为它直接叠加在页面内容上。

保存您的更改​

  1. 配置您的颜色后，点击保存导航
  2. 您的更改立即应用到您的实时网站
  3. 访问您的网站以在两种模式中查看导航

重置为默认值​

如果您想回到默认颜色：

  1. 为任何自定义颜色切换覆盖交换机关闭
  2. 点击保存导航
  3. 导航返回默认配色方案

或点击取消放弃所有更改而不保存。

最佳实践​

颜色对比​

  • 可读性 -- 确保链接颜色与背景有足够对比
  • WCAG合规性 -- 目标至少4.5:1对比度，用于可访问性
  • 测试两种模式 -- 预览您的网站，同时使用实心和透明导航

品牌一致性​

  • 使用您的品牌颜色 -- 匹配您的徽标和网站主题
  • 限制调色板 -- 坚持2-3种颜色以获得一致的外观
  • 考虑您的图像 -- 如果使用透明导航，根据典型页面背景测试它

悬停和活动状态​

  • 清楚的反馈 -- 使悬停状态明显不同于默认链接
  • 区分活动页面 -- 使用不同颜色，以便用户知道他们在哪里
  • 平滑过渡 -- 系统自动为颜色变化设置动画

故障排除​

颜色看起来不对​

  • 清空缓存 -- 浏览器缓存可能显示旧颜色
  • 检查十六进制代码 -- 确保您输入了有效的十六进制颜色代码
  • 在不同背景上测试 -- 颜色可能根据页面显示不同

导航不可见​

  • 透明模式 -- 如果在浅色图像上使用透明导航，深色文本可能难以看到
  • 解决方案 -- 调整您的链接颜色或使用更深的页面背景
  • 替代方案 -- 向导航区域添加细微的阴影或背景叠加

技术细节​

导航样式存储为JSON并使用CSS变量应用：

  • 更改立即生效，无需重建网站
  • 颜色级联到所有导航元素
  • 覆盖是可选的；未设置的颜色使用主题默认值

相关文章​