# 由真实区块组成的页眉与页脚构建器 URL: https://canvaswp.com/zh-hans/header-builder/ Updated: 2026-11-03 页眉构建器 页眉、页脚、顶栏、超级菜单、侧边面板、页面标题和 Hero 区块都是您在区块编辑器中设计的记录，然后可将其应用于整个站点或单个页面。 [在演示站点中查看](https://canvaswp.com/zh-hans/demos/) [编辑器的工作方式](https://canvaswp.com/zh-hans/editor/) 更新于 2026年11月3日 页眉的构建方法 ## 区块的嵌套方式符合预期 一条页眉记录包含一个 Header Root。Header Root 包含一个 Container，Container 包含多个 Zone。Zone 是页眉行中的一个单元格：第一个放置 Logo，下一个放置菜单，最后一个放置搜索图标和购物车。 ### 区域负责布局 区域决定各个元素的位置。可以将某个区域推到右侧，把搜索和购物车归入同一组，或者在不需要额外标记时保留一个普通区域。 - 区域会按断点重新排序，因此一条记录即可同时覆盖桌面、平板和手机 - 任一区域都可以限定于某个设备层级，并且不会出现在其他层级的标记中。 - 为区域添加额外的 CSS 类，方便您在自己的 CSS 中调用 [区块库中的所有区块](https://canvaswp.com/zh-hans/blocks/) ### 共 22 个页眉区块 #### Header Root 页眉本身。其他所有内容都嵌套在其中。 #### Header Container 宽度容器，让页眉可以在不同断点下呈现为框式、全宽或两者结合。 #### Header Zone 页眉行中的一个单元格。区域用于放置各个组件，并决定它们的位置。 #### Header Logo Logo 可分别提供吸顶与深色状态的文件。 #### Header Navigation 主菜单，包含下拉菜单和超级菜单面板。 #### 页眉搜索 点击后展开输入框的搜索图标，或始终显示的搜索框。 #### Header Cart 带有商品数量和下拉摘要的 WooCommerce 购物车。 #### Header Social 一排社交图标，来自您只需设置一次的个人资料。 #### Header Button 带有常用尺寸、样式和链接设置的行动号召按钮。 #### Header Icon Link 一个可链接到任意位置的图标，可用于电话号码或账户页面。 #### Header Info 用于展示联系方式、地址或营业时间的小型区块。 #### Header Shop Search 面向店铺的商品搜索，范围限定在您的商品目录内。 #### Header Topbar 在页眉行上方放置一条顶栏记录。 #### Mega Menu Column 超级菜单面板中的一列，使面板能够容纳真正的布局。 布局预设 ## 7 个可直接套用的预设 预设是一组可一键应用的布局设置。选择所需的行为，然后可在区块设置中调整任意选项。 ### 透明 无背景，因此页眉后方的内容会透过页眉显示。 ### 半透明 半透明背景，让身后的图片保持可见，同时文字依然清晰易读。 ### 浮动 页眉悬浮于页面内，四周各边都留有空白。 ### 浮动半透明 支持浮动显示，同时可设置半透明背景。 ### 小巧悬浮 高度缩减后的悬浮页眉。 ### 全宽吸顶 横跨视口的整个宽度，并在页面滚动时保持固定。 ### 向上滚动时吸顶 页眉向下滚动时离开屏幕顶部，向上滚动时重新出现。 可复用组件 ## 顶部栏、超级菜单和侧边面板同样是记录 设计好每个页眉后，将其设为站点默认值，再在需要其他样式的页面上单独覆盖即可。 ### 顶部栏 顶部栏是一个独立的记录，包含自己的区块：电话号码、营业时间、语言切换器和促销信息。Header Topbar 区块会将其放置在页眉行上方。可全局指定，也可按页面单独覆盖。 88 个演示站点中有 12 个内置了可编辑的顶部栏。 ### 超级菜单 超级菜单是一条您以区块形式设计、并通过超级菜单区块呈现的记录。菜单项随后会打开一个全宽面板，其中可放置列、图片、按钮或其他任意区块。 Mega Menu Column keeps the panel on a grid. 5 demos ship one. ### 侧边面板 侧边面板是一条从屏幕边缘滑入的记录，用于显示次级菜单、购物车、联系表单或一组可能会让页眉显得拥挤的详细信息。 6 个演示站点随附已连接触发器的侧边面板。 指定一条记录即是设置一个字段：选择默认侧边面板、它从哪一侧边缘弹出、是推动页面还是浮在页面上方，以及触发器的样式。顶部栏、超级菜单和页脚的指定方式相同。 页眉选项 ## 94 个字段，是主题选项中最大的部分 主题选项包含全站页眉设置，这些设置不应只属于某一条记录。导入演示站点时会为您设置全部选项，您可以更改其中您关心的部分。 - 在 533 个主题选项字段中，有 94 个属于页眉 - 设置默认页眉记录，然后可在任意页面上单独覆盖 - 吸顶行为、高度、间距与移动端断点 - 所有字段均在参考文章中有说明 [全部 533 项主题选项](https://canvaswp.com/zh-hans/features/#options) **主题选项，页眉。**面板本身，截图取自一个正在运行的站点。 模式 ## 可用于起步的 40 个页眉模式 插入模式后，您得到的是可以自由调整顺序、重命名或删除的普通区块。没有任何内容被锁定，也不是您无法使用的布局截图。 - 40 个页眉图案，多于任何其他类别 - 16 个页脚模式，用于页面的另一端 - 共 183 个图案，分为 17 个类别 - 从您已在使用的插入器中的“模式”标签页插入 [按类别划分的图案](https://canvaswp.com/zh-hans/editor/#patterns) 页脚构建器 ## 页脚与版权栏是各自独立的记录 页脚的运作方式与页眉完全相同。页脚记录用于存放各列内容，版权记录用于存放其下方的细栏信息，因此您可以在全站修改法律声明，而无需改动上方的设计。 ### 六个区块和 17 个选项 Footer About for the company blurb, Footer Contacts for the address and phone, Footer Instagram for a feed, Footer Widget Area for anything a widget can do, Widget Links for a tidy column of links, and Copyrights for the bottom bar. - 与页眉一样，可以全站或按页面指定页脚 - 为下方的栏单独设置一条版权记录 - 16 个可供起步的页脚图案 - 在编辑画布中实时预览页面的搭建效果 **主题选项，页脚。**17 个全站字段，支撑着页脚记录。 页面标题 ## 4 种样式，或自行设计 页眉下方的区域本身就是一个设计界面，背后提供 57 个选项，并可在您发布的每个页面上单独覆盖设置。 **主题选项、页面标题。**共 57 个字段，是产品中第三大的部分。 ### 默认、迷你、模板或自定义 Default 为标准样式。Mini 是适用于内页的紧凑版本。Template 从预设的专用布局中选择一种。Custom 会渲染您用区块自行构建的页面标题。 - 页面标题、标题、副标题、面包屑和按钮区块 - 全站默认设置，可被任一单独页面覆盖 - 背景、高度、对齐方式和面包屑导航都可以设置 [功能列表中的页面标题](https://canvaswp.com/zh-hans/features/#page-titles) 首屏横幅与滑块 ## 由插槽区块放置在模板中 Hero 和滑块与页眉一样，都是独立的记录。插槽区块位于区块模板中，会调取分配给当前所浏览页面的 Hero 或滑块。 - Hero 记录与 Slider 记录，均由区块构建 - Hero Slot 和 Slider Slot 区块位于模板中，而非您的内容中 - 所有页面共用一个模板，每页各有自己的开场内容 - 88 个演示站点中有 12 个附带可编辑的滑块 [首屏横幅与滑块](https://canvaswp.com/zh-hans/features/#heroes) 在编辑器中 ## 在所见之处构建页眉 插槽区块将页眉、顶部栏、页面标题、首屏区域和页脚投射到编辑画布中，使页面打开时呈现的就是最终效果，而不是一堆段落文本。 区块编辑器中的一个页面，页眉和页脚围绕内容显示，渲染它们的代码与访客所见的完全相同。 ### 单一渲染器 您在画布中看到的页眉，与访客看到的页眉由同一段代码绘制，因此无需另行维护一个预览来保证其准确性。 ### 全局或按页面设置 为站点设置默认的页眉、顶部栏、页面标题、首屏区域和页脚，然后可在单个页面的设置中覆盖其中任一项。 ### 原生响应式设计 区域可按断点重新排序，也可限定为特定设备层级，因此您可以在编辑器中先检查手机端布局，再让其他人看到它。 [编辑器能做的一切](https://canvaswp.com/zh-hans/editor/) 常见问题 ## 关于页眉构建器 其余问题的答案可在 [完整常见问题](https://canvaswp.com/zh-hans/faq/)和 [文档](https://docs.canvaswp.com/how-to-build-a-header)中找到。 **移动端需要单独的页眉吗？** 单个 Canvas 页眉通常也适用于移动端，因为各区域会按断点重新排序，且每个区域都可以限定为特定设备级别。同一条页眉记录可以在手机上将 logo 居中、隐藏联系方式，并将菜单收入切换按钮之后。只有在确实需要不同设计时才应新建第二条记录，而不是为了修复布局。 **一个页面可以使用不同的页眉吗？** 是的，每个 Canvas 页眉、顶栏、页面标题和页脚都有全站默认设置和单页覆盖设置，因此落地页可以使用透明页眉和仅显示 Logo 的顶栏，而站点其他页面保留各自的设置。 **页眉是小工具区域还是菜单？** Canvas 页眉两者都不是：它是您在区块编辑器中编辑的记录，与页面完全相同。其中的导航、徽标、搜索、购物车和按钮都是各自带有设置面板的区块。 **许可证过期后，我的页眉会怎样？** 当 Canvas 许可证到期时，您的页眉和网站其余部分将保持与当前一致的渲染效果。暂停的是服务：更新、演示导入、CanvasAI Engine 以及高级区块编辑将在您续订前停止。如果许可证检查无法连接到我们的服务器，还有 14 天的宽限期。 **我还能使用站点编辑器吗？** 是的，Canvas 基于真正的区块模板构建，因此模板和模板部件仍保存在 WordPress 的原有位置，页眉记录则由区块放入模板中。[了解编辑器的工作方式](https://canvaswp.com/zh-hans/editor/)。