Зміна розміру й кольору тексту.

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

Відео повторює рецепт нижче: воно перетворює одне речення на лід із більшим розміром і фірмовим кольором.

Перш ніж почати

• Відкрийте сторінку в DXPR Builder; наведення на елемент показує його панель керування з пунктом Більше. Уперше в конструкторі? Див. Ваша перша сторінка.
• Зберегти у діалозі зберігає зміну в редакторі. Зберегти на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено».
• Скористайтеся панеллю Стиль для одного елемента: ліда, цитати, заголовка на фото.
• Скористайтеся текстовим редактором для частини тексту й для структури. Зробіть заголовок справжнім заголовком через Заголовок 2 або Заголовок 3, а не більшим рядком Звичайний. Програми читання з екрана й пошукові системи читають рівень, а не розмір.
• Скористайтеся списком «Стилі» редактора для фірмових стилів тексту. Ваш вебмайстер задає їх у розділі Загальні налаштування > Текстовий редактор > Власні стилі (/admin/dxpr_studio/dxpr_builder/settings).
• Скористайтеся своєю темою для шрифту тіла, розмірів заголовків і кольорів посилань.

Рецепт: лід у вашому фірмовому кольорі

1. Додайте елемент Текст і введіть одне або два речення як текст Звичайний.
2. Наведіть вказівник на нього, натисніть Більше, потім Налаштування.
3. Відкрийте панель Стиль і перетягніть Розмір шрифту до 20. Текст росте під час перетягування.
4. Відкрийте Колір шрифту і виберіть свій фірмовий колір зі зразків або введіть його код, наприклад #1a4d8f, у поле кольору.
5. Натисніть Зберегти у діалозі. За 20 px речення рахується звичайним текстом, тож йому потрібен контраст 4,5 до 1. Введіть свій код кольору й колір тла у засіб перевірки контрасту; біла сторінка це #ffffff.
6. Натисніть Зберегти на панелі інструментів.

Що ви бачите

Речення виростає до 20 px і стає вашого фірмового кольору. Заголовки й посилання всередині того самого текстового елемента теж беруть цей колір, але заголовки зберігають власний розмір.

Як працюють налаштування

Розмір шрифту

Розмір шрифту іде від 0 до 100 px, а 0 зберігає розмір вашої теми. Значення однакове на кожному розмірі екрана: рядок 48 px на комп’ютері це 48 px і на телефоні.

Розмір лягає на елемент, а текст із власним розміром його зберігає. Заголовки зазвичай так і роблять, бо Bootstrap визначає їхній розмір із базового розміру сторінки. Текст, якому ви задали розмір інструментом розміру шрифту редактора, теж зберігає свій розмір.

Колір шрифту

Засіб вибору показує палітру вашої теми як зразки, коли ваш сайт її має. Він також має повзунок непрозорості й поле, куди вводиться код кольору, наприклад #1a4d8f. Очистити у засобі вибору повертає текст до кольору теми.

На елементі вмісту, як-от Текст, Картка чи Сповіщення, колір сягає всього всередині, включно з заголовками й посиланнями. На Розділі він сягає лише тексту без власного кольору. Заголовки й посилання, які забарвлює ваша тема, зберігають там свій колір.

Класи кольорів Bootstrap позначено !important, тож вони перемагають Колір шрифту. Один приклад це чип Основний колір тексту під Класи HTML. Інший це стиль редактора, як-от Основний фірмовий текст, на частині тексту.

На Кнопці колір лягає на саму кнопку й замінює колір наведення теми. Задайте Колір шрифту також на панелі Стиль наведення.

Наведення

Панель Стиль наведення має власні Колір шрифту і Розмір шрифту. Більший розмір під час наведення штовхає вміст навколо нього, тож зміна кольору зазвичай спокійніший вибір.

Контраст

Щоб текст могли читати більшість людей, правила WCAG 2 рівня AA вимагають такий контраст:

На фото вимірюйте на тлі найсвітлішої частини за текстом. Перевірте свою пару кольорів засобом перевірки контрасту, наприклад WebAIM.

Якщо ви цього не бачите

• Заголовок усередині тексту не виріс. Заголовок має власний розмір від вашої теми. Виберіть інший рівень заголовка в текстовому редакторі або скористайтеся його інструментом розміру шрифту.
• Посилання й заголовки зберігають свій колір. На розділі текст із власним кольором теми його зберігає. Натомість задайте Колір шрифту на текстовому елементі.
• Колір шрифту взагалі нічого не робить. Клас кольору, наприклад Основний колір тексту або Білий текст під Класи HTML, перемагає. Приберіть його чип.
• Частина тексту зберігає інший колір. Стиль редактора на цій частині, наприклад Основний фірмовий текст, перемагає. Приберіть стиль у текстовому редакторі.
• Розмір шрифту нічого не робить на лічильнику. Круговий і числовий лічильники мають власний Розмір шрифту. Скористайтеся ним.
• Колір зразка більше не відповідає бренду. Зразок копіює колір, коли ви його вибираєте. Після зміни палітри виберіть зразок знову.
• Фірмовий колір не проходить перевірку контрасту. Виберіть його темніший відтінок. Або зробіть текст принаймні 24 px, щоб застосовувалася ціль 3 до 1.
• Текст важко читати на фото. Контраст надто низький. Затемніть фото градієнтом, як показано на сторінці Тло.
• Кнопка втратила колір тексту наведення. Ваш Колір шрифту замінює колір наведення теми. Задайте Колір шрифту також на панелі Стиль наведення.

Що далі?

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