外观
外观页面让您自定义教会网站的整体视觉效果。从颜色和字体到间距和自定义 CSS，您可以在一个地方控制网站的每个视觉细节。
开始之前
- 完成网站的初始设置
- 准备好 PNG 格式的教会标志，带透明背景，宽高比为 4:1
- 如果您有现成的品牌风格指南，请准备好教会的品牌颜色（十六进制值）
访问外观设置
- 在 B1 Admin 中，点击左侧菜单的网站。
- 在网站页面视图顶部点击外观标签。
- 网站样式页面加载后，左侧是网站的实时预览，右侧是样式设置选项。
调色板
- 在样式设置面板中点击调色板。
- 您将看到基础颜色（浅色、强调色和深色色调）和语义颜色（主要、次要、成功、警告和错误）。
- 点击任意色块以打开取色器。拖动选择器或输入十六进制值来选择颜色。
- 颜色组合预览显示您选择的颜色如何搭配在一起。
- 使用推荐调色板快速应用预设的配色方案。
- 满意后点击保存。
字体排版
- 在样式设置面板中点击字体排版设置。
- 点击选择字体打开字体浏览器。您可以按名称搜索或浏览分类，如衬线体、无衬线体、展示字体、手写体和等宽字体。
- 为标题和正文分别设置字体。
- 点击字体比例调整一级标题到四级标题的大小层次。使用比例乘数和基础大小字段进行微调。
- 点击保存应用您的字体选择。
间距
- 在样式设置面板中点击间距比例。
- 调整从超小到超大的间距值。实际示例展示每个值如何影响布局。
- 点击保存间距将值应用到整个网站。
标志和品牌标识
- 在样式设置面板中点击标志。
- 上传您的浅色背景标志和深色背景标志。使用带透明背景、宽高比为 4:1 的图片以获得最佳效果。
- 上传用于链接预览的社交媒体图片和用于浏览器标签图标的网站图标。
提示
为获得最佳效果，请使用 PNG 格式的透明背景标志。这确保它在您网站和移动应用的浅色和深色背景上都能呈现良好效果。
自定义 CSS 和 JavaScript
- 在样式设置面板中点击 CSS 和 Javascript。
- 添加自定义 CSS 以覆盖默认样式进行高级自定义。
- 添加自定义 HTML 用于跟踪代码或其他脚本。
- 使用常用 Javascript 示例部分获取代码片段，如 Google Analytics 集成。
注意
自定义 CSS 功能强大，但如果使用不当可能会破坏网站布局。大多数教会可以使用内置的颜色、字体和间距控件实现所需的外观。只有在您熟悉网页开发时才使用自定义 CSS。
样式主题
如果您想要一个快速的起点，调色板部分中的推荐调色板提供了一键设置协调颜色的预设主题。应用主题后，您始终可以微调各个设置。