使用页面编辑器
B1 页面编辑器是一款可视化的拖放式构建工具，让您无需编写任何代码即可设计教会网站页面。您可以添加分区和内容块、自定义样式、预览作品，并撤销更改 -- 所有操作都在浏览器中完成。
打开编辑器
- 在 B1 Admin 中，打开跳转菜单（左上角的搜索栏），展开网站，然后点击页面。
- 在页面表格中找到您要编辑的页面，然后点击编辑内容。
编辑器会以全屏模式打开。左侧面板显示您的页面结构和可用的内容元素；中央区域显示页面的实时预览。
无论您的 B1 Admin 主题设置如何，编辑器始终以浅色模式显示，并使用您在外观中选择的标题和正文字体。这可确保预览与网站访客看到的页面效果精确一致。
页面结构：分区与元素
每个页面由两个层级构成：
- 分区 -- 将页面划分为水平区块的顶层容器（例如主视觉区、内容块或页脚条）。每个页面在添加内容之前必须至少有一个分区。
- 元素 -- 放置在分区内的单个内容，例如文本、图片、按钮、卡片、表单和日历。
添加分区
- 点击添加分区（或左侧面板顶部的 + 按钮）。
- 选择开始方式：
- 从模板开始 — 浏览按类别组织的分区模板库（主视觉、关于、服事、奉献等），点击其中一个即可插入完整样式并预填内容的分区。添加后您可以自定义所有内容。
- 空白分区 — 选择列布局（单列、两列、三列等），然后从头开始构建。
- 新分区会出现在预览中。点击它以选中，并配置其背景颜色、内边距和其他样式选项。
切换分区布局
已经构建好分区但想要不同的结构？使用该分区上的布局切换器，从库中选择另一种列布局，同时保留现有内容和元素不变。
向分区添加元素
- 在预览中点击分区内部以选中它。
- 点击添加内容，然后从列表中选择元素类型：
- 文本 -- 标题、段落和富文本
- 图片 -- 上传照片或链接到照片
- 按钮 -- 可点击的行动号召链接
- 卡片 -- 带有标题和说明的图片
- 表单 -- 直接在页面上嵌入表单。如果表单带有标题图片，它会显示在问题上方
- 日历 -- 显示活动日历
- 常见问题 -- 手风琴式的问答块
- 视频 -- 通过网址嵌入视频
- 小组浏览器 -- 所有教会小组的可筛选目录，带有可选的搜索、类别筛选和标签筛选
- 图标特色 -- 带有标题和简短说明的图标，用于突出特色或服事内容
- 图库 -- 多图网格或瀑布流布局
- 见证 -- 一条或多条引言，附带作者姓名、身份和照片
- 社交图标 -- 指向教会社交媒体资料的链接图标：Facebook、Instagram、WhatsApp、YouTube、X、TikTok、Vimeo 和播客。为您想显示的每个平台填写链接；对于 WhatsApp，请使用包含您号码或群组邀请链接的
https://wa.me/链接 - 倒计时 -- 距离某个日期或每周礼拜时间的计时器
- 统计数据 -- 一行带标签的大号数字（成员数、年数、校区数）
- 奉献活动进度 -- 奉献活动的实时进度条，显示为基金目标筹集的总额
- 员工网格 -- 小组成员的照片卡片；该小组必须开启公开名册选项
- 礼拜时间 -- 您各校区的礼拜时间表，自动从考勤设置中提取
- 讲道 -- 您的讲道库，可采用完整浏览器或网格、列表、精选最新等布局
- 地图 -- 以您教会地址为中心的嵌入式地图
- 表格 -- 用于表格内容的简单行列网格
- 文字与照片 -- 并排显示的文字和图片
- 标志 -- 您的教会标志，取自外观
- 直播 -- 直接嵌入页面的直播播放器
- 播客 -- 从您提供的外部播客 RSS 订阅网址提取的单集列表，可设置显示单集数量以及是否显示日期和说明。在线网站上的每一集都有音频播放器和下载链接，可将该集的音频文件以单集标题命名保存。此功能用于在您的网站上推荐任何播客订阅源；如果要将您自己的讲道发布为播客，请改为参阅管理讲道
- 奉献 -- 奉献按钮或嵌入式奉献表单
- HTML -- 您自己的原始 HTML，供高级用途使用，例如嵌入第三方小组件（请参阅使用 HTML 元素）
- iFrame -- 通过网址嵌入外部内容
- 使用出现的设置面板配置该元素。
使用 HTML 元素
HTML 元素有两个文本框：
- HTML 内容 -- 要在页面上显示的标记。您在此处包含的任何
<script>标签都会在您的在线网站上运行。 - JavaScript（不含 script 标签） -- 页面加载时运行的脚本代码。您也可以在此粘贴供应商的嵌入代码片段（包括其
<script>标签），它同样会在在线网站上运行。
如果您只将网址（例如图片链接）粘贴到 JavaScript 文本框中，该文本框会变红并显示警告*"这是网址，不是 JavaScript。"* 该文本框中的单纯网址不会产生任何效果。要显示图片，请使用图片元素，或在 HTML 内容中放入 <img src="...">。
使用日历元素
日历元素显示您某个日历中的活动：
- 在选择下，选择小组日历（一个小组的活动 -- 列表中显示您所属的小组）或精选日历（您在日历下建立的日历；请参阅精选日历）。
- 在选择日历下，选择小组或日历。
- 在显示下，选择显示方式：
- 月历 -- 访客可以翻页浏览的月份网格。
- 即将举行的活动 -- 以磁贴网格显示接下来的 12 个即将举行的活动，重复性活动仅在其下一个日期显示一次。每个磁贴显示活动照片（若无照片，则在您主题的深色背景上显示标题），以及日期徽章、星期和时间，还有说明的第一行。磁贴上方的订阅按钮可让访客复制日历的 ICS 链接或下载该日历。
- 若只显示部分活动，请在仅显示带有标签的活动中输入标签 -- 例如
youth。只有标签包含该词的活动才会出现。留空则显示所有活动。标签在每个活动上设置；请参阅添加和编辑活动。
无论哪种显示方式，点击活动都会打开您网站上该活动自己的页面。活动页面显示活动照片、标题、日期和时间以及说明，并附有一个方框，内含时间（包括重复性活动的重复模式）和地点（为该活动预订的会议室）。开启注册功能时，它还会显示注册此活动按钮，并提供一个添加到我的日历链接，可下载活动的日历文件。该页面经过设置，搜索引擎可以在搜索结果中显示活动的日期和详情。在您的页面上显示的精选日历活动页面（未来六个月内的活动）也会列在网站的站点地图中，以便搜索引擎找到它们。
重新排序内容
拖动每个项目左侧的手柄图标（六个点）即可对分区或元素重新排序。您可以在分区内拖动元素，也可以将其移动到其他分区。
设置页面样式
分区样式
点击任意分区以打开其样式面板。您可以设置：
- 背景 -- 纯色、渐变或图片。使用图片背景时，焦点选择器可让您点击设置图片中在分区缩放时保持居中的部分，覆盖层颜色选项则可在图片上添加半透明色调，以提高文字的可读性。
- 内边距 -- 分区内顶部和底部的间距
- 宽度 -- 全宽或居中/受限宽度
- 分隔线 -- 位于分区顶部或底部边缘的装饰性形状分隔线（波浪、斜角、曲线、三角形等），可设置颜色、高度和翻转选项
元素样式
点击任意元素以打开其样式面板。常用选项包括字号、颜色、对齐方式、外边距和内边距。对于图片，您可以设置替代文字和链接目标。
自定义 CSS
对于高级样式设置，每个分区和元素都有一个自定义 CSS字段，您可以在其中编写自己的 CSS 规则。这些规则仅作用于该元素，因此不会意外影响页面的其他部分。
如果您需要将样式应用于整个网站 -- 例如自定义字体或全局颜色 -- 请使用外观设置，而不是在各个页面上使用自定义 CSS。
预览页面
使用工具栏中的预览控件，检查页面在不同屏幕尺寸下的显示效果：
- 桌面 -- 全宽浏览器视图
- 手机 -- 窄屏手机尺寸视图
要查看访客实际看到的在线页面，请返回页面列表并点击该页面的路径。它会在新的浏览器标签页中打开。
检查无障碍性
点击工具栏中的无障碍图标，快速检查常见问题 -- 缺少替代文字的图片、颜色对比度低或标题顺序错误。每个问题都会直接链接到需要关注的元素，以便您就地修复。
撤销更改
编辑器会自动跟踪您的编辑历史。使用工具栏按钮或键盘快捷键进行导航：
- 撤销（Ctrl+Z / Cmd+Z）-- 撤回您的上一步操作
- 重做（Ctrl+Shift+Z 或 Ctrl+Y / Cmd+Shift+Z）-- 重新应用已撤销的操作
您还可以将页面恢复到较早的快照。点击工具栏中的查看历史，可查看带有描述的已保存快照列表，点击任意条目即可恢复到该时间点。
恢复快照会用快照版本替换您当前的页面内容。标准撤销按钮无法撤销此操作。如果您希望保留返回的选项，请在恢复旧快照之前先保存当前状态的快照。
保存与发布
更改会在您工作时自动保存。工具栏中的状态指示器会显示您的更改是否已保存。
草稿与发布状态
页面可以有已发布状态，用于控制访客何时看到您的更改。工具栏会显示一个状态标签，指示当前状态：
- 保存即上线 -- 页面不使用发布流程。每次保存的更改都会立即上线。这是新页面的默认设置。
- 未发布的更改 -- 页面曾经发布过，但自上次发布后您做了更改。访客仍会看到之前发布的版本。
- 已发布 -- 页面已上线，您保存的内容与访客看到的内容一致。
要发布您的更改，请点击工具栏中的发布按钮。页面会立即上线。
要在不影响访客所见内容的情况下恢复到上次发布的版本，请打开溢出菜单（⋮）并点击放弃未发布的更改。
要停止使用发布流程，请打开溢出菜单并点击关闭发布。编辑之后将立即再次上线。
当您想要准备页面（例如为即将举行的活动）并仅在恰当时机上线时，请使用草稿/发布流程。构建并预览页面，准备就绪后点击发布。