跳到主要内容

导航样式

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

开始之前

  • 您需要管理教会网站的权限。详情请参阅角色与权限。
  • 准备好您的品牌颜色,包括十六进制颜色代码(例如,#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 变量应用:

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

相关文章​