內容區塊

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

其他資料

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

添加一个构建块

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

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

小訣竅

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

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

備註

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

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

Example

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

表單

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

動作

By default, when the form is submitted, an email containing the information entered by the visitor is automatically sent. Depending on the apps installed on your database, additional actions that can automatically create records may become available. To choose a different action, click Edit, click the form, navigate to the Style tab, and select the desired Action:

• Apply for a Job (Recruitment)

• Create a Customer (eCommerce)

• Create a Ticket (Helpdesk)

• Create an Opportunity (CRM)

• Subscribe to Newsletter (Email Marketing)

• Create a Task (Project)

• More models: to generate other types of records

By default, submitting the form redirects visitors to a Thank you page. Use the URL field to send them to a different page. Alternatively, you can choose not to redirect and keep them on the form’s page by selecting Nothing or Show Message in the On Success field.

欄位

To add a new field to the form, navigate to the Style tab and click the + Field button next to the Form or Field section. To modify any field on the form, select the field, then use the options available in the Field section of the Style tab. For example, you can:

• Change the field Type.

  小訣竅

  It is also possible to select an Existing Field from the database and use the data it contains. The fields available depend on the selected action. Property fields added to the database can also be used.

  Click here to preview all field types.

  

  Some fields are visually similar, but the data entered must follow a specific format.

• Edit the field’s Label and adapt its Position.

• Enable a field Description. Toggle the switch on and click the default description on the form to modify it.

• Add a Placeholder or Default value.

• Specify if the field is Required.

• Edit the field’s visibility settings.

• Add an animation.

Once you have made the desired changes, click Save.

Add an Odoo contact form on a non-Odoo website

You can display an Odoo contact form on another website using an iframe. To do so, follow these steps:

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

2. Generate an embeddable code: Copy the URL of the Odoo form page and paste it into an iframe generator, such as La Digitale.dev or iFrame Generator . Adjust the width and height for proper display.

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

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

警告

Do not copy/paste code you do not understand, as it could put your data at risk.

Move, switch, duplicate or delete a building block

Pull the turquoise borders on the block to reduce or increase the space at the top or bottom of it.

Change the block order by clicking (chevron up) or (chevron down) and move the block on the page by clicking (arrows). When you have multiple columns, move a column to the left or right by clicking (chevron left) or (chevron right).

To duplicate a building block, click (duplicate). Once duplicated, the new block appears on the page beneath the original one.

小訣竅

Alternatively, click the (duplicate) icon at the top of the Style tab to duplicate the selected block.

To delete a block, click (trash).

Edit a building block

To edit the content of a building block, click it and go to the Style tab. Available customization options vary depending on the type of block selected.

其他資料

• Web design elements

• Visibility

背景

To modify the background of a building block, select the block, go to the Style tab, and click the color dot or another Background option. You can change the color and/or add an image, video, and/or shape. Once you’ve selected a shape, new fields appear to allow you to customize the shape.

小訣竅

• Position an element (image, text, etc.) behind or in front of another one by using the Send to back or Bring to front icons.

  

• To resize a block, click and drag the dots around its edges to adjust it as needed.

  

其他資料

General theme

Layout: grid and columns

For most building blocks, you can choose between two layout styles: grid or columns (cols). To change the default layout style, click the block, go to the Style tab, and set the Layout field to Grid or Cols.

矩陣

The Grid layout allows you to reposition and resize elements, such as images or text, by dragging and dropping them. When Grid is selected, additional options are available to Add Elements by clicking Image, Text, or Button.

直欄

Choosing the Cols layout allows you to determine the number of elements per line within the block. To do so, select the block to modify, click the dropdown next to the Cols field, and adjust the number. You can then modify a specific column’s settings using the options in the Column section of the Style tab.

備註

By default, on mobile devices, only one element (column) is visible per line to ensure that content remains easily readable and accessible on smaller screens. To adjust the value, click the (mobile icon) at the top of the website editor and adapt the number of columns. Shapes are hidden by default on mobiles.

Save a custom building block

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

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

小訣竅

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

创建锚链接

锚链接是一种超链接，可将用户导向页面的**特定部分**。要为区块创建锚链接，请按照以下步骤操作：

1. 点击 编辑 并选择要链接的区块。

2. 点击 风格 选项卡顶部的 :icon:`fa-link`（ :guilabel:`链接`）。

3. 要编辑默认锚点名称，请点击绿色弹出消息中的 编辑。

4. 替换锚点名称，然后点击 保存并复制。

保存锚点后，您可以在网站的任何地方 链接到它 。