一、Odoo网页设计的 "四大法宝"
想象一下这个场景：
你想给公司官网换个新面貌，找设计师报价2万，等了两周只出了个初稿。你咬牙自己上，打开Odoo 19的网站编辑器——左边是各种"建筑块"，右边是样式面板，中间是实时预览。你像拼乐高一样，把图片块、文字块、表单块拖进页面，调调颜色、改改字体，一小时后，一个专业感十足的页面就诞生了。
这就是Odoo 19 Web Design（网页设计） 的魔力！
Odoo 19的网页设计体系由四大核心模块组成，就像 "四大法宝" ：
| 法宝 | 功能 | 比喻 |
|---|---|---|
| Building Blocks（建筑块） | 拖拽式页面搭建 | 像搭乐高积木 |
| General Theme（通用主题） | 全站颜色、字体、样式统一 | 像给网站穿 "品牌制服" |
| Elements（元素） | 标题、按钮、图片、视频、动画 | 像网站的 "细胞" |
| Visibility（可见性） | 按设备、国家、语言等条件显示/隐藏 | 像网站的 "智能开关" |
二、建筑块（Building Blocks）：拖拽即建站的 "乐高积木"
添加建筑块
- 打开网站页面 → 点击 Edit 进入编辑模式
- 左侧出现 Blocks 面板
- 拖拽所需建筑块到页面位置
两大建筑块类型
| 类型 | 说明 | 关系 |
|---|---|---|
| Categories（分类块） | 大区块容器，如Intro、Columns、Content | "房子" 的主体结构 |
| Inner Content（内部内容） | 只能放在分类块内，如视频、图片、社交按钮 | "房子" 里的家具装饰 |
> ⚠️ 规则：Inner Content块只能放在Categories块内，不能独立存在。
分类块列表
| 分类 | 用途 |
|---|---|
| Intro | 开场/首屏Hero区块 |
| Columns | 多列布局 |
| Content | 内容展示 |
| Images | 图片展示 |
| People | 团队/人物介绍 |
| Text | 文字区块 |
| Contact & Forms | 联系表单 |
| Social | 社交媒体 |
| Events | 活动 |
> 点击分类块后弹出窗口，可选择该分类下的多种模板。
表单块（Form Block）：自动收集线索的 "吸客神器"
添加表单：
- 拖拽 Contact & Forms 分类块 → 选择表单模板
表单动作（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 | - | 生成其他类型记录 |
> 默认动作：提交后自动发送邮件，包含访客填写的信息。
表单字段配置
- 点击 + Field 添加新字段
- 修改字段 Type：
- Custom Text
- Long Custom Text
- Email
- Telephone
- Your Company
- Url
- Number
- Decimal Number
- Checkbox
- Multiple Checkboxes
- Radio Buttons
- Selection
- Date
- Date & Time
- File Upload
- 设置 Label、Placeholder、Default value
- 勾选 Required（必填）
- 选择 Existing Field 使用数据库已有字段
提交后行为
| 选项 | 说明 |
|---|---|
| URL | 提交后跳转到指定页面 |
| Nothing | 留在当前页面 |
| Show Message | 显示成功消息 |
在非Odoo网站上嵌入Odoo表单
三步搞定：
1. 准备Odoo表单：在Odoo网站创建联系表单，移除页头页脚，只保留表单
2. 生成嵌入代码：复制表单页面URL，粘贴到iframe生成器（如La Digitale.dev或iFrame Generator），调整宽高
3. 插入非Odoo网站：在目标页面的HTML中插入iframe代码
示例代码：
<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>
style="border:0;"
name="odooForm"
scrolling="no"
frameborder="0"
marginheight="0"
marginwidth="0"
height="400px"
width="600px"
allowfullscreen>
</iframe>
嵌入代码块（Embed Code）：第三方内容一键接入
- 拖拽 Embed Code 内部内容块到分类块内
- 点击块 → Style 标签 → Edit
- 替换占位代码为你的自定义代码
> ⚠️ 安全警告：不要复制粘贴你不理解的代码，可能导致数据风险！
常见用途：
- YouTube视频嵌入
- Google Maps地图
- Instagram帖子
- 第三方工具（聊天插件、分析代码）
移动、复制、删除建筑块
| 操作 | 图标 | 说明 |
|---|---|---|
| 上移 | ↑ | 将块向上移动 |
| 下移 | ↓ | 将块向下移动 |
| 左右移动列 | ↔ | 多列时移动列位置 |
| 复制 | ⎘ | 复制当前块 |
| 删除 | 🗑 | 删除当前块 |
> 复制替代方法：点击 Style 标签顶部的 ⎘ 图标。
编辑建筑块
选中块后，Style 标签页提供丰富定制选项：
背景（Background）
- 选择颜色
- 添加图片
- 使用图片作为 Pattern（图案）
- 选择 None（无）
- 添加视频
- 添加形状（Shape）
> 图层顺序：使用 Send to back 或 Bring to front 调整元素层级。
布局（Layout）：Grid vs Cols
| 布局 | 特点 | 适用场景 |
|---|---|---|
| Grid（网格） | 自由拖拽调整元素位置和大小 | 创意排版、不规则布局 |
| Cols（列） | 固定列数，元素均匀分布 | 标准内容展示、产品列表 |
Grid布局特色：
- 自由拖拽元素到任意位置
- 调整元素大小
- 点击 Add Elements 添加图片、文字、按钮
Cols布局特色：
- 设置每行元素数量（如3列）
- 修改单列设置
- 移动端默认每行1个元素
> 移动端调整：点击顶部 📱 图标，调整移动端列数。形状默认在移动端隐藏。
保存自定义建筑块
- 选中块 → Style 标签 → 点击 💾（软盘图标）
- 输入名称 → 点击 Save
- 保存后在 Blocks → Custom 分类下可用
> 管理自定义块：点击 ✏️ 重命名，点击 🗑 删除。
创建锚点链接（Anchor Link）
锚点链接让用户点击后跳转到页面特定位置。
步骤：
1. 点击 Edit，选中目标块
2. 点击 Style 标签顶部的 🔗 图标
3. 在绿色弹窗中点击 Edit
4. 修改锚点名称 → 点击 Save & copy
5. 在其他位置创建链接，输入 #锚点名称
三、通用主题（General Theme）：打造你的 "品牌DNA"
进入网站编辑器 → Theme 标签页 → Website 区域
切换主题
- 点击 Switch Theme
- 悬停预览 → 点击 Use this theme
页面布局
- Page Layout：调整建筑块和网站元素的整体显示和间距
背景设置
- 选择颜色
- 添加图片
- 使用图片作为 Pattern（图案）
- 选择 None（无）
颜色系统
主题色（Theme Colors）
5种核心颜色，定义全站视觉：
| 颜色类型 | 数量 | 用途 |
|---|---|---|
| Main colors | 3种 | 按钮、链接 |
| Light & Dark colors | 2种 | 文字、标题 |
修改方法：
- 点击颜色 → 选择预设 Solid 色 或 自定义 Custom（输入#HEX或RGBA）
- 点击 Reset 移除颜色选择
- 点击 调色板图标 → 选择完整配色方案（所有自定义重置）
颜色预设（Color Presets）：
Odoo自动为选定颜色创建预设，包含：
- Background（背景）
- Text（文字）
- Headings（标题）
- Links（链接）
- Primary Buttons（主按钮）
- Secondary Buttons（次按钮）
> 修改预设 → 自动更新所有使用该预设的建筑块。
状态色（Status Colors）
用于反馈消息：
| 状态 | 默认颜色 | 用途 |
|---|---|---|
| Success | 绿色 | 操作成功 |
| Warning | 黄色 | 警告提示 |
| Info | 蓝色 | 信息提示 |
| Danger | 红色 | 错误提示 |
- 在 Advanced 区域点击圆点修改颜色
字体系统
| 元素 | 可定制项 |
|---|---|
| Paragraph（段落） | 字体、字号、行高、边距 |
| Headings（标题） | 字体、字号、行高、边距 |
| Buttons（按钮） | 字体、字号、内边距 |
| Input Fields（输入框） | 字体、字号、内边距 |
自定义字体：
- 点击 Font Family 下拉 → Add a Custom Font
- Google字体：
选择字体 → 可选 "从Google服务器加载"或"存储在本地服务器"（GDPR合规）
选择字体 → 可选 "从Google服务器加载"或"存储在本地服务器"（GDPR合规）
- 自定义字体：
上传字体文件
上传字体文件
- 右侧显示 Preview（预览）
> 选择 System Fonts 时，Odoo使用访客操作系统原生字体（如Android用Roboto）。
样式定制
按钮样式
| 选项 | 说明 |
|---|---|
| Primary Style / Secondary Style | Fill（填充）、Outline（描边）、Flat（扁平） |
| Border Width | 描边宽度（Outline时显示） |
| Padding | 按钮标签周围间距 |
| Round Corners | 圆角半径 |
| On Click Effect | 点击动画 |
> 点击 Toggle more options 可定义Small和Large尺寸的自定义值。
链接样式
| 选项 | 效果 |
|---|---|
| No Underline | 无下划线 |
| Underline On Hover | 悬停时下划线 |
| Always Underline | 始终下划线 |
输入框样式
| 选项 | 说明 |
|---|---|
| Padding | 字段周围间距 |
| Font | 字体设置 |
| Border Width | 边框宽度 |
| Border Radius | 圆角 |
| Background | 背景色 |
高级设置
| 设置项 | 说明 |
|---|---|
| Show Header | 显示/隐藏页头 |
| Code Injection | 在<head>注入代码 |
| Google Map | 配置Google Maps API Key |
| Status Colors | 修改状态反馈颜色 |
| Grays | 灰度色系调整 |
Google Maps配置：
1. 登录Google账号
2. 启用 Maps Static API、Maps JavaScript API、Places API
3. ⚠️ 不要启用 Places API (New)，Odoo暂不支持
4. 创建API Key → 复制
5. 在Odoo中粘贴 → 点击 Save
四、元素（Elements）：网站的 "细胞" ——标题、按钮、图片、视频、动画
添加元素的方法：
1. 打开页面 → 点击 Edit
2. 点击页面中要添加元素的位置
3. 直接输入或选择元素
4. 点击 Save
标题（Titles）
- 输入 /title
- 选择标题样式：Heading 1、Heading 2、Heading 3
- 输入文字
> 替代方法：输入文字 → 选中 → 在 Inline Text 区域选择样式。
按钮（Buttons）
- 输入 /button
- 填写：
- Link Label：按钮文字
- URL/Email：链接地址（输入 / 搜索页面，# 链接锚点）
- Style、Size、Layout：外观设置
- 勾选 在新标签页打开
- 点击 Apply
> 修改现有按钮：点击按钮 → Inline text 区域编辑。
图片（Images）
- 输入 /image
- 搜索 Unsplash 图库 或 点击 Upload an image 上传本地图片
- 点击 Add
图片定制选项：
| 选项 | 说明 |
|---|---|
| Replace | 替换图片 |
| Description | Alt标签（SEO必需） |
| Tooltip | 悬停提示文字 |
| Shape | 图片形状（部分可自定义颜色） |
| Width | 调整宽度（优化性能） |
| Transform | 调整大小 |
| Padding | 图片周围间距 |
视频（Videos）
- 输入 /video
- 插入URL
- 选项：
- Autoplay：自动播放（默认静音）
- Loop：循环播放
- Hide player controls：隐藏播放控件
- Hide fullscreen button：隐藏全屏按钮
- Start at：指定开始时间（MM:SS格式）
图标（Icons）
- 输入 /image → 切换到 Icons 标签
- 选择图标 → 点击 Add
- 定制：颜色、大小、动画、形状
链接（Links）
- 输入 /link
- 填写 Label 和 URL/Email
- 输入 / 搜索页面，# 链接锚点
- 选择 Style（Link或Button）
列表（Lists）
- 输入 /list
- 选择类型：
- Bulleted list（无序列表）
- Numbered lists（有序列表）
- Checklists（勾选列表）
文字高亮（Text Highlights）
- 选中文字或标题
- 在 Inline Text 区域点击 Highlight
- 选择高亮样式
- 修改 Color 和 Thickness
动画（Animations）
三种动画类型：
| 类型 | 适用对象 | 触发方式 |
|---|---|---|
| On Scroll | 建筑块、元素 | 滚动时进入/离开屏幕 |
| On Appearance | 建筑块、元素 | 首次出现/每次出现 |
| On Hover | 图片 | 鼠标悬停 |
On Scroll配置：
- In/Out：进入/离开屏幕时触发
- Effect：动画效果
- Direction：方向
- Intensity：强度
- Scroll Zone：滚动区域百分比（起始→结束）
On Appearance配置：
- Effect：动画效果
- Direction：方向
- Trigger：First Time only / Every Time
- Intensity：强度
- Start After：延迟秒数
- Duration：持续时间
On Hover配置（仅图片）：
- Effect：效果
- Color：颜色
- Stroke Width：描边宽度
五、可见性（Visibility）：智能控制 "谁能看到什么"
设备类型可见性
- 选中块 → Customize 标签 → Visibility
- 🖥️（桌面图标）：点击切换电脑端显示/隐藏
- 📱（手机图标）：点击切换移动端显示/隐藏
> 元素级可见性：选中块内元素 → 查看是否有Visibility选项，可单独隐藏。
条件可见性（Conditions）
- 选中块 → Visibility → 点击 No condition → 选择 Conditionally
| 条件类型 | 说明 | 示例 |
|---|---|---|
| Country | 访客IP所在国家 | 比利时IP才显示 |
| Languages | 网站语言 | 法语版本才显示 |
| UTM Campaign | 营销活动 | Sales活动追踪链接 |
| UTM Medium | 营销媒介 | 邮件/社交媒体 |
| UTM Source | 营销来源 | Google/百度 |
| Users | 登录状态 | 已登录/未登录/所有人 |
配置方法：
- 选择 Visible for（显示）或 Hidden for（隐藏）
- 点击 Choose a record… 选择具体条件
- 可添加多个条件
- 点击 ➖ 移除条件
实战示例：
> 一个块配置为：Country=Visible for Belgium + Languages=Visible for French + UTM Campaign=Hidden for Sales → 只有比利时IP、法语版本、非Sales campaign的访客才能看到。
不可见元素列表
- 设置了自定义可见性的块/元素，列在编辑器侧边栏底部 Invisible Elements
- 点击 👁️（可见） 隐藏块
- 点击 🙈（隐藏） 显示块
- 方便预览不同条件下的页面效果
六、总结：四大法宝，让网页设计从 "专业活" 变成 "人人会"
| 法宝 | 核心能力 | 最佳实践 |
|---|---|---|
| Building Blocks | 拖拽搭建、表单收集、代码嵌入、自定义保存 | 先搭骨架（Categories），再填内容（Inner Content） |
| General Theme | 颜色、字体、样式、背景全站统一 | 先选配色方案，再微调个别颜色 |
| Elements | 标题、按钮、图片、视频、动画、列表 | 用/命令快速插入，Inline Text精细调整 |
| Visibility | 设备、国家、语言、UTM、登录状态 | 为不同受众定制内容，提升转化率 |
记住：最好的网页设计不是 "花大价钱请设计师" ，而是 "自己能随时修改、随时优化" 。 Odoo 19的Web Design四大法宝，就是让你从 "设计小白" 秒变 "建站大神" 的终极武器！