使用页面编辑器
B1 页面编辑器是一个可视化拖放构建器，让您设计教会网站页面而无需写任何代码。您可以添加部分和内容块、自定义样式、预览您的工作并撤销更改 -- 所有这些都在您的浏览器中。
打开编辑器
- 在 B1 Admin 中，点击左菜单中的 网站。
- 在页面表中找到要编辑的页面，点击 编辑。
编辑器以全屏模式打开。左面板显示您的页面结构和可用的内容元素；中心区域显示页面的实时预览。
信息
编辑器始终以浅色模式显示，无论您的 B1 Admin 主题设置如何。这确保预览准确地匹配网站访问者看到的内容。
页面结构：部分和元素
每个页面都由两个级别构建：
- 部分 -- 将页面分成水平带的顶级容器（例如，英雄部分、内容块或页脚条带）。每个页面在添加内容前必须至少有一个部分。
- 元素 -- 放置在部分中的单个内容片段，例如文本、图像、按钮、卡片、表单和日历。
添加部分
- 点击 添加部分（或左面板顶部的 + 按钮）。
- 为您的部分选择一个布局 -- 选项包括单列、两列、三列等。
- 新部分出现在预览中。点击它以选择它并配置其背景颜色、填充和其他样式选项。
向部分添加元素
- 在预览中点击部分内部以选择它。
- 点击 添加内容 并从列表中选择元素类型：
- 文本 -- 标题、段落和富文本
- 图像 -- 上传或链接到照片
- 按钮 -- 可点击的号召性用语链接
- 卡片 -- 带有标题和描述的图像
- 表单 -- 在页面上嵌入 表单
- 日历 -- 显示事件日历
- 常见问题 -- 手风琴样式的问题和答案块
- 视频 -- 通过 URL 嵌入视频
- 小组浏览器 -- 可过滤的所有教会小组目录，带有可选搜索、类别过滤和标签过滤
- 使用出现的设置面板配置元素。
重新排序内容
使用每个项目左侧的句柄图标（六个点）拖动部分或元素以重新排序。您可以拖动部分内的元素或在部分之间移动它们。
样式化您的页面
部分样式
点击任何部分以打开其样式面板。您可以设置：
- 背景 -- 固体颜色、渐变或图像
- 填充 -- 部分内部的顶部和底部间距
- 宽度 -- 全宽或居中/受限
元素样式
点击任何元素以打开其样式面板。常见选项包括字体大小、颜色、对齐、边距和填充。对于图像，您可以设置替代文本和链接目标。
自定义 CSS
对于高级样式，每个部分和元素都有一个 自定义 CSS 字段，您可以在其中写自己的 CSS 规则。这些范围限于该元素，因此不会无意中影响页面的其余部分。
提示
如果您需要应用跨整个网站的样式 -- 如自定义字体或全局颜色 -- 使用 外观 设置而不是单个页面上的自定义 CSS。
预览您的页面
使用工具栏中的预览控件检查页面在不同屏幕大小上的显示方式：
- 桌面 -- 全宽浏览器视图
- 移动设备 -- 狭窄的手机大小视图
点击 预览 以在新浏览器标签中打开页面的实时版本，完全如访问者看到的那样。
撤销更改
编辑器自动跟踪您的编辑历史。使用工具栏按钮或键盘快捷键来导航：
- 撤销（Ctrl+Z / Cmd+Z）-- 恢复您的上一个操作
- 重做（Ctrl+Y / Cmd+Y）-- 重新应用已撤销的操作
您也可以将页面恢复到更早的快照。点击工具栏中的 历史 以查看带有描述的已保存快照列表，点击任何条目以恢复到该点。
注意
恢复快照将您的当前页面内容替换为快照版本。这无法用标准撤销按钮撤销。如果您想保留返回选项，请在恢复旧快照前保存当前状态的快照。
保存您的工作
当您工作时，更改会自动保存。工具栏中的状态指示器显示您的更改是否已保存。您也可以随时点击 保存 来强制保存。