构建模块

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

添加一个构建块

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

点击类别块时,会出现一个弹出窗口,允许您为每个类别在多个模板之间进行选择。

小技巧

您还可以使用搜索栏在插入块弹出窗口中搜索特定块。

弹出式区块选择

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

注解

访问某些块需要安装其各自的应用或模块(例如,需要电子商务才能使用产品块)。

Example

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

社交媒体内部内容块

窗体

表单区块用于收集网站访客的信息,并在适用时在您的数据库中创建记录。要将表单添加到网站页面,请拖放联系和表单类别,然后选择表单区块

表单区块示例

动作

默认情况下,当表单提交时,会自动发送一封包含访问者输入信息的电子邮件。根据您数据库上安装的应用,可能会提供可以自动创建记录的其他操作。要选择不同的操作,点击编辑,点击表单,导航到自定义标签,并选择所需的操作

编辑表单以更改其操作

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

字段

要向表单添加新字段,导航到自定义标签,并在表单字段部分旁边点击+ 字段按钮。要修改表单上的新字段(或任何其他字段),选择该字段,然后使用自定义标签的字段部分中的可用选项。例如,您可以:

  • 更改字段类型

    小技巧

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

    所有类型的表单字段

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

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

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

  • 添加占位符默认值

  • 指定字段是否必填

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

  • 添加动画

完成所需更改后,单击保存

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

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

  1. **准备 Odoo 表单:**在 Odoo 网站的页面上创建联系表单,并移除页眉设计页脚设计。确保页面上仅保留联系表单。

  2. **生成可嵌入代码:**复制 Odoo 表单页面的 URL 并将其粘贴到 iframe 生成器中,例如 La Digitale.deviFrame 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 的社交媒体帖子等。

将块添加到页面后,点击该块,然后转到自定义标签并点击编辑。用您的自定义嵌入代码替换占位符代码。

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

警告

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

移动、切换或删除构建块

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

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

要删除区块,点击)。

扩展构建区块的边距

小技巧

通过点击)快速更改块类别。

编辑构建区块

要编辑构建块的内容,请点击它并转到自定义选项卡。可用的自定义选项会根据所选块的类型而有所不同。

背景

要修改构建块的背景,请选择该块,转到自定义选项卡,然后点击颜色点或其他背景选项。您可以更改颜色和/或添加图像、视频和/或形状。选择形状后,将显示新字段以允许您自定义形状。

小技巧

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

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

    调整区块大小

其他资料

通用主题

布局:网格和列

对于大多数构建块,您可以在两种布局样式之间选择:网格。要更改默认布局样式,请点击该块,转到自定义选项卡,并将布局字段设置为网格

网格

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

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

选择布局可以确定块内每行的元素数量。为此,请选择要修改的块,点击字段旁边的下拉菜单,然后调整数量。然后,您可以使用自定义选项卡的部分中的选项修改特定列的设置。

注解

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

复制构建块

要复制构建块,请点击自定义选项卡顶部的)图标。复制后,新块将显示在页面上原始块的下方。

保存自定义构建区块

您可以保存自定义的构建块以在其他地方重复使用。为此,请选择它,转到自定义选项卡,然后点击)图标。点击弹出窗口中的保存并重新加载按钮以确认保存您的自定义块。

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

小技巧

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