构建块

您可以通过 拖拽构建块 <website/building_blocks/add> 来设计网站，然后 编辑它们 <website/building_blocks/edit> 以满足内容和布局需求。

::: seealso Odoo 教程：设计您的网站：文本与颜色 :::

要向 网站页面 <../structure/pages> 添加块，进入页面，点击 编辑，然后将所需的构建块拖拽到合适的位置。构建块分为两类：分类 和 内部内容。内部内容 构建块只能放入 分类 构建块中。

点击分类块时，会弹出一个窗口，让您在每个分类的多个模板之间进行选择。

:::: tip ::: title 提示 :::

您也可以在 插入块 弹窗的搜索栏中搜索特定块。

::::

分类块放置后，您可以在其内部拖拽 内部内容 块。内部内容 块可向已有的分类块中添加视频、图片、社交媒体按钮等元素。

:::: note ::: title 注意 :::

访问某些块需要先安装对应的应用或模块（例如，产品 块需要安装 eCommerce）。 ::::

::: example 使用内部内容的 社交媒体 块将所有社交媒体账号集中管理。打开对应平台的开关并粘贴账号 URL 即可。

:::

表单 块用于收集访客信息，并在适用时在数据库中创建记录。要在页面添加表单，拖拽 联系与表单 分类，然后选择 表单块。

默认情况下，表单提交后会自动发送包含访客填写信息的邮件。根据已安装的应用，可能会出现可自动创建记录的其他动作。要更改动作，点击 编辑 → 选中表单 → 自定义 选项卡 → 选择所需的 动作：

  • 申请职位（招聘 </applications/hr/recruitment>）
  • 创建客户（eCommerce <../../ecommerce>）
  • 创建工单（帮助台 </applications/services/helpdesk>）
  • 创建商机（CRM </applications/sales/crm>）
  • 订阅新闻简报（邮件营销 </applications/marketing/email_marketing>）
  • 创建任务（项目 </applications/services/project>）

默认提交后会跳转到 感谢 页面。可在 URL 字段填写其他页面地址，或在 成功后 字段选择 无 或 显示信息 以停留在表单页。

要在表单中添加新字段，进入 自定义 选项卡，点击 + 字段 按钮。要修改任意字段，选中该字段后在 自定义 选项卡的 字段 部分进行设置，例如：

  • 更改字段 类型。

    :::: tip ::: title 提示 :::

    也可以选择数据库中已有的字段并使用其数据。可用字段取决于所选动作。已在数据库中添加的属性字段同样可用。 ::::

    ::: spoiler 点击此处预览所有字段类型。

    有些字段外观相似，但输入的数据必须符合特定格式。 :::

  • 编辑字段的 标签 并调整 位置。

  • 启用字段 描述，点击表单中的默认描述进行修改。

  • 添加 占位符 或 默认值。

  • 设置字段是否 必填。

  • 编辑字段的 可见性 <visibility> 设置。

  • 添加 动画 <website/elements/animations>。

修改完毕后点击 保存。

您可以通过 iframe 在其他网站展示 Odoo 联系表单，步骤如下：

  1. 准备 Odoo 表单：在 Odoo 网站页面创建联系表单，并移除 页眉设计 <website/header_footer/header-design> 与 页脚设计 <website/header_footer/footer-design>，仅保留表单本身。
  2. 生成可嵌入代码：复制表单页面的 URL，粘贴至 iframe 生成器（如 La Digitale.dev 或 iFrame Generator），调整宽高以适配显示。
  3. 将代码加入非 Odoo 网站：在目标页面的 HTML 中（代码编辑器或 CMS）插入生成的 iframe 代码。

::: example 嵌入代码示例：

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

:::

嵌入代码可将第三方服务的内容（如 YouTube 视频、Google 地图、Instagram 帖子等）集成到页面。添加块后，选中块，进入 自定义 选项卡并点击 编辑，将占位代码替换为您的自定义嵌入代码。

:::: warning ::: title 警告 :::

不要复制粘贴不熟悉的代码，可能会导致数据风险。 ::::

拖动块四周的青色边框可增减其上下间距。

点击 fa-chevron-up（向上）或 fa-chevron-down（向下）改变块顺序，点击 fa-arrows（移动）可在页面上移动块。当页面有多个 列 <website/building_blocks/cols> 时，点击 fa-chevron-left（左）或 fa-chevron-right（右）可左右移动列。

要删除块，点击 fa-trash（删除）。

:::: tip ::: title 提示 :::

快速切换块类别，点击 fa-exchange（交换）。 ::::

要编辑构建块内容，点击块并进入 自定义 选项卡。可用的自定义选项视块类型而定。

::: seealso - 网页设计元素 <elements> - 可见性 <visibility> :::

修改块背景时，选中块后进入 自定义 选项卡，点击颜色点或其他 背景 选项。您可以更改颜色、添加图片、视频或形状。选择形状后会出现新字段，可进一步定制形状。

:::: tip ::: title 提示 :::

  • 使用 发送到后方 或 置于前方 图标，可将元素（图片、文字等）放在其他元素的后面或前面。

  • 拖动块边缘的点可调整大小。

::::

::: seealso 通用主题 <themes> :::

大多数构建块支持两种布局样式：网格 <website/building_blocks/grid> 或 列 (cols) <website/building_blocks/cols>。要更改默认布局，选中块后进入 自定义 选项卡，将 布局 字段设为 网格 或 列。

网格 布局允许通过拖拽重新定位并调整图片、文字等元素的大小。选中 网格 后，可点击 图片、文字 或 按钮 来 添加元素。

选择 列 布局后，可决定每行显示多少元素。选中块后，点击 列 字段旁的下拉框并调整数量。随后可在 自定义 选项卡的 列 部分修改特定列的设置。

:::: note ::: title 注意 :::

在 移动设备 <visibility> 上，默认每行只显示一个列，以保证内容在小屏幕上易读。可点击编辑器顶部的 fa-mobile（移动图标）调整列数。形状在移动端默认隐藏。 ::::

点击 自定义 选项卡顶部的 fa-clone（复制）图标即可复制构建块。复制后，新块会出现在原块下方。

您可以保存已自定义的构建块以便在其他位置复用。选中块后，进入 自定义 选项卡，点击 fa-floppy-o（保存）图标，在弹窗中点击 保存并重新加载 确认。

要将已保存的块添加到页面，打开 块 选项卡，拖拽 自定义 分类中的 自定义 块。弹窗出现后，点击 自定义 类别下的目标块。

:::: tip ::: title 提示 :::

在 插入块 弹窗中，点击 fa-pencil（编辑）可重命名自定义块，点击 fa-trash（删除）可删除。 ::::

锚点链接是指向页面 特定章节 的超链接。为块创建锚点链接的步骤：

  1. 点击 编辑 并选中要链接的块。
  2. 在 自定义 选项卡顶部点击 fa-link（链接）图标。
  3. 在弹出的绿色提示框中点击 编辑，修改默认锚点名称。
  4. 替换锚点名称后点击 保存并复制。

锚点保存后，您可以在网站任意位置通过 链接 <website/elements/links> 指向该块。