设置页眉布局
为网站的每个页面设置页眉:在九宫格上摆放图片和文字,并选择文字、字体、字号和颜色。
适合战队所有者和管理员 · 14 个步骤
准备工作
- 你的战队已订阅网站套餐。免费战队的管理后台显示的是获取网站,而不是页面。
- 你是战队的所有者或管理员。
- 你已经选好模板——见选择模板。选好之前,页面里没有页眉链接。
步骤
第 1 步:打开页面
在战队的管理后台,点击左侧菜单中的 页面。
你应该看到:标题为页面的页面,列出你网站的所有页面。

第 2 步:打开页眉
点击页面顶部的 页眉。每个页面编辑器里也有快捷入口:编辑本页页眉。
你应该看到:标题为页眉的页面,网站的每个页面各有一个标签页——首页、战队、新闻、比赛、锦标赛、视频、关于和商店——下方是该页面页眉在网站上的样子,叠在九个方格组成的网格上。

第 3 步:选择页面
点击要修改的页面标签,例如 首页。
每个页面都有自己的页眉:一张图片和一段文字,是页面最先显示的内容。标题留空时显示页面本身的名称——首页则显示战队名称。在你保存首页页眉之前,它沿用首页的图片和标语。
你应该看到:该页面的页眉,文字区块上有一个文字手柄。

第 4 步:选中图片
在右侧面板中,点击 图片。
你应该看到:面板标题变为图片区块,下方是图片字段。

第 5 步:选择图片
点击 选择图片(设置图片后会变为 替换)。在弹出的窗口中,选择战队已上传的图片,或点击 上传 添加一张——支持 JPEG、PNG、WebP 或 AVIF,最大 5 MB。填写 替代文本,然后点击 插入。
图片会完整显示——不会被裁剪,透明背景也会保持透明,所以带透明背景的 PNG 效果很好。要从页眉中去掉图片,点击 移除。
你应该看到:图片出现在页眉中,上面有一个图片手柄。

第 6 步:选择图片尺寸
在尺寸下,点击 S、M、L 或 填满。
填满会把图片放到文字后面,铺满整个页眉。
你应该看到:页眉中的图片变大或变小。

第 7 步:移动图片
把图片的手柄拖到九个方格中的任意一个。或者点击手柄,然后用方向键:每按一次移动一格。你也可以按 Enter 或 Space 拿起它,用方向键移动,再按一次 Enter 或 Space 放下。
文字区块的移动方式相同。如果两者放在同一侧,它们会重叠——编辑器会准确显示重叠效果。
你应该看到:图片移到新的方格,例如右上角。

第 8 步:填写标题和副标题
在面板中,点击 文字。输入标题(最多 60 个字符)和副标题(最多 120 个字符)。
标题留空则显示页面本身的名称。副标题可以不填——首页除外:保存首页页眉后,没有副标题网站就无法发布。
你应该看到:输入的文字实时出现在页眉中,每个字段下方显示字数。

第 9 步:选择字体
在字体下,打开列表并选择一种字体。主题字体会保留模板使用的字体。
标题和副标题可以分别设置字体。
你应该看到:页眉文字换成了新字体。

第 10 步:选择字号
在尺寸下,点击 S、M、L 或 XL。
你应该看到:页眉中的文字变大或变小。

第 11 步:选择颜色
在颜色下,点击四个色块之一:主题文字、强调色、白色或黑色。
主题文字和强调色跟随你在外观中设置的颜色;白色适合深色图片,黑色适合浅色图片。
你应该看到:文字换成了新颜色。

第 12 步:在手机上查看
在页眉上方,点击 手机。点击 桌面 返回。
在手机上,图片始终在文字上方,无论你选了哪个方格。
你应该看到:页眉缩窄到手机宽度。

第 13 步:保存
点击编辑器底部的 保存。它会保存你改过的所有标签页——标签上的圆点表示有未保存的更改。
保存后页眉只存在草稿里——发布前访客看不到。 保存首页页眉后,首页的图片和标语就改到这里编辑:首页编辑器原来的位置会显示编辑页眉,按钮仍留在首页编辑器中。
你应该看到:“已保存”。

如何确认已成功
- 编辑器顶部的 预览本页 会在对应页面上显示已保存的页眉。
- 发布后,你改过的每个页面都会显示新的页眉。
看起来不对劲?
我保存了,但网站没有变化
保存只会把页眉存进草稿。点击菜单中的发布,把它们放到网站上(第 14 步)。
首页编辑器里找不到标语和图片了
你保存了首页页眉,所以它们移到了这里:在页眉的首页标签页中编辑。首页编辑器里的编辑页眉链接会带你过来。按钮仍留在首页编辑器中。
保存按钮是灰色的
图片缺少替代文本(第 5 步),或者自上次保存后没有任何更改。如果订阅已过期,管理后台会变为只读,恢复付款前无法保存任何内容。
保存首页页眉后网站无法发布
检查项首页主视觉有标语未通过:保存首页页眉后,它的副标题就是战队名称下方的那行字,所以不能为空。在首页标签页中填写副标题(第 8 步),保存,然后重新发布。
提示“此页面在你打开后已被更改”
你打开页眉期间,它们在别处被保存了——可能是另一位管理员,也可能是你在另一个标签页——所以你的更改都没有保存。点击重新加载,然后重新修改。
相关文章
还是没解决?联系支持或发邮件至 support@spawnfront.com——告诉我们你所在的页面和步骤编号。