Вибери шаблон і його вигляд
Переглянь шаблони й налаштуй кольори, шрифти, компонування та логотип сайту.
Для власників і адміністраторів команд · 11 кроків
Що потрібно спочатку
- У твоєї команди є підписка на сайт. В адмінпанелі безкоштовної команди замість Шаблон показано Отримати сайт.
- Ти власник або адміністратор команди.
Кроки
Крок 1: Відкрий «Шаблон»
У меню ліворуч натисни Шаблон.
Ти маєш побачити: сторінку «Шаблон» із карткою для кожного шаблону. Шаблон твого сайту позначено Використовується. Якщо в сайту ще немає шаблону, на кожній картці натомість є Вибрати — ця кнопка вибирає шаблон із його першою палітрою й відкриває «Вигляд».
Крок 2: Переглянь шаблон
На картці шаблону натисни Попередній перегляд.
Ти маєш побачити: свій сайт у цьому шаблоні під смугою з написом Попередній перегляд. Відкрити його можуть лише адміністратори твоєї команди. Коли закінчиш, натисни До адмінпанелі.
Крок 3: Відкрий «Вигляд»
На сторінці «Шаблон» натисни Вигляд угорі праворуч.
Ти маєш побачити: сторінку «Вигляд» — з одного боку форма, а поруч живий вигляд твого сайту (на вузькому екрані — під формою).
Крок 4: Вибери палітру
У розділі Палітра вибери один із пресетів шаблону.
Ти маєш побачити: виділений пресет і свій сайт у його кольорах. Пресет одразу задає п’ять кольорів і обидва шрифти.
Крок 5: Зміни колір
У розділі Кольори введи код кольору, наприклад
#7dd3fc, у поле Основний, Акцент, Виділення, Фон або Текст — або натисни квадратик поруч і вибери колір.Ти маєш побачити: як змінюється вигляд сайту, а в розділі «Палітра» виділено Власна. Біля кожного кольору показано його стандартне значення в шаблоні; Скинути повертає його.
Крок 6: Задай окремі кольори для тексту й поверхонь
У розділі Текст і поверхні натисни Вибери колір біля Заголовки, Підписи, Картки, Лінії, Посилання й мітки, Кнопка або Текст кнопки, потім введи код кольору або натисни квадратик поруч. Спочатку кожен колір стоїть на Авто: він підлаштовується під твої п’ять кольорів так, як це робить шаблон; Авто повертає цей режим.
Ти маєш побачити: як змінюється вигляд сайту, а під кожним кольором тексту — число на кшталт 7,2:1 · легко читати: наскільки чітко колір виділяється на тлі й картках. Нижче 4,5:1 (3:1 для заголовків) там буде «важко читати», колір, який натомість побачать відвідувачі, і кнопка Зробити читабельним, яка вставляє цей колір у поле.
Крок 7: Вибери шрифти
У розділі Типографіка відкрий Шрифт заголовків або Шрифт основного тексту і вибери шрифт. Кожен шрифт показано ним самим, і він належить до групи — Масивні акцидентні, Вузькі, Технічні, Чисті гротески, Із засічками, Рукописні, Моноширинні. Щоб знайти шрифт, введи його назву.
Ти маєш побачити: свій сайт із цим шрифтом. Після зміни шрифту палітра теж стає Власна.
Крок 8: Додай логотип
У розділі Логотип натисни Вибрати зображення біля Текстовий логотип, Квадратний логотип або Favicon (коли зображення вже задано, на кнопці написано Замінити). У вікні Вставити зображення вибери зображення або завантаж нове — JPEG, PNG, WebP чи AVIF, до 5 МБ — і натисни Вставити. Альтернативний текст для логотипа не потрібен.
- Квадратний логотип показується в навігації сайту, угорі сторінки «Головна» і в складі.
- Текстовий логотип необов’язковий: назва твоєї команди як зображення будь-якої форми. Якщо його задати, він замінює квадратний логотип і назву в навігації та вгорі сторінки «Головна».
- Favicon — маленька іконка на вкладці браузера.
Твої логотипи ніколи не обрізаються й не змінюються. Кожне зображення показується повністю, а прозорий фон лишається прозорим. Тому квадратний логотип і favicon мають бути квадратними, щонайменше 256 × 256 пікселів — зображення іншої форми не приймається під час збереження, а в повідомленні буде вказано його розмір. Логотип, вибраний до цього правила, показується, доки ти його не зміниш.
Ти маєш побачити: назву зображення біля поля. Пресет їх ніколи не змінює.
Крок 9: Налаштуй параметри шаблону
Нижче, у розділі Broadcast options, вибери 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 на всіх інших сторінках (Заплануй трансляцію).
З’являється «Сайт змінено, поки він був відкритий»
Інший адміністратор зберіг зміни першим, а твої не збереглися. Натисни Перезавантажити, а потім внеси зміну ще раз.
З’являється «Цей логотип … Завантаж квадратне зображення»
Квадратний логотип і favicon мають бути квадратними — однакової ширини й висоти — і щонайменше 256 × 256 пікселів, бо ми їх ніколи не обрізаємо. У повідомленні вказано розмір твого зображення. Зроби квадратну версію (додай порожнє прозоре місце навколо широкого логотипа), завантаж її й збережи ще раз. Неквадратному логотипу місце в полі Текстовий логотип.
З’являється «Розмір цього логотипа невідомий»
Ми не знаємо розміру цього зображення, тому не можемо перевірити, чи воно квадратне. Завантаж його ще раз, вибери нову копію й збережи.
Поля й кнопка «Зберегти» неактивні
Підписка твоєї команди закінчилася, тому сторінки сайту доступні лише для читання, доки вона знову не стане активною. Віднови її — див. Керування оплатою.
Схожі статті
Досі не виходить? Напиши в підтримку або на пошту support@spawnfront.com — вкажи сторінку, на якій ти є, і номер кроку.