使用页面编辑器
B1 页面编辑器是一款可视化的拖放式构建工具,让您无需编写任何代码即可设计教会网站页面。您可以添加区块和内容元素、自定义样式、预览效果以及撤销更改——所有这些操作都可以在浏览器内完成。
打开编辑器
- 在 B1 Admin 中,点击左侧菜单的网站。
- 在"页面"表中找到您想编辑的页面,然后点击编辑。
编辑器会以全屏模式打开。左侧面板显示页面结构和可用的内容元素;中间区域显示页面的实时预览。
无论您的 B1 Admin 主题设置是什么,编辑器始终以浅色模式显示。这确保了预览效果能准确反映网站访客所看到的页面外观。
页面结构:区块与元素
每个页面都由两个层级构成:
- 区块——将页面划分为水平条带的顶层容器(例如英雄区块、内容区块或页脚条带)。每个页面在添加内容之前,必须至少有一个区块。
- 元素——放置在区块内的各个内容单元,例如文字、图片、按钮、卡片、表单和日历。
添加区块
- 点击添加区块(或左侧面板顶部的 + 按钮)。
- 选择开始方式:
- 从模板开始——浏览按类别(英雄区、关于我们、服务项目、奉献等)整理的区块模板库,点击其中一个即可插入一个样式齐全、内容预填的区块。添加后您可以自由自定义所有内容。
- 空白区块——选择列布局(单列、两列、三列等)并从零开始构建。
- 新区块会出现在预览中。点击它即可选中并配置其背景色、内边距及其他样式选项。
切换区块布局
已经搭好了一个区块,但想换一种结构?使用该区块上的布局切换器,即可将其列布局换成模板库中的另一种,同时保留现有的内容和元素。
向区块添加元素
- 在预览中点击某个区块的内部以选中它。
- 点击添加内容并从列表中选择元素类型:
- 文字——标题、段落和富文本
- 图片——上传或链接一张照片
- 按钮——可点击的行动号召链接
- 卡片——带标题和描述的图片
- 表单——直接在页面上嵌入一个表单
- 日历——显示活动日历
- 常见问题——手风琴式的问答区块
- 视频——通过 URL 嵌入视频
- 小组浏览器——所有教会小组的可筛选目录,可选配搜索、类别筛选和标签筛选
- 图标特色——带标题和简短描述的图标,用于突出功能或事工特色
- 图库——多图网格或瀑布流布局
- 推荐语——一条或多条带作者姓名、身份和照片的引用语
- 社交图标——链接到教会社交媒体主页的图标
- 倒计时——倒数到某个日期或每周服事时间的计时器
- 统计数据——一排带标签的大数字(成员数、年数、园区数)
- 筹款进度——奉献活动的实时进度条,显示相对于筹款目标已筹集的总额
- 员工网格——某小组成员的照片卡片;该小组必须开启公开花名册选项
- 服事时间——从出勤设置中自动获取的各园区服事时间表
- 讲道——您的讲道库,可展示为完整浏览器,或网格、列表、精选最新等布局
- 地图——以教会地址为中心的嵌入式地图
- 表格——简单的行列表格,用于表格化内容
- 图文并排——文字与图片并排展示
- 标志——您教会的标志,从外观中获取
- 直播——直接嵌入在页面上的直播播放器
- 奉献——奉献按钮或嵌入式捐款表单
- 原始 HTML——用于高级场景的自定义 HTML 标记
- iFrame——通过 URL 嵌入外部内容
- 使用出现的设置面板配置该元素。
重新排序内容
拖动每个项目左侧的手柄图标(六个点)以重新排序区块或元素。您可以在区块内拖动元素,也可以将其移动到另一个区块中。
设置页面样式
区块样式
点击任意区块以打开其样式面板。您可以设置:
- 背景——纯色、渐变或图片。使用图片背景时,焦点选取器可让您点击设置图片在区块缩放时应保持居中的部位,叠加层颜色选项可让您在图片上添加半透明色调,以提升文字的可读性。
- 内边距——区块内部的上下间距
- 宽度——全宽或居中/限宽
- 分隔线——区块顶部或底部边缘的装饰性形状分隔线(波浪形、斜切形、曲线形、三角形等),并可配置颜色、高度和翻转选项
元素样式
点击任意元素以打开其样式面板。常见选项包括字号、颜色、对齐方式、外边距和内边距。对于图片,您可以设置替代文字和链接目标。
自定义 CSS
如需更高级的样式调整,每个区块和元素都提供自定义 CSS字段,供您编写自己的 CSS 规则。这些规则的作用范围仅限于该元素本身,不会意外影响页面其余部分。
如果您需要在整个网站范围内应用样式——例如自定义字体或全局颜色——请使用外观设置,而不是在单个页面上使用自定义 CSS。
预览您的页面
使用工具栏中的预览控件,检查页面在不同屏幕尺寸下的显示效果:
- 桌面——全宽浏览器视图
- 移动端——窄屏手机尺寸视图
点击预览可在新浏览器标签页中打开页面的实时版本,与访客看到的完全一致。
检查无障碍访问
点击工具栏中的无障碍图标,可快速检查常见问题——缺少替代文字的图片、颜色对比度过低,或标题顺序错乱。每个问题都会直接链接到需要处理的元素,方便您就地修复。
撤销更改
编辑器会自动追踪您的编辑历史。使用工具栏按钮或键盘快捷键进行导航:
- 撤销(Ctrl+Z / Cmd+Z)——恢复到您上一步操作之前
- 重做(Ctrl+Y / Cmd+Y)——重新应用被撤销的操作
您也可以将页面恢复到更早的快照。点击工具栏中的历史记录查看带有说明的已保存快照列表,点击任意条目即可恢复到该时间点。
恢复快照会用该快照版本替换您当前的页面内容。此操作无法通过标准的撤销按钮撤回。如果您希望保留返回当前状态的可能性,请在恢复旧快照之前先为当前状态保存一份快照。
保存与发布
在您操作过程中,更改会自动保存。工具栏中的状态指示器会显示您的更改是否已保存。
草稿与已发布状态
页面可以拥有已发布状态,用于控制访客何时能看到您的更改。工具栏显示一个状态标记,表示当前状态:
- 保存即上线——该页面不使用发布工作流。每次保存的更改都会立即生效上线。这是新页面的默认状态。
- 有未发布的更改——该页面此前已发布过,但自上次发布以来您又做了修改。访客看到的仍是之前发布的版本。
- 已发布——该页面处于上线状态,您保存的内容与访客所看到的一致。
要发布您的更改,请点击工具栏中的发布按钮。页面会立即上线。
若要恢复到最近一次发布的版本、且不影响访客当前看到的内容,请打开溢出菜单(⋮)并点击放弃更改。
若要将某个页面完全下线,请打开溢出菜单并点击取消发布。在您再次发布之前,访客将无法再看到该页面。
当您想先准备好一个页面——例如为即将到来的活动——并只在合适的时机才让它上线时,可使用草稿/发布工作流。先构建并预览页面,准备就绪后再点击发布。