Як налаштувати шрифти та кольори сайту

Стилі сайту задають спільне оформлення сторінок: шрифти, кольори та вигляд елементів. Узгоджені стилі допомагають зберігати однаковий вигляд заголовків, текстів і кнопок, коли ти додаєш нові блоки. У цьому матеріалі розглянуто панелі, які видно на скриншотах, і пояснено кожне показане налаштування кольору.

Відкрий стилі сайту

1. Відкрий потрібну сторінку в редакторі.

2. У верхній панелі натисни значок пензлика праворуч від перемикача комп’ютера й телефона.

3. У панелі «Стилі сайту» вибери потрібний розділ: «Шрифти», «Кольори», «Кнопки» або «Форми».

Скриншот 5. Панель «Стилі сайту» з чотирма розділами оформлення.

• Шрифти. Параметри текстового оформлення. На картці є приклад заголовка та звичайного параграфа.

• Кольори. Палітра й набори кольорів для тексту, блоків, кнопок та інших елементів.

• Кнопки. Окремий розділ стилю кнопок. У картці показано приклади заповненої та контурної кнопки.

• Форми. Окремий розділ оформлення форм. У картці показано приклад поля введення та кнопки надсилання.

Зверни увагу. Це «Стилі сайту», тому зміни можуть впливати на різні сторінки й блоки, які використовують ці стилі. Після зміни спільного оформлення переглянь основні сторінки, а не лише поточний фрагмент.

Налаштування шрифтів

1. У «Стилях сайту» відкрий «Шрифти».

2. Переглянь зразок заголовка та параграфа у верхній картці.

3. Вибери групу, яку потрібно налаштувати: «Розміри текстів», «Заголовки», «Параграфи» або «Кнопка».

4. Після внесення потрібних змін скористайся «Зберегти». Переглянь результат на текстах різної довжини та в мобільному вигляді.

Скриншот 6. Панель «Шрифти»: зразок Manrope та групи текстових налаштувань.

• Зразок у верхній картці. Показує поєднання заголовка та звичайного тексту. На прикладі для обох показано Manrope. Це налаштування конкретного сайту, а не обов’язкова вимога.

• Розміри текстів. Група для керування розмірами текстових стилів. Оціни загальну різницю між великими заголовками, підзаголовками та основним текстом.

• Заголовки. Група оформлення заголовків. Заголовок має допомагати читачеві зрозуміти тему секції.

• Параграфи. Група оформлення основного тексту. Перевіряй її на кількох абзацах, а не лише на одному короткому рядку.

• Кнопка. Текстове оформлення написів на кнопках. Воно має залишатися читабельним для коротких і довших підписів.

Для початку обери небагато текстових стилів і використовуй їх послідовно. Наприклад, великий заголовок — для першого екрана, менший — для секцій, параграф — для пояснень. Якщо текст перестає вміщуватися на телефоні, перевір не лише розмір, а й довжину самого формулювання.

Як пов’язані палітра й кольорова тема

Палітра — набір базових кольорів і відтінків. Кольорова тема визначає, як ці кольори застосовуються до тексту, блоків, кнопок, значків та інших частин сторінки. Наприклад, для світлого фону потрібен темний текст, а для темного — світлий.

1. Повернися до «Стилів сайту» та відкрий «Кольори».

2. У верхній частині знайди картку палітри з дією «Редагувати палітру».

3. Нижче відкрий список тем.

4. Вибери тему, параметри якої хочеш переглянути або змінити.

5. Розгорни потрібну групу налаштувань під вибраною темою.

Скриншот 7. Список кольорових тем: «Світла тема», «Темна тема» та «Варіативна тема».

• Редагувати палітру. Перехід до базових кольорів сайту. У поточному прикладі палітра містить світлий, фіолетові, бірюзовий і темний кольори.

• Світла тема. Набір оформлення, показаний у списку на світлому фоні.

• Темна тема. Набір оформлення, показаний у списку на темному фоні.

• Варіативна тема. Додатковий набір оформлення; у прикладі його картка має кольоровий градієнт.

• Системна тема. Позначка під назвою кожної з трьох тем у показаному інтерфейсі.

Зверни увагу. Вибір теми у цій панелі визначає, налаштування якої теми ти редагуєш. Не сприймай сам вибір у списку як підтвердження того, що весь сайт уже перемкнувся на цю тему.

Кольори тексту

1. У панелі «Кольори» вибери потрібну тему.

2. Розгорни групу «Текст».

3. Натисни кольоровий кружок або стрілку праворуч від потрібного текстового стилю.

4. Вибери колір і перевір, чи добре він читається на фоні відповідних блоків.

Скриншот 8. Група «Текст»: окремі кольори заголовків і параграфів.

• Заголовок 1. Колір текстового стилю «Заголовок 1».

• Заголовок 2. Колір текстового стилю «Заголовок 2».

• Заголовок 3. Колір текстового стилю «Заголовок 3».

• Заголовок 4. Колір текстового стилю «Заголовок 4».

• Параграф 1. Колір першого стилю параграфа.

• Параграф 2. Колір другого стилю параграфа.

• Параграф 3. Колір третього стилю параграфа. У прикладі він візуально світліший за інші текстові кольори.

Налаштовуй колір відповідно до ролі тексту. Основний текст повинен легко читатися; менш помітний відтінок доречний для додаткових пояснень. Світлий текст на світлому фоні або темний на темному може зробити інформацію практично невидимою.

Кольори блока

1. У панелі «Кольори» розгорни групу «Блок».

2. Переглянь «Фон всього блоку» та «Колір фону».

3. Після зміни перевір секцію повністю: краї блока, внутрішню область і розміщені на ній елементи.

Скриншот 9. Група «Блок» із полями «Фон всього блоку» та «Колір фону».

• Фон всього блоку. Параметр фону секції як цілого. Його потрібно оцінювати разом із фоном сусідніх секцій.

• Колір фону. Окремий параметр фону, показаний нижче. Не вважай його автоматично тотожним першому: перевір, яка саме область змінюється у вибраному блоці.

Щоб секції візуально відділялися одна від одної, можна чергувати спокійні фони. Не потрібно робити кожен блок яскравим: сильний фон краще залишати для секцій, які мають привернути увагу.

Кольори кнопок

1. Розгорни групу «Кнопка».

2. Визнач, для якого стилю кнопки потрібна зміна: основного, другорядного чи додаткового.

3. Відкрий колір потрібного параметра.

4. Перевір напис і вигляд кнопки на відповідному фоні; для станів наведення наведи курсор на кнопку в перегляді сторінки.

Скриншот 10. Кольори основної, другорядної та додаткової кнопок.

• Основна: Фон. Колір заливки основної кнопки.

• Основна: Текст. Колір напису на основній кнопці. Він має чітко відрізнятися від заливки.

• Другорядна: Колір кнопки. Базовий колір другорядної кнопки. У контурному варіанті цей колір використовується для контуру й тексту, а при наведенні — для фону.

• Другорядна: Колір тексту при наведенні. Колір напису під час наведення курсора на другорядну кнопку.

• Додаткова: Колір кнопки. Колір додаткової кнопки. Для текстового варіанта це колір напису.

• Додаткова: Колір тексту при наведенні. Окреме поле, показане в панелі. Перевір фактичний вигляд вибраного стилю у стані наведення, перш ніж покладатися на цей ефект.

Основну кнопку використовуй для головної дії секції, наприклад «Обрати навчання». Другорядна кнопка може вести до додаткової інформації, наприклад «Про програму». Коли всі кнопки однаково яскраві, відвідувачу складніше зрозуміти пріоритет дій.

Зверни увагу. Налаштування кольору не задає адресу переходу. Після оформлення потрібно окремо перевірити дію самої кнопки.

Колір значка та вибір відтінку

1. Розгорни групу «Значок».

2. У рядку «Колір значка» натисни кружок або стрілку праворуч.

3. Вибери базову роль палітри.

4. Вибери потрібний відтінок. За потреби розгорни «Більше відтінків».

5. Оціни контраст значка з фоном секції або картки.

Скриншот 11. Група «Значок» з одним параметром — «Колір значка».

Скриншот 12. Відкритий вибір кольору: базові ролі палітри, відтінки та команда «Більше відтінків».

• Light. Світла базова роль палітри.

• Primary. Основна роль палітри. Її назва не означає, що всі основні кнопки обов’язково використовують саме її.

• Secondary. Друга базова роль палітри для узгодженого додаткового кольору.

• Accent. Акцентна роль для елементів, яким потрібно привернути увагу.

• Dark. Темна роль палітри. На скриншоті вона вибрана.

• 100, 300, 500, 700, 900. Показані варіанти відтінків. Це позначення відтінків, а не відсотки прозорості. На прикладі вибрано 900.

• Більше відтінків. Розгортає додатковий вибір відтінків у цьому інструменті.

Використовуй кольори палітри послідовно: однакова роль значків у різних секціях допомагає зберігати єдиний стиль. Водночас перевіряй фон: один і той самий темний значок може бути добре видимий на світлій картці й губитися на темній.

Кольори акордеона

Акордеон зручний для матеріалу, який подається окремими розгортаними пунктами, наприклад для запитань і відповідей. У стилях налаштовується оформлення його складових.

1. У панелі «Кольори» знайди групу «Акордеон». Якщо вона нижче, прокрути праву панель.

2. Розгорни групу та послідовно перевір кольори заголовка, тексту, значка, рамки та фону.

3. Після оформлення переглянь закритий і відкритий пункт акордеона.

Скриншот 13. Група «Акордеон» із п’ятьма параметрами кольору.

• Колір заголовка. Колір назви або запитання у пункті акордеона.

• Колір тексту. Колір основного тексту, який читає відвідувач у розгорнутому пункті.

• Колір значка. Колір індикатора, пов’язаного з розгортанням пункту.

• Колір рамки. Колір межі пункту.

• Фон елементу. Фон окремого пункту акордеона. Це не те саме, що фон усієї секції сторінки.

Зверни увагу. У показаному прикладі кілька параметрів акордеона мають світлі зразки кольору. Не копіюй їх механічно: перевір поєднання тексту, значка і фону на реальному пункті.

Кольори хедера

Хедер — верхня частина сайту, тобто його шапка. Вона може містити назву або логотип, навігаційне меню та кнопку входу. У групі «Хедер» налаштовуються кольори цієї області та меню.

1. Розгорни групу «Хедер» у нижній частині панелі «Кольори».

2. Перевір фон шапки та фон випадаючого меню.

3. Налаштуй кольори пунктів меню і станів, які мають виділяти активний пункт.

4. Переглянь шапку з відкритим меню, а також у мобільному вигляді.

Скриншот 14. Група «Хедер»: фони та кольори навігації.

• Фон хедера. Колір фону верхньої частини сайту.

• Колір фону випадаючого меню. Фон області, яка з’являється при відкритті меню.

• Колір елементів меню. Базовий колір пунктів навігації.

• Колір активних елементів меню. Колір, яким виділяються активні пункти.

• Два нижні рядки дочірніх елементів. На скриншоті обидва мають однаковий підпис «Колір активних дочірніх елементів меню», хоча показують різні кольори. Для точного розмежування цих двох налаштувань перевір їхній вплив на вкладене меню по одному.

Збережи й перевір результат

1. Завершивши налаштування, натисни «Зберегти» внизу панелі стилів.

2. Якщо не хочеш застосовувати поточні зміни панелі, скористайся «Скасувати».

3. Перевір головний заголовок, звичайний текст, кнопки, значки та меню на світлому й темному фоні, якщо використовуєш обидва.

4. Перемкни редактор на телефон і перевір читабельність.

5. Перевір стан збереження сторінки у верхній панелі. Публікацію виконуй окремо, коли весь матеріал готовий.

Стрілка у верхньому лівому куті панелі повертає до попереднього рівня налаштувань, а хрестик праворуч закриває панель. Для явного завершення редагування використовуй її кнопки «Зберегти» або «Скасувати».

Як уникнути типових помилок оформлення

• Текст зливається з фоном: перевір колір текстового стилю і фон тієї самої секції.

• Змінено не ту тему: перед редагуванням перевір назву теми над групами параметрів.

• Усі дії виглядають однаково важливими: залиш основний стиль для головної кнопки, а додаткові дії оформи спокійніше.

• Значок зник на темному фоні: вибери для нього світліший відтінок або іншу контрастну роль палітри.

• Після зміни загальних стилів інша сторінка виглядає інакше: перевір сторінки, які використовують спільне оформлення.

• На комп’ютері все читається, а на телефоні заголовок надто довгий: перевір мобільний вигляд і скороти формулювання, якщо потрібно.