模板设计

您可以使用 拖放模板内容组件 来设计网站，然后使用 编辑它们 来适应您的内容布局需求。

更多内容

Odoo 教程: 设计您的网站: 文本和颜色

添加模板内容块

要向 网站页面 添加模板内容块，请访问页面，点击 编辑 ，然后拖放所需的模板内容块到适当的位置。可用的模板内容块有 电商类目 和 内部内容 。 内部内容 模板内容块只能添加到 电商类目 模板内容块中。

点击类别块时，会出现一个弹出窗口，允许您为每个类别选择多个模板。

Tip

您也可以使用搜索栏在弹出窗口中搜索特定的模板内容块。

弹出块选择

一旦类别块被放置，您可以将 内部内容 块拖放到其中。 内部内容 块允许您将元素，如视频、图片、社交媒体按钮等添加到已存在的类别块中。

Note

某些块需要安装其相应的应用程序或模块（例如，电子商务模块用于 产品 块）。

Example

使用内部内容块 社交媒体 块将所有社交帐户放在一个地方。在所需的平台旁切换开关打开或关闭，并复制/粘贴帐户网址。

社交媒体内部内容块

窗体

使用 Form 块收集网站访客的信息并创建数据库记录（如果适用）。要向网站页面添加 窗体，请拖放 Contact & Forms 类别，然后选择 Form block。

提交窗体块的示例

动作

默认情况下，当提交表单时，将自动发送包含访客输入的信息的电子邮件。根据您数据库安装的模块，可以自动创建记录的附加操作可能become available。要选择不同的操作，请单击 编辑 ，单击表单，导航至 自定义 选项卡，并选择所需的 操作 ：

修改表单以更改其操作

默认情况下，提交表单将访客重定向到 感谢 页。使用 URL 字段将他们定向到不同的页面。或者，您可以选择不重定向，并保持他们留在表单的页面中，选择 无 或 显示消息 在 On Success 字段中。

字段

要向表单添加新字段，请导航至 自定义选项卡 并在表单或字段部分的 + Field 按钮的右侧。要修改表单中的任何新（或其他）字段，请选择字段，然后使用 Field 部分的 Customize 选项。例如，您可以：

  • 修改字段 类型 。

    Tip

    也可以从数据库中选择一个 Existing Field 并使用它所包含的数据。可用的字段取决于所选操作。数据库中添加的字段也可以使用。

    所有类型的表单字段

    某些字段 visually 相似，但所输入的数据必须遵循特定的格式。

  • 修改字段的 标签 并适应其 位置 。

  • 启用字段 描述 。点击表单上的默认描述以修改它。

  • 添加 占位符 或 默认值 。

  • 指定字段是否为 必填 。

  • 修改字段的 可见性 设置。

  • 添加 动画 。

完成所选更改后，请单击 保存 。

在非 Odoo 网站上添加 Odoo 联系表单

您可以使用 iframe 在非 Odoo 网站上显示 Odoo 联系表单。

  1. 准备 Odoo 表单： 在 Odoo Website 页面上创建一个联系表单，并删除 头部设计 和 底部设计 。确保页面上只显示 联系表单。

  2. 生成可嵌入代码： 复制 Odoo 表单页面的 URL，并将其粘贴到 iframe 生成器中，例如 La Digitale.dev 或 iFrame Generator 。调整宽度和高度以正确显示。

  3. 将嵌入代码添加到非 Odoo 网站： 打开相关的页面的 HTML（在代码编辑器或 CMS 中）并插入嵌入代码，以显示表单。

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 Maps 地图、Instagram 社交媒体帖子等。

将块添加到页面后，单击块，然后转到 自定义 选项卡并单击 编辑 。将占位符代码替换为自定义嵌入代码。

添加指向嵌入代码的链接

Warning

不理解的代码，请勿复制/粘贴，因为它可能会将数据置于危险之中。

移动、切换或删除构建块

将青色边框拉向块的顶部或底部以缩小或增加空间。

通过单击 (chevron up) 或 (chevron down) 来更改块的顺序。通过单击 (arrows) 来移动块。当有多个 列 时，通过单击 (chevron left) 或 (chevron right) 来移动列。

删除块，请单击 (trash)。

扩展构建块的边距

Tip

通过单击 (exchange) 来快速更改构建块类别。

编辑构建块

要编辑构建块的内容，请单击它并转到 自定义 选项卡。可用的自定义选项因所选块类型而异。

更多内容

背景

要修改构建块的背景，请选择该块，转到 自定义 选项卡，并单击颜色点或其他 背景 选项。您可以更改颜色和/或添加图像、视频和/或形状。一旦选择了形状，将出现新的字段，以允许您自定义形状。

Tip

  • 将元素（图像、文本等）放在其他元素后面或前面，请使用 发送到背景 或 置于顶层 图标。

    修改块位置

  • 通过单击并拖动其边缘周围的点来调整块的大小。

    修改块大小

更多内容

通用主题

布局：网格和列

对于大多数构建块，您可以选择两种布局样式：网格或列（cols）。要更改默认布局样式，请单击 块，转到 自定义 选项卡，并设置 布局 字段为 网格 或 列。

网格

网格布局允许您通过拖放元素（如图像或文本）来重新定位和调整大小。当选择 网格`时，将Available additional options to :guilabel:`Add Elements by clicking Image, Text, or Button.

当选择网格布局时，请选择图像并拖放到需要位置。

列

选择 列 布局允许您确定块中每行元素的数量。要执行此操作，请选择要修改的块，单击 列 字段旁边的下拉菜单，并调整数字。然后，您可以使用 Customize 选项卡中的 Column 部分的选项修改特定列的设置。

Note

默认情况下，在移动设备上，每行只显示一个元素（列），以确保内容 remains easily 可读和可访问，并在较小的屏幕上。要调整此值，请单击网站编辑器的顶部的 (手机图标)，并调整列数。形状在移动设备上默认隐藏。

复制构建块

要复制构建块，请单击 自定义 选项卡的 (复制) 图标。复制后，新的块会出现在原始块下方的页面上。

保存自定义构建块

您可以将自定义构建块保存，以便在其他地方重用。要执行此操作，请选择该块，导航到 自定义 选项卡，并单击 floppy disk (硬盘) 图标。在弹出窗口中，单击 保存并重新加载 按钮以确认保存自定义块。

要向页面添加保存的构建块，请导航到 块 选项卡，并拖放 Custom 块从 Categories 部分。在打开的弹出窗口中，单击 Custom 分类中的所需块。

Tip

在打开的弹出窗口中，单击 edit (编辑) 以重命名自定义块或单击 delete (删除) 以删除它。