--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0' title: 'Зміна розміру й кольору тексту | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T20:07:22+00:00' updated: '2026-10-24T20:08:10+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Зробіть лід більшим, наберіть цитату своїм фірмовим кольором або зробіть заголовок білим на темному фото. За допомогою Розмір шрифту і Колір шрифту на панелі Стиль ви змінюєте весь текст одного елемента. Для частини тексту натомість скористайтеся панеллю інструментів текстового редактора. Для розмірів і кольорів, спільних для кожної сторінки, скористайтеся своєю темою. Відео повторює рецепт нижче: воно перетворює одне речення на лід із більшим розміром і фірмовим кольором. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:08:10+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Зміна розміру й кольору тексту' description: |- Зробіть лід більшим, наберіть цитату своїм фірмовим кольором або зробіть заголовок білим на темному фото. За допомогою Розмір шрифту і Колір шрифту на панелі Стиль ви змінюєте весь текст одного елемента. Для частини тексту натомість скористайтеся панеллю інструментів текстового редактора. Для розмірів і кольорів, спільних для кожної сторінки, скористайтеся своєю темою. Відео повторює рецепт нижче: воно перетворює одне речення на лід із більшим розміром і фірмовим кольором. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T20:07:22+0000' dateModified: '2026-10-24T20:08:10+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0' articleSection: 'Стилізація елементів' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0' description: |- Зробіть лід більшим, наберіть цитату своїм фірмовим кольором або зробіть заголовок білим на темному фото. За допомогою Розмір шрифту і Колір шрифту на панелі Стиль ви змінюєте весь текст одного елемента. Для частини тексту натомість скористайтеся панеллю інструментів текстового редактора. Для розмірів і кольорів, спільних для кожної сторінки, скористайтеся своєю темою. Відео повторює рецепт нижче: воно перетворює одне речення на лід із більшим розміром і фірмовим кольором. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Стилізація елементів](/uk/hc/documentation/learn-dxpr-builder/element-settings) # Зміна розміру й кольору тексту. Вивчення DXPR BuilderСтворення сторінокСтилізація елементів ## In this guide Related guides - [Посилання на розділи й повторне використання стилів через класи](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css) Зробіть лід більшим, наберіть цитату своїм фірмовим кольором або зробіть заголовок білим на темному фото. За допомогою **Розмір шрифту** і **Колір шрифту** на панелі **Стиль** ви змінюєте весь текст одного елемента. Для частини тексту натомість скористайтеся панеллю інструментів текстового редактора. Для розмірів і кольорів, спільних для кожної сторінки, скористайтеся своєю темою. Відео повторює рецепт нижче: воно перетворює одне речення на лід із більшим розміром і фірмовим кольором. ## Перш ніж почати - Відкрийте сторінку в DXPR Builder; наведення на елемент показує його панель керування з пунктом **Більше**. Уперше в конструкторі? Див. [Ваша перша сторінка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0). - **Зберегти** у діалозі зберігає зміну в редакторі. **Зберегти** на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено». - **Скористайтеся панеллю Стиль** для одного елемента: ліда, цитати, заголовка на фото. - **Скористайтеся текстовим редактором** для частини тексту й для структури. Зробіть заголовок справжнім заголовком через **Заголовок 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 вимагають такий контраст: | Текст | Контраст із його тлом | |---|---| | Звичайний текст | принаймні 4,5 до 1 | | Великий текст: 24 px (18 pt) або більше, або 19 px (14 pt) або більше жирним | принаймні 3 до 1 | На фото вимірюйте на тлі найсвітлішої частини за текстом. Перевірте свою пару кольорів засобом перевірки контрасту, наприклад [WebAIM](https://webaim.org/resources/contrastchecker/). ## Якщо ви цього не бачите - **Заголовок усередині тексту не виріс.** Заголовок має власний розмір від вашої теми. Виберіть інший рівень заголовка в текстовому редакторі або скористайтеся його інструментом розміру шрифту. - **Посилання й заголовки зберігають свій колір.** На розділі текст із власним кольором теми його зберігає. Натомість задайте **Колір шрифту** на текстовому елементі. - **Колір шрифту взагалі нічого не робить.** Клас кольору, наприклад **Основний колір тексту** або **Білий текст** під **Класи HTML**, перемагає. Приберіть його чип. - **Частина тексту зберігає інший колір.** Стиль редактора на цій частині, наприклад **Основний фірмовий текст**, перемагає. Приберіть стиль у текстовому редакторі. - **Розмір шрифту нічого не робить на лічильнику.** Круговий і числовий лічильники мають власний **Розмір шрифту**. Скористайтеся ним. - **Колір зразка більше не відповідає бренду.** Зразок копіює колір, коли ви його вибираєте. Після зміни палітри виберіть зразок знову. - **Фірмовий колір не проходить перевірку контрасту.** Виберіть його темніший відтінок. Або зробіть текст принаймні 24 px, щоб застосовувалася ціль 3 до 1. - **Текст важко читати на фото.** Контраст надто низький. Затемніть фото градієнтом, як показано на сторінці [Тло](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%BB%D0%BE). - **Кнопка втратила колір тексту наведення.** Ваш **Колір шрифту** замінює колір наведення теми. Задайте **Колір шрифту** також на панелі **Стиль наведення**. ## Що далі? - [Ідентифікатор HTML і класи](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css): повторно використовуйте стиль тексту через клас замість задавання його на кожному елементі.