选择模板和外观
预览模板，然后设置网站的颜色、字体、布局选项和标志。
适合战队所有者和管理员 · 11 个步骤
准备工作
- 你的战队有网站订阅。免费战队的管理后台显示的是获取网站，而不是模板。
- 你是战队的所有者或管理员。
步骤
第 1 步：打开模板
在左侧菜单中，点击 模板。
你会看到：一个标题为“模板”的页面，每个模板一张卡片。你的网站正在用的模板标有 使用中。如果你的网站还没有模板，每张卡片会显示 选择——点击它会选用该模板及其首个配色，并打开外观页面。
第 2 步：预览模板
在某个模板的卡片上，点击 预览。
你会看到：你自己的网站以该模板显示，上方有一条写着预览的栏。只有你战队的管理员能打开它。看完后点击 返回管理后台。
第 3 步：打开外观
回到模板页面，点击右上角的 外观。
你会看到：一个标题为“外观”的页面——一侧是表单，旁边是网站的实时预览（窄屏时在下方）。
第 4 步：选择配色
在配色下，选择该模板的一个预设。
你会看到：该预设被框出，网站预览换成它的颜色。预设会一次设置五种颜色和两种字体。
第 5 步：更改颜色
在颜色下，在 主地址、强调色、高亮色、背景 或 文字 中输入颜色代码，例如
#7dd3fc——也可以点击旁边的方块来选色。你会看到：网站预览随之变化，配色下的自定义被框出。每种颜色都会显示模板默认值；重置 可以恢复该颜色。
第 6 步：为文字和界面设置各自的颜色
在文字和界面下，点击 选择颜色，它位于 标题、说明文字、卡片、线条、链接和标签、按钮 或 按钮文字 旁边，然后输入颜色代码或点击旁边的方块。每一项一开始都是自动，会像你的模板那样跟随你的五种颜色；使用自动 可以恢复为自动。
你会看到：网站预览随之变化，每种用于文字的颜色下方会显示一个数值，如 7.2:1 · 易读——表示它和背景、卡片的区分程度。低于 4.5:1（标题为 3:1）时会显示难以阅读，同时显示访客实际会看到的颜色，并提供 调整为易读，点击即可把该颜色填入字段。
第 7 步：选择字体
在字体排版下，打开 标题字体 或 正文字体 并选择一种字体。每种字体都用它本身的字形展示，并归入一个分组——粗体展示、窄体、科技、简洁无衬线、衬线、手写、等宽——你也可以输入名称查找。
你会看到：网站预览换成该字体。更改字体也会让配色变为自定义。
第 8 步：添加标志
在标志下，点击 选择图片，它位于 文字标志、方形标志 或 网站图标 旁边（设置后会显示为 替换）。在插入图片对话框中，选择或上传一张图片——JPEG、PNG、WebP 或 AVIF，最大 5 MB——然后点击 插入。标志不需要替代文字。
- 方形标志显示在网站导航、首页顶部和阵容中。
- 文字标志是可选的：用图片呈现的战队名称，形状不限。设置后，它会替换导航和首页顶部的方形标志和名称。
- 网站图标是浏览器标签页上的小图标。
你的标志永远不会被裁剪或修改。每张图片都完整显示，透明背景保持透明。所以方形标志和网站图标必须是正方形，且至少 256 × 256 像素——其他形状的图片会在保存时被拒绝，并提示它的尺寸。这条规则之前选的标志会继续显示，直到你更换它。
你会看到：栏位旁显示图片名称。预设不会更改这些设置。
第 9 步：设置模板选项
再往下，在 Broadcast 选项下，选择 Hero layout（Image behind the text 或 Image beside the text）和 Card edges（Cut corners 或 Square corners）。其他模板会在这里列出各自的选项：Neon Grid 的 Motion 可选 Full motion 或 Calm（完全静止），Hero glow 可选 Bright（首页顶部从背景色渐变到强调色）或 深色（渐变到由主色和强调色混合成的深灰色，整体更暗）；Crosshair 的 Hero layout 可选 Split（文字在左，图片在右，图片上叠加你的下一场比赛）或 Full-width image；Faceoff 的 Hero alignment 可选 Centered 或 Left，Home roster 可选 Scattered（选手卡片环绕大号“Meet the squad”标题）或 Grid；Clutch 的 Hero layout 可选 Bento（主视觉旁边是 Latest news 面板）或 Full width，Corners 可选 Rounded 或 Square；Varsity 的 背景 可选 Pinstripe（每个页面背后都有淡淡的斜条纹）或 无，Hero size 可选 Full（高大的照片，菜单叠在上面）或 Banner（较矮的照片）；Redline 的 Photo tint 可选 Duotone（照片染上你的主色）或 Natural（保留原色），Panels 可选 Offset（照片和版块后面衬着深色块）或 Flat。
你会看到：网站预览的布局随之变化。
第 10 步：保存
点击表单底部的 保存。
你会看到：“外观已保存”。访客暂时还看不到——保存的更改会留在草稿中，直到你发布。
如何确认已成功
- 模板页面把你的模板标为使用中。
- 发布后，网站显示你的颜色、字体和标志——完整显示，不会被裁剪。
- 每种用于文字的颜色都显示易读，或者你已接受访客实际看到的易读色调。
看起来不对劲？
我改了颜色，但网站看起来没变
保存只会把它们留在草稿中。点击菜单中的发布并发布（第 11 步）。
某个颜色显示“难以阅读”
这个颜色的文字和背景或卡片的对比度不够，不是每个人都能看清——普通文字需要 4.5:1，标题需要 3:1。访客永远不会看到难以阅读的颜色：网站会改用最接近的易读色调，表单会标出它。点击 调整为易读 使用该色调，或者自己挑选，直到显示易读。保持自动的颜色会用同样的方式自动调整，不会询问你。发布时也会显示警告，但绝不会阻止你发布。
我的网站到处都是一种颜色，很难阅读
在文字和界面下为每种文字设置各自的颜色（第 6 步）：例如红色的标题、段落用浅灰色的正文，再加上稍浅一点的卡片颜色，让面板从页面中凸显出来。如果想让页面的整块区域用不同颜色——深色网站中的浅色商店、一条强调色色带——请参阅为网站的不同部分设置各自的颜色。
切换模板会删除我的内容吗？
不会。你的内容属于网站，而不是模板：新模板用到的颜色和字体会沿用，它自己的选项会恢复默认，它无法显示的版块会被隐藏，而不是删除。切换前弹出的对话框会列出这三点，你也可以取消。如果你的网站还是平台默认的颜色和字体——你从没选过配色或改过颜色——就会改用新模板的首个配色，让网站看起来和模板图片一样；对话框会在 颜色和字体 下说明这一点。共有七个模板：Broadcast，比赛日风格；Neon Grid，黑色霓虹风格，主视觉背后有动态网格和发光渐变，标志悬浮其上，还有数据看板和视频墙；Crosshair，黑色科技风格，带边框面板、方括号标签、页脚大号文字标志，照片放在醒目位置；Faceoff，蓝黑和冰青色风格，每张比赛卡片上你的标志和对手的标志相对，配有大幅主视觉，阵容环绕巨型标题分布；Clutch，浅色风格，白色圆角卡片、宽体大写标题和一种亮色，下一场比赛显示在主视觉中，宽屏时还会显示在每个页面顶部；Varsity，校园风格，海军蓝色带、一种金色，阵容上方展示你最好的锦标赛名次，比赛以赛程表呈现；Redline，近黑底色配一种红色，照片染上你的主色（默认红色），方形按钮，比赛以照片行呈现，双方标志隔着 VS 相对。Clutch 的标题用的是 Archivo Expanded，你可以在任意模板的粗体展示分组中选它。在电脑或平板上，Faceoff 每个页面顶部的 Join our Discord 按钮只有在你于 社交链接 下添加了 Discord 链接后才会出现（添加社交链接）。所有模板都用同样的方式显示你的直播：当天显示倒计时，直播时首页顶部显示 Twitch 播放器，其他页面显示直播中栏（安排直播）。
提示“你打开后，此网站已被更改”
另一位管理员先保存了，你的更改都没有保存。点击重新加载，然后重新修改。
提示“此标志为……请上传正方形图片”
方形标志和网站图标必须是正方形——宽高相同——且至少 256 × 256 像素，因为我们从不裁剪它们。提示中会给出你图片的尺寸。做一个正方形版本（在宽标志周围加上透明空白），上传后再次保存。不是正方形的标志应该放在文字标志中。
提示“此标志没有尺寸记录”
我们不知道这张图片的尺寸，所以无法检查它是不是正方形。重新上传，选择新的那份，然后保存。
字段和保存按钮是灰色的
你战队的订阅已过期，所以网站页面在订阅恢复前是只读的。续订即可——请参阅管理账单。
相关文章
还是没解决？联系支持或发邮件至 support@spawnfront.com——告诉我们你所在的页面和步骤编号。