通用主题

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

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

注解

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

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

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

  • 为网站添加 语言。

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

  • 自定义布局的背景:

    • 选择一种 背景 颜色。

    • 添加背景 图像 或使用 替换 将其替换。然后配置其 位置:

      • 将所选图像用作 封面 或用于 重复图案。

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

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

颜色

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

主题颜色

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

要自定义主题颜色:

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

  • 点击调色板图标并选择一个配色方案。这样,所有颜色自定义都会重置。

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

小技巧

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

注解

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

状态颜色

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

Example

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

状态颜色选择 成功弹窗

字体

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

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

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

    注解

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

自定义字体

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

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

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

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

小技巧

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

样式

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

段落和标题

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

  • 修改 字体设置。

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

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

按钮

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

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

  • 修改 字体设置。

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

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

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

主按钮和次按钮

小技巧

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

输入字段

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

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

  • 修改 字体设置。

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

  • 定义 边框半径 以为字段的角添加圆角。

  • 选择一种 背景 颜色 来填充字段。

阴影

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

高级设置

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

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

  1. 转到您的 Google 账户。

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

    重要

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

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

  3. 创建 API 密钥 并复制它。

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

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

  6. 点击 保存。