跳到主要内容

使用页面编辑器

B1 页面编辑器是一个可视化拖放构建器，可以让您设计教会网站页面而无需编写任何代码。您可以添加部分和内容块、自定义样式、预览您的工作以及撤销更改 -- 所有这些都可以在浏览器中完成。

开始前

  • 完成初始设置以配置您的网站
  • 在管理页面中创建至少一个页面
  • 您需要 content.edit 权限来访问编辑器

打开编辑器​

  1. 在 B1 Admin 中，点击左侧菜单中的网站。
  2. 在"页面"表中找到您想要编辑的页面，然后点击编辑。

编辑器在全屏模式下打开。左侧面板显示您的页面结构和可用的内容元素；中央区域显示您页面的实时预览。

信息

编辑器始终以浅色模式显示，不受 B1 Admin 主题设置的影响。这样可以确保预览准确匹配您的页面对网站访问者的外观。

页面结构：部分和元素​

每个页面都是由两个级别构建的：

  • 部分 -- 将您的页面分割成水平条带的顶级容器（例如，英雄部分、内容块或页脚条带）。每个页面必须至少有一个部分才能添加内容。
  • 元素 -- 放置在部分内的单个内容，例如文本、图像、按钮、卡片、表单和日历。

添加部分​

  1. 点击添加部分（或左侧面板顶部的 + 按钮）。
  2. 选择如何开始：
    • 从模板 — 浏览按类别（英雄、关于、服务、捐赠等）组织的部分模板库，点击一个来将其作为完全样式化的、预先填充的部分插入。添加后，您可以自定义一切。
    • 空白部分 — 选择列布局（单列、两列、三列等）并从头开始构建。
  3. 新部分出现在预览中。点击它以选择它并配置其背景色、内边距和其他样式选项。

向部分添加元素​

  1. 在预览中点击部分内部以选择它。
  2. 点击添加内容并从列表中选择元素类型：
    • 文本 -- 标题、段落和富文本
    • 图像 -- 上传或链接到照片
    • 按钮 -- 可点击的行动呼吁链接
    • 卡片 -- 带有标题和描述的图像
    • 表单 -- 在页面上直接嵌入表单
    • 日历 -- 显示事件日历
    • 常见问题 -- 手风琴样式的问答块
    • 视频 -- 通过 URL 嵌入视频
    • 组浏览器 -- 所有教会组的可过滤目录，具有可选的搜索、类别筛选和标签筛选
    • 图标功能 -- 带有标题和简短描述的图标，用于功能或事工亮点
    • 图库 -- 多照片网格或砌体布局
    • 推荐 -- 一个或多个带有作者姓名、角色和照片的引用
    • 社交媒体图标 -- 链接到您教会的社交媒体资料的图标
    • 倒计时 -- 计时器倒计时至日期或每周服务时间
    • 统计数据 -- 带有标签的大数字行（成员数、年数、校园数）
    • 活动进度 -- 捐赠活动的实时进度条，显示筹集的总金额相对于基金目标
    • 员工网格 -- 组成员的照片卡；该组必须启用 公开名册 选项
    • 服务时间 -- 您校园的服务时间表，从出勤设置自动获取
    • 讲道 -- 您的讲道库，作为完整浏览器或网格、列表或特色最新布局
  3. 使用出现的设置面板配置元素。

重新排序内容​

使用每个项目左侧的句柄图标（六个点）拖动部分或元素以重新排序它们。您可以在部分内拖动元素或在部分之间移动它们。

设置页面样式​

部分样式​

点击任何部分以打开其样式面板。您可以设置：

  • 背景 -- 纯色、渐变或图像。使用图像背景时，焦点选择器可让您点击以设置图像的哪部分在部分缩放时保持居中，叠加颜色选项可让您在图像上添加半透明色调以改善文本清晰度。
  • 内边距 -- 部分内部的上下间距
  • 宽度 -- 全宽或居中/受限
  • 分隔线 -- 装饰形状分隔线（波浪、倾斜、曲线、三角形等）在部分的顶部或底部边缘，具有颜色、高度和翻转选项

元素样式​

点击任何元素以打开其样式面板。常见选项包括字体大小、颜色、对齐、边距和内边距。对于图像，您可以设置替代文本和链接目标。

自定义 CSS​

对于高级样式，每个部分和元素都有一个自定义 CSS 字段，您可以在其中编写自己的 CSS 规则。这些规则的范围限定在该元素，因此它们不会无意中影响页面的其余部分。

提示

如果您需要在整个网站上应用样式 -- 例如自定义字体或全局颜色 -- 请使用外观设置而不是单个页面上的自定义 CSS。

预览您的页面​

使用工具栏中的预览控件来检查您的页面在不同屏幕大小下的外观：

  • 桌面 -- 全宽浏览器视图
  • 移动 -- 窄的手机大小视图

点击预览在新浏览器标签中打开页面的实时版本，就像访问者看到的一样。

撤销更改​

编辑器自动跟踪您的编辑历史。使用工具栏按钮或键盘快捷键来导航：

  • 撤销 (Ctrl+Z / Cmd+Z) -- 撤销您的最后一个操作
  • 重做 (Ctrl+Y / Cmd+Y) -- 重新应用已撤销的操作

您也可以将页面恢复到较早的快照。点击工具栏中的历史以查看带有描述的已保存快照列表，点击任何条目以恢复到该点。

注意

恢复快照会使用快照版本替换您当前的页面内容。这不能用标准撤销按钮撤销。如果您想保留返回的选项，请在恢复旧快照之前保存您当前状态的快照。

保存和发布​

当您工作时，更改会自动保存。工具栏中的状态指示器显示您的更改是否已保存。

草稿和已发布状态​

页面可以有已发布状态，这控制访问者何时看到您的更改。工具栏显示一个状态芯片，显示当前状态：

  • 保存时上线 -- 页面不使用发布工作流。每个已保存的更改都会立即上线。这是新页面的默认设置。
  • 未发布的更改 -- 页面之前已发布，但您在上一次发布后进行了更改。访问者仍然看到之前发布的版本。
  • 已发布 -- 页面在线，您保存的内容与访问者看到的相匹配。

要发布您的更改，点击工具栏中的发布按钮。页面立即上线。

要恢复到最后发布的版本而不影响访问者看到的内容，打开溢出菜单（⋮）并点击放弃更改。

要完全脱机一个页面，打开溢出菜单并点击取消发布。访问者将不再看到该页面，直到您再次发布它。

提示

当您想准备一个页面 -- 例如，用于即将到来的事件 -- 并仅在合适的时刻上线时，使用草稿/发布工作流。构建和预览页面，然后在准备好时点击发布。

相关文章​

  • 管理页面 -- 创建页面、设置 URL 和管理网站导航
  • 外观 -- 设置网站范围的颜色、字体和品牌
  • 文件 -- 上传要在编辑器中使用的图像和文档
  • 创建表单 -- 构建可以在页面上嵌入的表单