页首与页尾

概述

页首（Header）是网站最上方（或电脑版左侧）的导航栏，帮助访客识别品牌、切换页面及点击主要行动按钮；页尾（Footer）则是网站最底部的收尾区，集中呈现品牌简介、多栏导航、联系方式、社交图标与法律条款链接。

• 如何开启编辑：直接在编辑预览画布点击页首或页尾，或从顶部工具栏开启“版面”点击列表最上方的“页首”、最下方的“页尾”（修改时皆会即时预览并自动保存进草稿，确认后按右上角“发布”更新公开网站）。
• 全站共用：页首与页尾默认为全站共用，修改一次即会同步套用到所有一般页面（多链接工具页不挂页首与页尾）。

设计页首（Header）

1. 显示品牌信息与标志设置

在页首表单的“基本信息”区块，您可以自由组合左上角要显示的品牌识别：

• 显示品牌信息（多选胶囊）：可分别勾选或同时开启“品牌标志”与“网站名称”：
  • 同时勾选时，顶部页首会将标志与网站名称左右并排显示；若选用“左侧栏”版型，网站名称则会自动排在标志正下方独立一行。
  • 若两者皆取消勾选，品牌位置将完全留白；若只勾选“品牌标志”但网站尚未上传任何 Logo，系统会自动显示网站名称文字代替。
• 品牌标志来源与大小：
  • 使用品牌标志（默认）：直接沿用您在设置的全站 Logo（支持浅色与深色模式各自对应）。
  • 为页首另外指定：若页首想放专属的横式文字标志，可改选此项单独上传图片或挑选图标。
  • 标志大小：提供“小、中（默认）、大”三段尺寸切换。

2. 依设备（电脑／平板／手机）设置品牌关联网址

一般电脑版顶部导航栏通常保持精简、不放一整排社交图标，但在手机与平板点开汉堡菜单时，放入社交图标则非常方便访客追踪。因此，页首的“显示品牌关联网址”支持依电脑、平板、手机三种设备独立设置：

1. 先在填好您的社交平台链接（或点字段旁的“前往设置”直接打开面板）。
2. 在页首表单的“显示品牌关联网址”右侧，点击电脑、平板或手机图标切换要设置的设备：
   • 默认状态：电脑版置顶导航默认为关闭（仅在“左侧栏”版型默认开启）；平板与手机的汉堡菜单底部默认为开启。
3. 直接点击下方的平台胶囊（如 Instagram、LINE、YouTube），即可针对该设备逐条勾选或取消要显示哪几个平台（把该设备的胶囊全部取消勾选，即不在该设备显示社交图标）。

3. 页首版型、模块底色与外观

在页首的“版型与外观”区块，可通过视觉缩略图与开关调整整体风格：

• 模块底色（6 色表面）：提供自动交错（默认微毛玻璃底）、纯净白（深色模式为深邃黑）、雾光灰（炭雾灰）、品牌柔光、品牌主色、消光黑（柔光炭） 6 种色票；选择深色或品牌主色底时，导航文字、图标与按钮会自动反白，确保跨页 100% 清晰可读。
• 向下滚动时自动缩窄页首：默认开启，访客往下滑动阅读时页首高度会稍微收窄，留出更多画面空间。
• 显示底部品牌装饰线：开启后会在页首底边加上一道细致的品牌色渐变线条。
• 加入自定义按钮（最多 2 个）：可在页首右侧（或左侧栏底部）放入最多 2 个全站共用按钮，并为每个按钮选择“品牌主色”“默认”或“文字箭头”样式。

4. 功能按钮（搜索、购物车）

页首最右侧、行动按钮的右边，放的是网站的功能按钮，目前有“搜索”与“购物车”。在页首表单的“功能按钮”区块可以决定要不要显示、以及用拖拽手柄（⋮⋮）调整谁排在前面：

• 搜索（站内搜索）：新建立的网站默认为开启，既有网站可在此手动开启并按右上角“发布”（免费版、专业版与商务版皆可使用）。
  • 访客如何使用：当网站已发布且有可搜索的公开内容时，页首会显示放大镜按钮，访客点一下（或在电脑按 /、⌘K）即可搜索网站上已公开发布的所有内容（包含一般页面、子页面、博客文章与分类标签、上架商品与分类；售完商品自动排在最后），也可以点击窗口底部的“查看所有结果”进入 /search 结果页查看完整卡片列表。
  • 自动排除范围：草稿、设为“隐藏”的页面、没有上架商品的空分类、数字商品受保护文件名称不会被搜到；若希望将特定已公开的页面、商品或文章从站内搜索藏起来，可在该项目的。编辑器画布固定显示放大镜按钮供预览搜索窗口外观，发布网站后访客即可实际搜索。
  • 关掉按钮不等于关掉搜索：这个开关只决定页首要不要显示放大镜。您网站的 /search 结果页与 对已发布的网站一律可用，索引也会照常更新，方便自定义前端或 AI 助手使用。不想让访客搜到某一页，请用上一点的“不出现在站内搜索”，而不是只关掉按钮。
• 购物车：“商店 › 设置 › 一般”的“启用购物车”要开着（新建立的网站默认开启），而且至少有一件上架中的商品，页首才会出现购物车按钮。条件还没满足时，开关会显示为关闭且无法切换，并写出缺少哪一步；点旁边的“前往设置”即可开新标签页处理，处理完切回编辑器就会更新。
• 不想在页首放购物车：条件都满足后，把“购物车”开关关掉即可。访客按商品的“加入购物车”时会直接打开购物车，一样能结账。
• 从商店设置过来：“商店 › 设置 › 一般”的“启用购物车”说明里也有链接，可以直接打开这里的页首设置。
• 在不同设备的位置：电脑版全部排在行动按钮右侧；手机与平板在菜单钮旁最多显示前 2 个功能按钮，其余自动放在点开后的菜单最上方；“左侧栏”版型只有一个功能按钮时与品牌标志排在同一列，两个以上则排在标志与网站名称下方独立一列。

设计页尾（Footer）

1. 品牌标志、无框呈现与品牌关联网址

• 显示品牌信息：通过多选胶囊决定是否显示“品牌标志”“网站名称”与“品牌关联网址”。
• 显示品牌关联网址（逐条勾选）：开启后，下方会出现紧凑的平台胶囊列，您可以自由点击要在页尾显示哪几个社交链接。
• 标志大小与“标志加上白底方框”：
  • 页尾标志默认采用干净无框等比呈现（横式 Logo 或透明背景图不会被多余的白框切边，尺寸可选小／中／大）。
  • 若您的图片本身需要白底衬托，可打开“标志加上白底方框”开关。
• 品牌简介与版权文字：可填写一段页尾专属的品牌短述（超过 150 字时支持长文收合）与版权声明（如 © 2026 品牌名称）。

2. 多栏组导航、联系信息与法律条款

• 用“组”做出多栏页尾导航：
  • 在页尾的“导航项目”新增项目时，若将链接类型设为“下拉菜单组”，该组在电脑版页尾会自动渲染为独立的一栏（组名称会变成该栏的小标题，底下的子项目则是该栏的垂直链接列表）。
  • 单一链接项目则会归入默认导航栏，搭配右侧的“联系我们”最多可并排成整齐的 4 栏页尾网格。
• 联系信息：可勾选是否显示地址、电话、Email 与营业时间（数据来源为的商家信息）。
• 法律条款链接与 Cookie 设置：勾选要在页尾最下方列出的条款链接（请先在将对应条款页开启显示）；若网站有启用，也会在此提供“Cookie 设置”按钮让访客随时重选偏好。

3. 页尾版型、模块底色与双行动按钮

• 页尾版型（3 种）：
  • 多栏标准（默认）：左侧为品牌标志、简介、按钮与社交图标，右侧为多栏导航与联系信息。
  • 居中对称：将标志、名称、简介、按钮、社交与导航全部居中排列。
  • 极简单行：省略上方大型区块，仅以单列清爽呈现网站名称、版权文字、行动按钮、社交图标与条款链接。
• 模块底色（6 色表面）：默认为柔和雾光灰／炭雾灰；当您改选“品牌主色”或“消光黑／柔光炭”时，页尾的联系图标底框、文字与分隔线都会自动切换为高对比语义色，绝不撞色。
• 加入自定义按钮（最多 2 个）：可在页尾品牌简介下方（或极简单行右侧）放入最多 2 个行动按钮。

建立导航项目、下拉菜单与页内 #锚点 跳转

页首与页尾的导航菜单不会因为您新增了页面就自动塞入，而是由您在“导航项目”中手动新增与拖拽排序：

1. 用统一链接选择器绑定目的地

点击“新增导航项目”，输入显示文字（例如“服务计划”），并在“选择链接目的地”搜索或点击：

• 网站内部内容：可直接选择一般页面、商品、商品分类、博客文章、文章分类／标签／作者（若选中的页面目前为“隐藏”或文章为“草稿”，菜单旁会显示提醒标签，且公开站会自动隐藏未公开的项目，不怕访客点到死链接）。
• 外部网址：滑到菜单最下方选“外部网址”（或直接在搜索框贴上 https://... 网址），并可切换要在“同一标签页”或“新标签页”开启。
• 下拉菜单组：切换为“下拉菜单组”后，可在底下新增最多 8 个子项目（若您原本选中的页面底下已经建立好公开子页面，也可直接点击下方的“将 N 个子页面加入为下拉菜单”按钮一键带入，见）。在页首会呈现为鼠标移上或点击展开的下拉菜单（左侧栏与手机版为手风琴展开）；在页尾则会自动变成独立的一栏导航。

2. 设置“点击导航或按钮 → 滑动到同页指定区块”（页内 #锚点 跳转）

如果您做了一页式网站，或希望访客点击导航栏的“常见问题”时直接平滑滚动到首页中段的 FAQ 区块，只需两步：

1. 先替目标模块命名锚点 ID：点击画布上的目标模块（如常见问题），滑到右侧表单最底部的“全站共用与进阶设置”，在“区块锚点 ID”填入英文小写名称（例如 faq）。
2. 在导航项目或按钮选取该锚点：打开页首（或自定义按钮）编辑器，在“选择链接目的地”先选中该页面（例如“首页”），下方就会自动浮现“选择页面锚点”下拉菜单，直接点击 #faq 即可！

相关文件