构建模块

您可以通过 :ref:` 拖放构件 <website/building_blocks/add>` 设计网站，然后 编辑构件 以满足您的内容和布局需求。

其他资料

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

添加一个构建块

要在 网站页面 中添加模块，请访问该页面，点击 编辑，然后将所需的模块拖放到适当的位置。类别 和 内部内容 两种类型的构件可用。 内部内容 构件只能添加到 类别 构件中。

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

小技巧

使用搜索栏在 插入区块 弹出窗口中搜索特定区块。

弹出式区块选择

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

注解

  • 您还可以在登录页面上添加构件。为此，请导航至网站主页，在 URL 中添加 /web/login，然后按`Enter`。

  • 访问某些区块需要安装相应的应用程序或模块（例如，:guilabel:`产品`区块的电子商务）。

Example

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

社交媒体内部内容块

表单

表单`块用于收集网站访问者的信息，并在适用的情况下在数据库中创建记录。要在网站页面上添加表单，请拖放 :guilabel:`联系方式与表单 类别块，然后在弹出窗口中选择一个块。

表单区块示例

动作

默认情况下，当表单提交时，包含访问者输入信息的电子邮件会自动发送。根据数据库上安装的应用，可能会提供可自动创建记录的其他操作。要选择其他操作，请点击编辑，点击表单，导航到样式选项卡，然后选择所需的操作：

默认情况下，提交表单会将访问者重定向到*感谢*页面。使用URL字段将他们发送到不同的页面。或者，您可以选择不重定向并通过在成功时字段中选择无或显示消息来让他们留在表单页面上。

字段

要向表單添加新欄位，請導航至樣式分頁，然後點擊表單或欄位部分旁邊的+ 欄位按鈕。要修改表單上的任何欄位，請選擇該欄位，然後使用樣式分頁的欄位部分中的可用選項。例如，您可以：

  • 更改字段类型。

    小技巧

    也可以从数据库中选择现有字段并使用其中包含的数据。可用的字段取决于所选操作。添加到数据库的属性字段也可以使用。

    所有类型的表单字段

    有些字段在视觉上相似，但输入的数据必须遵循特定格式。

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

  • 啟用欄位描述。切換開關並點擊表單上的預設描述進行修改。

  • 添加占位符或默认值。

  • 指定字段是否必填。

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

  • 添加动画。

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

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

您可以使用 iframe 在其他网站上显示 Odoo 联系表单。请按照以下步骤操作：

  1. Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header and footer. Make sure only the contact form remains on the page.

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

  3. 将嵌入代码添加到非 Odoo 网站： 打开相关页面的 HTML（在代码编辑器或内容管理系统中），并在应显示表单的位置插入嵌入代码。

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 的社交媒体帖子等。

将 内部内容 部分中的 嵌入代码 块拖放到页面后，点击该块，然后转到 风格 选项卡并点击 编辑。用您的自定义嵌入代码替换占位符代码。

添加指向您想要指向的嵌入代码的链接

警告

请勿复制/粘贴您不理解的代码，因为这可能会使您的数据面临风险。

移動、切換、複製或刪除構建塊

拖动块上的青绿色边框以减少或增加其顶部或底部的空间。

点击）或）更改区块顺序，点击）在页面上移动区块。当有多个列时，点击）或）将列向左或向右移动。

要複製構建塊，請點擊（複製）。複製後，新塊將顯示在原始塊下方的頁面上。

小技巧

或者，點擊樣式分頁頂部的（複製）圖示以複製所選塊。

要删除区块，点击）。

扩展构建区块的边距

编辑构建区块

要編輯構建塊的內容，請點擊它並轉到樣式分頁。可用的自訂選項因所選塊的類型而異。

其他资料

背景

要修改構建塊的背景，請選擇該塊，轉到樣式分頁，然後點擊顏色點或其他背景選項。您可以更改顏色和/或添加圖片、影片和/或形狀。選擇形狀後，將出現新欄位以允許您自訂形狀。

小技巧

  • 使用置于底层或置于顶层图标将元素（图片、文本等）放置在另一个元素的后面或前面。

    更改区块位置

  • 要调整区块大小，点击并拖动其边缘周围的点以根据需要进行调整。

    调整区块大小

其他资料

通用主题

布局：网格和列

對於大多數構建塊，您可以在兩種佈局樣式之間進行選擇：網格或欄（cols）。要更改預設佈局樣式，請點擊該塊，轉到樣式分頁，並將佈局欄位設定為網格或欄。

网格

网格布局允许您通过拖放来重新定位和调整元素（如图片或文本）的大小。当选择网格时，可以通过点击图片、文本或按钮来添加元素。

选择网格布局后，选择一张图片并将其拖放到所需位置。

列

選擇欄佈局允許您確定塊內每行的元素數量。為此，請選擇要修改的塊，點擊欄欄位旁邊的下拉清單，並調整數字。然後，您可以使用樣式分頁的欄部分中的選項修改特定欄的設定。

注解

默认情况下，在移动设备上，每行只显示一个元素（列），以确保内容在较小屏幕上保持易于阅读和访问。要调整该值，点击网站编辑器顶部的）并调整列数。形状在移动设备上默认隐藏。

保存自定义构建区块

您可以保存自定义构件，以便在其他地方重复使用。要执行此操作，请选中它，前往 风格 选项卡，然后点击 ）图标。点击弹出窗口中的 保存 按钮，确认保存自定义块。

要将已保存的构建块添加到页面，请前往 块 选项卡，然后从 分类 部分拖放：guilabel:自定义 块。在弹出的窗口中，点击 自定义 类别中所需的块。

小技巧

在弹出的 插入区块 窗口中，点击 :icon:`fa-pencil`（ :guilabel:`编辑`）重命名自定义区块，或点击 ）以删除自定义区块。