作者： /

[TITLE]
网站页眉页脚设计与编辑指南

[DESCRIPTION]
本文详细介绍了在 Odoo 网站编辑器中如何自定义页眉和页脚，包括模板选择、背景、边框、圆角、阴影、滚动效果、位置设置以及元素显示隐藏；还讲解了菜单编辑、添加普通和 Mega 菜单、菜单项设计、动态菜单隐藏等操作，帮助提升用户体验和 SEO 效果。

[KEYWORDS]
网站页眉, 网站页脚, 设计, 编辑, 菜单, Mega菜单, 响应式, SEO, Odoo, 开发者模式

[TRANSLATED_CONTENT]

头部和页脚

网站页眉是网页的顶部区域，通常包含徽标、菜单 <website/header_footer/header-content>、搜索栏、登录/客户账户按钮等元素。
页脚显示在网页底部，通常包含联系信息、链接、法律声明及其他选项。

页眉设计 {#website/header_footer/header-design}

要修改页眉的设计，点击 编辑，然后点击页眉。在网站编辑器的 自定义 选项卡的 页眉 部分，可使用以下选项：

  • 从下拉菜单中 选择模板。
  • 选择 背景 设置，通过不同的 主题样式 <website/themes/theme-colors>、自定义 颜色或 渐变 颜色来更改配色方案。
  • 为页眉添加 边框 时，可定义其大小、样式和颜色。
  • 调整 圆角 以匹配设计。
  • 添加 阴影 并设定其 颜色、偏移、模糊、扩散。
  • 添加 滚动效果，将鼠标悬停在效果上可预览。
  • 在 页眉位置 中选择 常规、隐藏 或 覆盖内容。选择 覆盖内容 时，可自定义 背景 和 文字颜色。
  • 显示或隐藏 元素，如文字、搜索栏、登录 按钮、社交媒体链接、联系我们 按钮以及徽标。

完成修改后，点击 保存。

:::: tip
::: title
提示
:::

要隐藏页眉，点击 编辑 → 点击页眉 → 进入网站编辑器的 主题 选项卡，向下滚动至 高级 部分，切换 显示页眉 开关即可隐藏/显示页眉。
::::

页眉内容 {#website/header_footer/header-content}

菜单组织页眉内容，帮助用户有效浏览网页。友好且结构良好的菜单还能提升 搜索引擎排名 <seo>。

菜单编辑器 {#website/header_footer/menu-editor}

菜单编辑器用于编辑网站页眉并添加 菜单项 <website/header_footer/menu-items> 与 Mega 菜单 <website/header_footer/mega-menus>。

编辑页眉内容的步骤：

  1. 前往 网站 → 站点 → 菜单编辑器。
  2. 在编辑器中：
    • 重命名 菜单项或使用 编辑菜单项 图标更改其 URL；
    • 使用 删除菜单项 图标 删除 菜单项；
    • 通过拖拽 移动 菜单项到所需位置；
    • 通过将子菜单项拖到父项右侧下方，创建普通下拉菜单。

:::: note
::: title
注意
:::

也可在 编辑 模式下点击任意菜单项，然后点击 编辑菜单 图标进入编辑器。


::::

添加菜单项 {#website/header_footer/menu-items}

默认情况下，页面创建后会作为下拉菜单项加入菜单。添加新菜单项的步骤：

  1. 前往 网站 → 站点 → 菜单编辑器。
  2. 点击 添加菜单项。
  3. 在弹窗中输入要在菜单中显示的 名称。
  4. 在 URL 或 Email 字段输入 / 以搜索站内页面，或 # 以搜索已有自定义锚点。
  5. 点击 确定。
  6. 如有需要，编辑 菜单结构 <website/header_footer/menu-editor>，然后 保存。

菜单项设计

要修改菜单项，点击 编辑 → 点击相应菜单项 → 在网站编辑器的 导航栏 部分进行设置：

  • 调整 移动端对齐。
  • 选择 字体。
  • 在 格式 中更改字体大小、颜色和对齐方式。
  • 选择 链接样式 以突出当前页面。
  • 更改 页眉按钮样式 <website/themes/button-styles>。
  • 设定子菜单的显示方式为 悬停时 或 点击时。

:::: note
::: title
注意
:::

导航栏 部分的可用字段可能因所选模板而异。
::::

完成后点击 保存。

Mega 菜单 {#website/header_footer/mega-menus}

Mega 菜单类似于下拉菜单，但会在一个面板中以分组方式展示大量子项，适用于内容丰富或 电商网站 <../../ecommerce>，可一次性呈现所有页面或 电商分类 <ecommerce/categories_variants/categories>。

创建 Mega 菜单的步骤：

  1. 前往 网站 → 站点 → 菜单编辑器，点击 添加 Mega 菜单项。
  2. 在弹窗中输入 Mega 菜单的 名称，点击 确定，随后 保存。

要编辑 Mega 菜单的选项和内容：

  • 点击页眉中的 Mega 菜单项，然后点击 编辑。
  • 每个构建块都可单独定制，例如直接编辑文本、修改链接（在预览弹窗中点击 编辑链接），或通过拖拽移动、删除块。

在网站编辑器的 自定义 选项卡的 Mega 菜单 部分，可整体调整布局：

  • 选择 模板。
  • 设定 大小 为 全宽 或 窄幅。

完成后点击 保存。

为未登录用户隐藏动态菜单项

若要对未登录用户隐藏系统自动生成的动态菜单项（如安装某应用后出现的 活动、课程 等），操作如下：

  1. 启用开发者模式 <developer-mode>。
  2. 前往 网站 → 配置 → 菜单。
  3. 如有必要，展开对应站点的菜单列表，点击要隐藏的菜单项。
  4. 在 可见组 部分，点击 添加一行 → 组名。
  5. 搜索 用户类型 / 门户，选择后点击 选择。
  6. 保存。

:::: tip
::: title
提示
:::

要隐藏 [商店] 菜单项，可 限制电商访问仅限登录用户 <../../ecommerce/customer_accounts>。
::::

页脚设计 {#website/header_footer/footer-design}

要修改页脚，点击 编辑 → 点击页脚 → 在网站编辑器的 自定义 选项卡的 页脚 部分进行设置：

  • 选择 模板。
  • 设定 颜色。
  • 选择 滑出效果：常规（无效果）、悬停滑出 或 阴影。
  • 切换 版权 开关以隐藏或显示版权信息。
  • 设定 边框 大小。
  • 添加 阴影。
  • 添加 返回顶部按钮 并设定其位置。
  • 通过切换 页面可见性 开关来隐藏或显示页脚。

完成后点击 保存。

[SUMMARY]

网站页眉页脚设计指南

页眉设计

  • 选择模板
  • 背景设置（主题样式、自定义颜色、渐变）
  • 边框（大小、样式、颜色）
  • 圆角
  • 阴影（颜色、偏移、模糊、扩散）
  • 滚动效果预览
  • 页眉位置：常规 / 隐藏 / 覆盖内容（可自定义背景和文字颜色）
  • 元素显示控制：文字、搜索栏、登录按钮、社交链接、联系我们按钮、徽标

页眉内容

菜单编辑器

  • 重命名、删除、移动菜单项
  • 创建普通下拉菜单（拖拽子项）

添加菜单项

  • 打开菜单编辑器 → 添加 → 输入名称 → 设置 URL/锚点 → 保存

菜单项设计

  • 移动端对齐、字体、大小、颜色、对齐方式
  • 链接样式、按钮样式、子菜单显示方式（悬停/点击）

Mega 菜单

  • 创建 Mega 菜单项 → 编辑构建块（文本、链接、拖拽、删除）
  • 整体布局：模板、宽度（全宽/窄幅）

隐藏动态菜单项

  • 开启开发者模式 → 网站 → 配置 → 菜单 → 设置可见组（仅限登录用户）

页脚设计

  • 选择模板、颜色、滑出效果
  • 版权开关
  • 边框、阴影
  • 返回顶部按钮位置
  • 页面可见性开关
滚动至顶部