一、元素是什么？为什么它们是网站的 "细胞" ？
想象一下这个场景：
你打开一个网站，看到一段精美的标题、一个醒目的按钮、一张吸引人的图片、一段自动播放的视频——这些就是 元素（Elements），它们是构成网页的 "细胞" 。没有元素，网页就是一片空白；有了元素，网页才能 "活" 起来，才能吸引访客、传递信息、促成转化。
Odoo 19 的网站编辑器，让你无需写代码，就能像搭积木一样添加和定制各种元素。从文字标题到互动按钮，从高清图片到动态视频，从简洁列表到炫酷动画——应有尽有。
Odoo 19 支持的九大元素类型：
| 元素类型 | 类别 | 核心作用 |
|---|
| Titles（标题） | 文本 | 组织内容结构，引导阅读 |
| Buttons（按钮） | 交互 | 引导行动，链接跳转 |
| Images（图片） | 视觉 | 吸引注意，传递信息 |
| Videos（视频） | 视觉 | 动态展示，提升 engagement |
| Icons（图标） | 视觉 | 简洁表达，增强识别 |
| Links（链接） | 交互 | 连接页面，改善导航 |
| Lists（列表） | 文本 | 组织信息，提升可读性 |
| Text Highlights（文字高亮） | 文本 | 强调重点，增加视觉层次 |
| Animations（动画） | 动态 | 增加活力，吸引注意力 |
二、添加和修改元素：四步搞定
通用操作步骤
1. 打开页面 → 点击 Edit 进入编辑模式
2. 点击页面区域 → 定位到要添加或修改元素的位置
3. 添加或修改 → 使用 `/` 命令或直接点击
4. 点击 Save → 保存更改
> 提示：标题、按钮、链接、段落等默认样式在 Theme 标签页中定义。先调好主题，再调元素，效率更高。
三、标题（Titles）：内容的 "骨架"
标题定义网页的层级结构，让内容清晰易读。
添加标题
- 输入 `/title`
- 选择标题样式：Heading 1、Heading 2 或 Heading 3
- 输入文字
替代方法
- 输入文字 → 选中 → 在 Customize 标签的 Inline Text 区域选择样式
- 额外格式选项：字体、颜色等
标题层级建议：
| 层级 | 用途 | SEO权重 |
|---|
| Heading 1 (H1) | 页面主标题，每页只有一个 | 最高 |
| Heading 2 (H2) | 主要章节标题 | 高 |
| Heading 3 (H3) | 小节标题 | 中 |
> SEO提示：合理使用标题层级，有助于搜索引擎理解页面结构，提升排名。
四、按钮（Buttons）：引导行动的 "指挥棒"
按钮是网页最重要的交互元素—— "点击这里" 、"立即购买" 、"了解更多" 都靠它。
添加按钮
1. 输入 `/button`
2. 填写 Link Label（按钮文字）
3. 添加 URL 或 Email：
- 输入 `/` 搜索页面
- 输入 `#` 链接到锚点
4. 设置 Style、Size、Layout（外观）
5. 勾选 在新标签页打开（如需）
6. 点击 Apply
修改现有按钮
- 点击按钮 → 在 Inline text 区域编辑选项
按钮样式选项：
| 选项 | 说明 |
|---|
| Style | 按钮外观风格 |
| Size | 按钮大小 |
| Layout | 布局方式 |
| URL/Email | 跳转目标 |
| New Tab | 是否新窗口打开 |
> 小技巧：默认 Style 是 Link（链接样式），选择其他样式可将链接变成按钮外观。
五、图片（Images）：一图胜千言
添加图片
1. 输入 `/image`
2. 搜索 Unsplash 图库 或 点击 Upload an image 上传本地图片
3. 点击 Add
图片定制选项
| 选项 | 说明 | SEO/实用价值 |
|---|
| Replace | 替换图片 | 快速更新 |
| Description | Alt标签 | ⭐ SEO必需！搜索引擎靠它理解图片内容 |
| Tooltip | 标题标签 | 鼠标悬停时显示的文字 |
| Shape | 图片形状 | 部分形状支持颜色定制 |
| Width | 调整宽度 | 优化加载性能，系统会建议合适尺寸 |
| Transform | 调整大小 | 裁剪、缩放 |
| Padding | 图片周围间距 | 像素单位 |
> ⚠️ SEO重点：务必填写 Description（Alt标签）！这是图片SEO的核心，也是无障碍访问的必备。
六、视频（Videos）：让页面 "动" 起来
添加视频
- 输入 `/video`
- 插入视频 URL
- 开启所需选项
视频选项
| 选项 | 说明 |
|---|
| Autoplay | 自动播放（默认静音） |
| Loop | 循环播放 |
| Hide player controls | 隐藏播放控件 |
| Hide fullscreen button | 隐藏全屏按钮 |
| Start at | 指定开始时间（MM:SS格式） |
> 实战技巧：首屏背景视频用 Autoplay + Muted + Loop，营造氛围又不打扰用户。
七、图标（Icons）：简洁的视觉语言
添加图标
- 输入 `/image` → 切换到 Icons 标签
- 选择图标 → 点击 Add
图标定制
- 点击图标 → Icon 区域定制：
- Color：颜色
- Size：大小
- Animations：动画效果
- Shape：形状
> 图标是UI设计的 "速记符号" ——电话图标代表联系方式，购物车图标代表购买，一目了然。
八、链接（Links）：网站的 "血管"
链接连接不同页面和资源，引导访客浏览。
添加链接
- 输入 `/link`
- 填写 Label（链接文字）
- 添加 URL 或 Email：
- `/` 搜索页面
- `#` 链接锚点
链接变按钮
- 默认 Style = Link
- 选择其他样式 → 链接变成按钮外观
> 内部链接用 `/` 搜索，确保链接不会失效；外部链接建议在新标签页打开。
九、列表（Lists）：让信息 "井井有条"
列表帮助组织内容，提升可读性。
添加列表
- 输入 `/list`
- 选择类型：
| 类型 | 用途 | 示例 |
|---|
| Bulleted lists | 无序列表 | 产品特性、服务优势 |
| Numbered lists | 有序列表 | 操作步骤、排名 |
| Checklists | 勾选列表 | 功能清单、待办事项 |
十、文字高亮（Text Highlights）：让重点 "跳" 出来
添加高亮
1. 选中要高亮的文字或标题
2. 在网站编辑器中点击 Highlight
3. 选择 高亮样式
4. 修改 Color（颜色）
5. 选择 Thickness（粗细）
> 高亮效果：在文字上下添加彩色线条，让重点内容在视觉上 "跳" 出来，吸引读者注意。
十一、动画（Animations）：让网站 "活" 起来的秘密武器
三种动画类型，为不同元素增添活力：
| 动画类型 | 适用对象 | 触发时机 |
|---|
| On Scroll | 建筑块、元素 | 滚动时进入/离开屏幕 |
| On Appearance | 建筑块、元素 | 元素首次/每次出现 |
| On Hover | 图片 | 鼠标悬停 |
滚动动画（On Scroll）
| 配置项 | 说明 |
|---|
| In / Out | 进入屏幕时 / 离开屏幕时触发 |
| Effect | 动画效果 |
| Direction | 效果方向 |
| Intensity | 效果强度 |
| Scroll Zone | 滚动区域（起始百分比 → 结束百分比） |
> 示例：设置 Scroll Zone 为 20%-80%，表示元素进入屏幕20%时开始动画，到达80%时完成。
出现动画（On Appearance）
| 配置项 | 说明 |
|---|
| Effect | 动画效果 |
| Direction | 效果方向 |
| Trigger | First Time only（仅首次）/ Every Time（每次） |
| Intensity | 效果强度 |
| Start After | 延迟秒数 |
| Duration | 动画持续时间 |
> 建议：首屏元素用 First Time only，避免用户反复滚动时重复动画导致烦躁。
悬停动画（On Hover）——仅图片
| 配置项 | 说明 |
|---|
| Effect | 动画效果 |
| Color | 效果颜色 |
| Stroke Width | 描边宽度 |
> 实战场景：产品图片悬停时放大或变色，提示用户 "这是可点击的" 。
十二、总结：九大元素，打造视觉盛宴的 "调色盘"
| 元素 | 核心功能 | 最佳实践 |
|---|
| Titles | 内容层级、SEO结构 | H1每页一个，层级递进 |
| Buttons | 行动引导、页面跳转 | 文字明确，颜色醒目 |
| Images | 视觉吸引、信息传递 | Alt标签必填，宽度优化 |
| Videos | 动态展示、氛围营造 | 首屏视频静音自动播放 |
| Icons | 简洁表达、快速识别 | 风格统一，大小一致 |
| Links | 页面连接、导航改善 | 内部链接用搜索，外部链接新窗口 |
| Lists | 信息组织、提升可读性 | 特性用Bullet，步骤用Number |
| Text Highlights | 重点强调、视觉层次 | 适度使用，避免过度 |
| Animations | 增加活力、吸引注意 | subtle（ subtle）为佳，避免花哨 |
记住：最好的网页不是 "元素越多越好" ，而是 "每个元素都有存在的理由" 。
Odoo 19的元素系统，就是让你像画家调色一样，精准搭配每一个元素，打造既美观又高效的网页体验！
Odoo 19的元素系统，就是让你像画家调色一样，精准搭配每一个元素，打造既美观又高效的网页体验！