Выбери шаблон и оформление
Посмотри шаблоны и настрой цвета, шрифты, параметры и логотип сайта.
Для владельцев и администраторов команд · 11 шагов
Что нужно заранее
- У твоей команды есть подписка на сайт. В админ-панели бесплатной команды вместо пункта Шаблон есть пункт Получить сайт.
- Ты владелец команды или её администратор.
Шаги
Шаг 1: Открой «Шаблон»
В меню слева нажми Шаблон.
Ты увидишь: страницу «Шаблон» с карточкой для каждого шаблона. Шаблон твоего сайта отмечен меткой Используется. Если у сайта ещё нет шаблона, на каждой карточке вместо этого будет кнопка Выбрать: она выбирает этот шаблон с его первой палитрой и открывает «Оформление».
Шаг 2: Посмотри шаблон
На карточке шаблона нажми Предпросмотр.
Ты увидишь: свой сайт в этом шаблоне под полосой с надписью Предпросмотр. Открыть его могут только администраторы твоей команды. Когда закончишь, нажми В админ-панель.
Шаг 3: Открой «Оформление»
На странице «Шаблон» нажми Оформление справа вверху.
Ты увидишь: страницу «Оформление» — форму с одной стороны и живой вид твоего сайта рядом с ней (на узком экране — под ней).
Шаг 4: Выбери палитру
В разделе Палитра выбери один из пресетов шаблона.
Ты увидишь: выбранный пресет обведён, а сайт на картинке — в его цветах. Пресет задаёт сразу пять цветов и оба шрифта.
Шаг 5: Измени цвет
В разделе Цвета введи код цвета, например
#7dd3fc, в поле Основной, Акцент, Выделение, Фон или Текст — или нажми на квадрат рядом с полем и выбери цвет.Ты увидишь: сайт на картинке изменится, а в разделе «Палитра» будет обведён вариант Свой. У каждого цвета показан цвет шаблона по умолчанию; Сбросить возвращает его.
Шаг 6: Задай цвета тексту и поверхностям
В разделе Текст и поверхности нажми Выбери цвет рядом с Заголовки, Подписи, Карточки, Линии, Ссылки и метки, Кнопка или Текст кнопки, затем введи код цвета или нажми на квадрат рядом. Сначала у каждого стоит Авто: цвет следует твоим пяти цветам так, как это задумано в шаблоне; Авто возвращает этот режим.
Ты увидишь: сайт на картинке изменится, а под каждым цветом, которым пишется текст, появится число вроде 7.2:1 · легко читать — насколько чётко цвет выделяется на фоне и на карточках. Ниже 4.5:1 (3:1 для заголовков) там будет «трудно читать», а ещё цвет, который посетители увидят вместо твоего, и кнопка Сделать читаемым — она ставит этот цвет в поле.
Шаг 7: Выбери шрифты
В разделе Типографика открой Шрифт заголовков или Шрифт текста и выбери шрифт. Каждый шрифт показан своим же начертанием и отнесён к группе — Жирные акцентные, Узкие, Технические, Чистые гротески, С засечками, Рукописные, Моноширинные. Чтобы найти шрифт, введи его название.
Ты увидишь: сайт на картинке с этим шрифтом. После смены шрифта в палитре тоже будет выбран вариант Свой.
Шаг 8: Добавь логотип
В разделе Логотип нажми Выбрать изображение рядом с Логотип-надпись, Квадратный логотип или Фавикон (когда изображение уже выбрано, на кнопке написано Заменить). В окне вставки изображения выбери изображение или загрузи новое — JPEG, PNG, WebP или AVIF, до 5 МБ — и нажми Вставить. Логотипу не нужен альтернативный текст.
- Квадратный логотип показывается в навигации сайта, вверху главной страницы и в составе.
- Логотип-надпись — по желанию: название команды в виде изображения любой формы. Если ты его задашь, он заменит квадратный логотип и название в навигации и вверху главной страницы.
- Фавикон — маленький значок на вкладке браузера.
Твои логотипы никогда не обрезаются и не меняются. Каждое изображение показывается целиком, а прозрачный фон остаётся прозрачным. Поэтому квадратный логотип и фавикон должны быть квадратными, не меньше 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 (главный блок рядом с панелью последних новостей) или Full width, а Corners — Rounded или Square; у Varsity Фон — Pinstripe (едва заметная диагональная полоска на фоне каждой страницы) или Без эффектов, а Hero size — Full (высокое фото с меню поверх) или Banner (пониже); у Redline Photo tint — Duotone (фото окрашены в основной цвет) или Natural (их собственные цвета), а Panels — Offset (тёмные блоки за фото и разделами) или Flat.
Ты увидишь: на картинке изменится раскладка сайта.
Шаг 10: Сохрани
Нажми Сохранить внизу формы.
Ты увидишь: «Оформление сохранено». Посетители этого пока не видят — сохранённые изменения остаются в черновике, пока ты не опубликуешь сайт.
Шаг 11: Опубликуй сайт
Нажми Публикация в меню слева и опубликуй сайт — см. Опубликуй свой сайт.
Ты увидишь: Оформление в списке изменений перед публикацией, а после неё — сайт в новом виде.
Как понять, что всё получилось
- На странице «Шаблон» твой шаблон отмечен как Используется.
- После публикации на сайте видны твои цвета, шрифты и логотип — целиком, без обрезки.
- У каждого цвета для текста написано легко читать, или тебя устраивает читаемый оттенок, который посетители видят вместо него.
Что-то не так?
Цвета изменены, а сайт выглядит по-старому
При сохранении они остаются в черновике. Нажми Публикация в меню и опубликуй сайт (шаг 11).
Цвет помечен «трудно читать»
Текст этого цвета недостаточно выделяется на фоне или на карточках, и не все смогут его прочитать: обычному тексту нужно 4.5:1, заголовкам — 3:1. Посетители никогда не видят трудночитаемый цвет: вместо него сайт показывает ближайший читаемый оттенок, и форма его называет. Нажми Сделать читаемым, чтобы взять этот оттенок, или подбирай свой, пока не появится «легко читать». Цвет в режиме Авто подстраивается так же, без вопросов. При публикации тоже появится предупреждение, но опубликовать сайт оно не помешает.
Весь текст на сайте одного цвета, и его трудно читать
Задай каждому виду текста свой цвет в разделе Текст и поверхности (шаг 6): например, красные Заголовки, светло-серый Текст для абзацев и чуть более светлые Карточки, чтобы панели выделялись на странице. Чтобы окрасить целые части страницы по-разному — светлый магазин на тёмном сайте, полосу акцентного цвета, — см. Задай частям сайта свои цвета.
Удалится ли мой контент при смене шаблона?
Нет. Контент принадлежит сайту, а не шаблону: цвета и шрифты переносятся туда, где новый шаблон их использует, его собственные параметры возвращаются к значениям по умолчанию, а раздел, который он не умеет показывать, скрывается, а не удаляется. Окно перед сменой шаблона перечисляет все три пункта, и смену можно отменить. Если у сайта всё ещё цвета и шрифты платформы по умолчанию — палитра ни разу не выбиралась и цвета не менялись, — вместо них берётся первая палитра нового шаблона, и сайт выглядит как на картинке шаблона; в окне это сказано в пункте Цвета и шрифты. Всего шаблонов семь: Broadcast — в духе дня матча; Neon Grid — чёрный неоновый стиль с анимированной сеткой и светящимся градиентом за главным блоком, логотипом поверх него, счётчиками и стеной видео; Crosshair — чёрный технический стиль с панелями в рамках, подписями в скобках, большим логотипом-надписью в подвале и фото на первом плане; Faceoff — сине-чёрный и ледяной голубой стиль, где на каждой карточке матча твой логотип стоит напротив логотипа соперника, с большим главным блоком и составом вокруг огромного заголовка; Clutch — светлый стиль с белыми скруглёнными карточками, широкими заголовками заглавными буквами и одним ярким цветом, ближайший матч — в главном блоке, а на широком экране — вверху каждой страницы; Varsity — университетский стиль с тёмно-синими полосами, одним золотым цветом, лучшими местами на турнирах над составом и матчами в виде таблицы расписания; и Redline — один красный на почти чёрном, фото окрашены в основной цвет (по умолчанию красный), квадратные кнопки и матчи в виде рядов с фото и обоими логотипами через VS. Заголовки Clutch набраны шрифтом Archivo Expanded — его можно выбрать в любом шаблоне в группе Жирные акцентные. На компьютере или планшете кнопка Join our Discord вверху каждой страницы в Faceoff появляется, только если ссылка на Discord добавлена в разделе Соцсети (Добавь соцсети). Все шаблоны показывают трансляцию одинаково: обратный отсчёт в день эфира, плеер Twitch вверху главной страницы, пока идёт эфир, и полоса Live на всех остальных страницах (Запланируй трансляцию).
Появилось сообщение «С момента открытия сайт изменился»
Другой администратор сохранил изменения первым, и твои изменения не сохранились. Нажми Перезагрузить и внеси изменение снова.
Появилось сообщение «Этот логотип … Загрузи квадратное изображение»
Квадратный логотип и фавикон должны быть квадратными — одинаковой ширины и высоты — и не меньше 256 × 256 пикселей, потому что мы их никогда не обрезаем. В сообщении указан размер твоего изображения. Сделай квадратную версию (добавь пустое прозрачное поле вокруг широкого логотипа), загрузи её и сохрани снова. Неквадратному логотипу место в поле Логотип-надпись.
Появилось сообщение «У этого логотипа не указан размер»
Мы не знаем размер этого изображения, поэтому не можем проверить, квадратное ли оно. Загрузи его снова, выбери новую копию и сохрани.
Поля и кнопка «Сохранить» неактивны
Подписка команды закончилась, поэтому страницы сайта доступны только для чтения, пока она снова не станет активной. Продли её — см. Управление оплатой.
Похожие статьи
Всё ещё не получается? Напиши в поддержку или на support@spawnfront.com — укажи страницу, на которой ты находишься, и номер шага.