跳到主要内容

外观

外观页面允许您自定义教会网站的整体外观和感觉。从颜色和字体到间距和自定义 CSS，您可以从一个地方控制网站的每个视觉方面。

开始前

  • 完成您的网站的 初始设置
  • 准备您的教会徽标，采用 PNG 格式，具有透明背景和 4:1 宽高比
  • 如果您有现有样式指南，知道您教会的品牌颜色（十六进制值）

访问外观设置​

  1. 在 B1 Admin 中，点击左菜单中的 网站。
  2. 点击网站页面视图顶部的 外观 标签。
  3. 网站样式页面加载，左侧显示网站的实时预览，右侧显示 样式设置 选项。

调色板​

  1. 在样式设置面板中点击 调色板。
  2. 您将看到 基础颜色（浅色、强调色和深色阴影）和 语义颜色（主要、次要、成功、警告和错误）。
  3. 点击任何颜色样本以打开颜色选择器。拖动选择器或输入十六进制值以选择您的颜色。
  4. 颜色组合预览 显示您选定的颜色如何相互配合。
  5. 使用 建议的调色板 快速应用预设计的颜色方案。
  6. 满意时点击 保存。

排版​

  1. 在样式设置面板中点击 排版设置。
  2. 点击 选择字体 以打开字体浏览器。您可以按名称搜索或浏览衬线、无衬线、显示、手写和等宽字体等类别。
  3. 为标题和正文设置字体。
  4. 点击 排版比例 以调整标题 1 到标题 4 的大小层次。使用比例乘数和基础大小字段来微调。
  5. 点击 保存 应用您的字体选择。

间距​

  1. 在样式设置面板中点击 间距比例。
  2. 调整超小到超大的间距值。实用示例显示每个值如何影响布局。
  3. 点击 保存间距 在整个网站中应用这些值。

徽标和品牌​

  1. 在样式设置面板中点击 徽标。
  2. 上传您的 浅色背景徽标 和 深色背景徽标。使用具有透明背景和 4:1 宽高比的图像以获得最佳结果。
  3. 上传用于链接预览的 社交媒体图像 和用于浏览器标签图标的 Favicon。
提示

为获得最佳结果，使用具有 PNG 格式透明背景的徽标。这确保它在您网站和 移动应用 中的浅色和深色背景上看起来很好。

导航样式​

为固体和透明模式自定义网站导航栏颜色：

  1. 滚动到 导航样式 部分
  2. 点击 编辑导航样式
  3. 为固体导航（带背景）和透明导航（覆盖模式）配置颜色
  4. 点击 保存 应用您的导航颜色

有关详细说明，请参阅 导航样式。

自定义 CSS 和 JavaScript​

  1. 在样式设置面板中点击 CSS 和 Javascript。
  2. 添加 自定义 CSS 以覆盖默认样式以进行高级自定义。
  3. 添加 自定义 HTML 用于跟踪代码或其他脚本。
  4. 在 常见 Javascript 示例 部分中使用 Google Analytics 集成等片段。
注意

自定义 CSS 功能强大，但如果使用不当可能会破坏网站的布局。大多数教会可以使用内置的颜色、字体和间距控制来实现他们想要的外观。仅当您熟悉网络开发时才使用自定义 CSS。

样式主题​

如果您想要一个快速的起点，颜色调色板部分中的 建议的调色板 提供了预先构建的主题，可以一次点击设置协调的颜色。应用主题后，您总是可以微调单个设置。

后续步骤​