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