元素

元素有助于有效地构建和呈现内容。它们既包括 标题、 列表 和 文本高亮 等基于文本的组件,也包括 按钮 和 链接 等交互式组件。您还可以添加 图片、 图标、 视频 和 动画 等视觉元素,以改善内容的呈现和组织。

要添加或修改网站元素:

  1. 导航到相关网站页面,然后点击 编辑。

  2. 在页面上点击要添加或修改元素的区域。

  3. 进行必要的更改。

  4. 点击 保存。

Note

例如,标题、按钮、链接和段落文本的默认样式定义在网站编辑器的 主题选项卡 中。

键入 / 以添加网站元素。

标题

标题用于定义各级标题,并将网站内容组织成不同层级,使其更清晰、更有条理。要插入标题,请键入 /title,选择标题样式 标题 1、 标题 2 或 标题 3,然后输入文本。

Tip

或者,键入文本并选中它,然后在网站编辑器的 自定义 选项卡的 内联文本 部分中选择合适的样式。此部分还提供字体和颜色等其他格式设置选项。

按钮

按钮是交互式元素,可链接到其他页面或页面锚点。要插入按钮:

  1. 键入 /button。

  2. 在 链接标签 字段中输入按钮的标签。

  3. 添加 URL 或电子邮件。键入 / 可搜索页面,键入 # 可链接到锚点。

  4. 设置 样式、 大小 和 布局,以定义按钮的外观。

  5. 如有需要,请切换开关,以在新选项卡中打开所链接的页面或锚点。

  6. 点击 应用 以保存更改。

Tip

要修改现有按钮,请点击该按钮,并编辑网站编辑器 内联文本 部分中的选项。

图像

要插入图片:

  1. 键入 /image。

  2. 搜索 Unsplash 数据库 或点击 上传图片,从本地图片中选择文件。

  3. 点击 添加。

  4. 要自定义图片,请点击图片,并编辑网站编辑器 图片 部分中的选项。例如:

    • 替换 图片。

    • 在 描述 字段中定义 alt 标签。

    • 在 提示框 字段中输入标题标签。当访客将鼠标悬停在图片上时,将显示此文本。

    • 添加 形状;某些形状还允许自定义颜色。

    • 调整图片的 宽度,例如以提升性能。如果较小的尺寸足以显示,系统可能会建议使用更小的尺寸。

    • 使用 变换 工具调整图片大小。

    • 调整 内边距,在图片周围添加空间(以像素为单位)。

    • 等等。

视频

要添加视频,请键入 /video,插入 URL,然后开启所需的选项:

  • 自动播放:访问页面时自动播放视频。默认情况下,视频会自动静音。

  • 循环:循环播放视频。

  • 隐藏播放器控件

  • 隐藏全屏按钮

图标

要插入图标,请键入 /image,转到 图标 选项卡,选择一个图标,然后点击 添加。要修改图标,请点击该图标,并使用网站编辑器的 图标 部分自定义选项,例如 颜色、 大小、 动画、 形状 等。

列表

列表有助于清晰地组织内容,使信息更易阅读,并改善网页的结构。键入 /list,然后从三种列表类型中选择:项目符号列表、 编号列表 或 清单。

文本高亮

您可以在网站编辑器的 内联文本 部分为标题和文本添加高亮。要添加高亮:

  1. 选择要高亮的文本或标题。

  2. 在网站编辑器中,点击 高亮。

  3. 选择高亮样式。

  4. 修改其 颜色。

  5. 选择其 粗细。

高亮文本和标题

动画

动画用于为 构建块 以及图片和文本等网站元素添加动态效果。共有三种动画类型:滚动时、 出现时 和 悬停时 (仅适用于图片)。

要为网站元素添加动画:

  1. 点击该元素。

  2. 在网站编辑器中,转到该元素对应的部分(例如 按钮、 列、 内联文本 等)。

  3. 在 动画 字段中,选择所需的动画类型。

  4. 根据需要自定义动画设置。可用选项因所选的动画类型而异。

滚动时的动画

对于滚动时的动画,您可以:

  • 选择 进入,在元素进入屏幕时添加动画;选择 离开,在元素离开屏幕时添加动画。

  • 选择一个 效果。

  • 选择效果的 方向。

  • 调整效果的 强度。

  • 定义 滚动区,其中第一个值表示效果开始时屏幕显示的百分比,第二个值表示效果结束时的百分比。

出现时的动画

对于出现时的动画,您可以:

  • 在不同的效果中进行选择。

  • 选择效果的 方向。

  • 选择 触发方式 选项以定义动画何时发生: 仅首次 或 每次。

  • 调整效果的 强度。

  • 如果您希望动画在若干秒后触发,请在 开始于 字段中定义该秒数。

  • 为动画选择 持续时间。

悬停时的动画(仅适用于图片)

可以为 图片 添加 悬停时 动画。您可以选择动画的 效果,以及 颜色 和 描边宽度。

更多内容

Odoo HTML 编辑器