常规主题

Odoo 提供了一系列主题 自定义选项,用于定义网站的 颜色、字体 和 阴影样式,以及 段落和标题、按钮、链接 和 输入字段 的外观。此外,还提供了其他 高级设置。

首次设置网站时,系统会提示您选择主题。将鼠标悬停在主题上可查看每个主题的扩展预览。点击某个主题即可将其选中,或点击 查看更多主题 按钮以显示所有可用主题的完整列表。

注解

如果您未选择主题就离开,系统将使用默认主题创建网站。

要自定义主题,请打开网站编辑器,前往 主题 选项卡,然后转到 网站 部分。您可以:

  • 点击 切换主题 打开主题选择器。将鼠标悬停在主题上可查看每个主题的扩展预览。点击 使用此主题 将其应用到网站。

  • 为网站添加 语言。

  • 选择 页面布局 以更改页面上构建块和网站元素的整体显示效果与间距。

  • 自定义布局的背景:

    • 选择 背景 颜色。

    • 添加背景 图片 或 替换 它。然后配置其 位置:

      • 将所选图片用作 封面,或在 重复图案 中使用。

      • 点击 (背景位置)图标以调整图片位置,然后点击 应用。

点击 保存 将更改应用到网站。

颜色

Odoo 网站编辑器提供两种主要颜色类型,即 主题颜色 和 状态颜色。点击调色板栏,在 主题 选项卡中打开 网站 / 颜色 菜单。

主题颜色

主题颜色是指显示在网站所有页面上的颜色集合。它们由五种颜色组成:三种 主色,主要用于按钮和链接,以及两种 浅色和深色,主要用于文本和标题。

要自定义主题颜色:

  • 点击要更改的颜色,然后选择预定义的 纯色,或点击 自定义 手动选择特定的色调(或添加其 #HEX 或 RGBA 代码)。点击 (重置)以移除颜色选择。

  • 点击调色板图标并选择一个调色板。此操作会重置所有颜色自定义设置。

Odoo 会为所选颜色或调色板自动创建 颜色预设。这些预定义的颜色组合会应用到网站的各种元素,以打造结构清晰、视觉美观的设计。选择调色板时,其预设会定义这些颜色在不同元素中的分布方式。要修改预设,请点击 颜色预设,然后选择一个预设以打开自定义下拉菜单。每个颜色预设都包含构建块的 背景、文本、标题、链接、主要按钮 和 次要按钮 的颜色。

小技巧

要将颜色预设应用到构建块,请选中该构建块,前往 样式 选项卡,点击 背景 旁边的颜色圆点,然后选择一个 主题。

注解

更改颜色预设会自动更新默认预设以及使用该预设的构建块的颜色。

状态颜色

状态颜色用于表示某些操作的状态(例如 成功、警告 等)。它们用于向用户和网站访客提供反馈的弹出消息中。要自定义网站的 状态颜色,请前往 高级 部分并点击圆点以更改其颜色。您还可以配置 灰色。

示例

网站上与成功操作相关的信息会以 绿色显示。

选择状态颜色 成功弹出框

字体

Odoo 允许您自定义网站元素的字体系列和字体大小,包括 段落和标题、按钮 和 输入字段。

  • 字体大小:在 段落、标题、按钮 和 输入字段 部分中,使用 字体大小 字段设置默认大小。点击 (切换更多选项)图标以展开该部分并定义自定义大小(例如,基于标题级别、按钮大小等)。

  • Font Family : 在 段落 、 标题 、 和 按钮 部分中,从下拉菜单中选择一个字体。

    注解

    选择 系统字体 后,Odoo 会使用访客操作系统上已安装的原生字体。例如,Android 将 Roboto 用作其默认系统字体。

自定义字体

要添加 Odoo 中默认不可用的自定义字体,请点击 字体系列 下拉菜单,并在底部选择 添加自定义字体。在 添加 Google 字体或上传自定义字体 弹出窗口中:

  • 要添加 Google 字体,请打开 选择 Google 字体 下拉菜单并选择所需的字体。如果您的网站运营所在地的法规要求遵守相关法律(例如但不限于欧盟的 GDPR),请关闭 从 Google 服务器提供字体 开关。这将确保 Google 字体存储在网站服务器上,而不是 Google 的服务器上。

  • 要从您的计算机上传 自定义字体,请点击 选择文件。

完成后,点击 保存并重新加载。

小技巧

窗口右侧会显示所选字体的 预览。

样式

网站元素的外观还可以进一步自定义。例如,您可以自定义 段落和标题、按钮、链接 和 输入字段。

段落和标题

段落 和 标题 部分为这些文本元素提供了其他样式选项。您可以:

  • 修改 字体设置。

  • 调整 行高 以定义文本行之间的间距。

  • 调整 外边距 以定义段落和标题周围的间距。

按钮

要自定义网站主要按钮和次要按钮的样式,请转到 按钮 部分并编辑相关选项:

  • 打开 主要样式 或 次要样式 字段旁边的 下拉菜单,为每种按钮类型更改样式,例如 填充、轮廓 或 扁平。选择 轮廓 时,下方会出现 边框宽度 选项,您可以据此调整按钮轮廓的宽度。

  • 修改 字体设置。

  • 调整 内边距 以更改按钮标签周围的间距。

  • 使用 圆角 选项调整按钮的边框半径。

  • 当按钮被点击时,在 点击效果 下拉菜单中添加动画。

主要和次要按钮

小技巧

要为按钮的 内边距、字体大小 和 圆角 定义自定义的 小 和 大 尺寸,请点击 (切换更多选项) 图标,然后使用相关字段。

输入字段

要自定义网站输入字段的样式,请转到 输入字段 部分并编辑相关选项:

  • 调整 内边距 以更改字段周围的间距。

  • 修改 字体设置。

  • 自定义字段周围的 边框宽度。

  • 定义 边框半径 以使字段的边角变圆。

  • 选择 背景 颜色 以填充字段。

阴影

配置用于各个部分、卡片和其他元素的默认阴影样式。要自定义这些样式,请转到 阴影 部分,并为每种阴影尺寸定义 颜色、模糊 和 扩散 值:常规、小 和 大。这些设置用作默认阴影样式。当您将阴影选项应用到 构建块 或其他网站元素时,将自动应用相应的已配置阴影选项。

高级设置

还可以在 高级 部分配置其他设置,例如 显示或隐藏页眉,以及使用 代码注入 通过 HTML 标签验证网站。

您还可以配置 Google 地图,以在网站上显示地图并启用地理定位功能,例如在 联系我们 页面和特定片段中。要配置此选项:

  1. 转到您的 Google 账号。

  2. 启用 Maps Static API、Maps JavaScript API 和 Places API。

    重要

    • 请勿启用 Places API (New),因为 Odoo 尚不支持该功能。

    • 使用 Google API 可能需要 向 Google 付费。

  3. 创建 API 密钥 并复制。

  4. 在 Odoo 网站编辑器中,转到 主题 选项卡,然后在 高级 部分中,点击 Google Map 旁边的 自定义密钥。

  5. 将生成的 API 密钥粘贴到 API 密钥 字段中。

  6. 点击 保存 。