外观
外观页面让您可以自定义教会网站的整体外观与感觉。从颜色和字体,到间距和自定义 CSS,您都可以在一个地方控制网站的每一个视觉细节。
开始之前
- 完成网站的初始设置
- 准备好 PNG 格式、背景透明、宽高比为 4:1 的教会标志
- 如果您已有品牌风格指南,请了解教会品牌色的十六进制值
访问外观设置
- 在 B1 Admin 中,点击左侧菜单的网站。
- 点击网站页面视图顶部的外观标签。
- 网站样式页面加载完成后,左侧显示网站的实时预览,右侧显示样式设置选项。
调色板
- 在样式设置面板中点击调色板。
- 您会看到基础色(浅色、强调色和深色调)以及语义色(主色、辅助色、成功色、警告色和错误色)。
- 点击任意颜色色块以打开取色器。拖动选择器或输入十六进制值来选择您的颜色。
- 颜色组合预览会展示您所选颜色搭配在一起的效果。
- 使用推荐配色方案快速应用预设的配色方案。
- 满意后点击保存。
排版
- 在样式设置面板中点击排版设置。
- 点击选择字体打开字体浏览器。您可以按名称搜索,也可以按衬线体、无衬线体、展示体、手写体和等宽体等类别浏览。
- 分别为标题和正文设置字体。
- 点击排版比例调整标题一到标题四的大小层级。使用比例乘数和基础字号字段进行微调。
- 点击保存应用您的字体选择。
间距
- 在样式设置面板中点击间距比例。
- 调整从超小到超大的间距数值。实际示例会展示每个数值对布局的影响。
- 点击保存间距将这些数值应用到整个网站。
标志与品牌形象
- 在样式设置面板中点击标志。
- 上传您的浅色背景标志和深色背景标志。为获得最佳效果,请使用背景透明、宽高比为 4:1 的图片。
- 上传用于链接预览的社交媒体图片,以及用作浏览器标签图标的 Favicon。
提示
为获得最佳效果,请使用 PNG 格式、背景透明的标志。这样可以确保它在您网站和移动应用的浅色和深色背景下都显示美观。
导航样式
为实底和透明两种模式自定义您网站导航栏的颜色:
- 滚动到导航样式部分
- 点击编辑导航样式
- 分别为实底导航(带背景色)和透明导航(叠加模式)配置颜色
- 点击保存应用您的导航颜色
详细说明请参阅导航样式。
网站小组件
网站小组件会出现在网站的每一个页面上,悬浮于页面内容之上:
- 公告横幅——网站顶部一个可关闭的横条,用于发布即时性消息,例如即将举行的活动或服事时间变更。
- 启动器——一个悬浮按钮,点击后打开快速访问菜单,例如通往奉献、签到或查看周报的链接。
- 在样式设置面板中点击网站小组件。
- 打开您想要使用的小组件,并配置其文字、链接和颜色。
- 点击保存。
分析统计
在样式设置面板中添加您的 Google Analytics 4 测量 ID,以追踪网站的访客流量。
自定义 CSS 与 JavaScript
- 在样式设置面板中点击 CSS 与 Javascript。
- 添加自定义 CSS以覆盖默认样式,进行高级自定义。
- 添加自定义 HTML用于追踪代码或其他脚本。
- 使用常见 Javascript 示例部分获取诸如 Google Analytics 集成之类的代码片段。
注意
自定义 CSS 功能强大,但若使用不当可能破坏网站布局。大多数教会仅通过内置的颜色、字体和间距控制就能实现理想的外观。只有在您熟悉网页开发时才建议使用自定义 CSS。
样式主题
如果您想要一个快速起点,颜色调色板部分的推荐配色方案提供了预先构建好的主题,一键即可设置协调统一的颜色。应用主题后,您随时可以对各项设置进行微调。