跳到主要内容

导航样式

自定义教会网站的导航栏颜色以匹配您的品牌。您可以为固体背景和透明覆盖单独配置颜色，完全控制导航在不同页面上的显示方式。

开始前

  • 您需要管理教会网站的权限。有关详细信息，请参阅 角色与权限。
  • 准备好您的品牌颜色，包括十六进制颜色代码（例如，#03A9F4）。
  • 了解网站上固体和透明导航样式之间的区别。

理解导航模式​

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

  • 固体导航 -- 具有背景颜色的导航栏，通常用于内容页面
  • 透明导航 -- 覆盖页面内容的导航，通常用于具有英雄图像或全屏背景的页面

您可以为两种模式单独自定义颜色。

访问导航样式​

  1. 在 B1 Admin 中导航至 网站
  2. 在侧边栏中点击 外观
  3. 滚动到 导航样式 部分
  4. 点击 编辑导航样式

配置固体导航​

固体导航出现时导航栏后面有背景颜色。您可以自定义：

背景颜色​

  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 变量应用：

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

相关文章​