--- 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/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E' title: 'Зміна вигляду елемента на панелі «Стиль» | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:19:08+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-24T19:19:08+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/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E' 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/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E' 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/%D1%82%D0%BB%D0%BE) Скористайтеся панеллю **Стиль**, коли один елемент на одній сторінці потребує власного вигляду: кольорова картка, приглушений логотип, кнопка в кольорах кампанії. Кожну зміну ви бачите на сторінці одразу. Для вигляду, спільного для кожної сторінки, наприклад кольору всіх кнопок, натомість змініть свою тему. Одна правка там оновлює весь сайт. Відео повторює перший рецепт нижче: воно приглушує логотип партнера, доки вказівник його не досягне. ## Перш ніж почати - Відкрийте сторінку в 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). - **Зберегти** у діалозі зберігає зміну в редакторі. **Зберегти** на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено». Налаштування на панелі **Стиль** належать одному елементу. Вони зберігаються у вмісті цієї сторінки, а не у вашій темі. Якщо ваш фірмовий колір зміниться наступного року, кожен елемент, забарвлений вручну, зберігає старий колір, доки ви його не відредагуєте. - **Повторно використовуйте вигляд**, зберігаючи оформлений елемент через **Більше** > **Зберегти як шаблон** або надаючи елементам спільний клас у розділі **Класи 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%B1%D0%B0%D0%B3%D0%B0%D1%82%D0%BE%D1%80%D0%B0%D0%B7%D0%BE%D0%B2%D1%96-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8/%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D0%B0) і [Ідентифікатор 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). - **Вибирайте кольори зі зразків**, коли ваш сайт їх показує. Вони надходять із колірної палітри вашої теми. Зразок копіює колір, тож пізніша зміна палітри його не оновлює. ## Рецепт: приглушуйте логотипи, доки вказівник їх не досягне Ряд логотипів партнерів виглядає спокійніше, коли логотипи приглушено. Цей рецепт затемнює один логотип і повертає його під час наведення. 1. Наведіть вказівник на елемент **Зображення**, що показує логотип, натисніть **Більше**, потім **Налаштування**. 2. Відкрийте панель **Стиль** і перетягніть **Непрозорість** до 0,5. Логотип тьмяніє під час перетягування. 3. Відкрийте панель **Стиль наведення** під нею й перетягніть **Непрозорість** до 1. 4. Натисніть **Зберегти** у діалозі, потім **Зберегти** на панелі інструментів. 5. Відкрийте меню перегляду (значок ока) на панелі інструментів конструктора, виберіть **Попередній перегляд** і наведіть вказівник на логотип. Він переходить на повну силу й знову тьмяніє, коли вказівник іде. Повторіть кроки для кожного логотипа в ряду. ## Рецепт: кнопка в кольорах кампанії Ваша тема надає кнопкам колір наведення. **Тло**, задане вами, також замінює цей колір наведення, тож задайте обидва. 1. Наведіть вказівник на елемент **Кнопка**, натисніть **Більше**, потім **Налаштування**. 2. На панелі **Стиль** виберіть **Тло** і **Колір шрифту**. Натисніть зразок або введіть свій код кольору, наприклад #e4002b, у поле кольору. 3. На панелі **Стиль наведення** виберіть темніше **Тло**. 4. Натисніть **Зберегти** у діалозі, потім **Зберегти** на панелі інструментів. 5. Виберіть **Попередній перегляд** у меню перегляду й наведіть вказівник на кнопку. Вона стане темнішого кольору. ## Що ви бачите Поки діалог відкрито, елемент показує кожну зміну. У режимі **Попередній перегляд** приглушений логотип переходить на повну силу під вказівником, а кнопка кампанії стає темнішого кольору. Обидва вигляди зберігаються після перезавантаження сторінки, бо **Зберегти** на панелі інструментів їх зберегло. ## Що приймає кожен елемент керування | Елемент керування | Діапазон | Одиниця | |---|---|---| | **Колір шрифту**, **Колір межі**, **Тло** | будь-який колір із прозорістю | колір | | **Зображення тла** | малюнок із медіабібліотеки або URL-адреса | | | **Стиль тла**, **Положення тла**, **Стиль межі** | список, що починається зі **Стандарти теми** | | | **Розмір шрифту** | від 0 до 100 | px | | **Радіус межі** | від 0 до 100 | px | | **Непрозорість** | від 0 до 1 із кроком 0,01 | | | **Падаюча тінь** | рівні від 0 до 5 | | | Блокова модель **Зовнішній відступ** | від -200 до 200 | **PX** або **%** | | Блокова модель **Внутрішній відступ** | від 0 до 200 | **PX** або **%** | | Блокова модель **Межа** | від 0 до 50 | px | | Ширина × висота блокової моделі | від 0 до 2000 | **PX** або **%** | Введене значення поза діапазоном обрізається до найближчої межі. Блокову модель і її замки пояснено на сторінці [відступів](/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%D1%96%D0%B4%D1%81%D1%82%D1%83%D0%BF%D0%B8). ## Як поводяться налаштування ### Стандарти теми Порожній колір, повзунок на 0, список на **Стандарти теми** і сторона блокової моделі, що показує «-», означають те саме. DXPR Builder нічого не записує, і вирішує ваша тема. Тож **Непрозорість** 0 не приховує елемент, а **Розмір шрифту** 0 зберігає розмір теми. Щоб повернутися до вигляду теми, натисніть **Очистити** у засобі вибору кольору, посуньте повзунок на 0 або знову виберіть **Стандарти теми**. ### Куди потрапляють налаштування Кожне налаштування **Стиль**, крім **Падаюча тінь**, зберігається як вбудований стиль на елементі. Вбудовані стилі перемагають звичайний CSS теми. Дві речі все ще перемагають їх: правила теми з позначкою `!important` і службові класи Bootstrap у розділі **Класи HTML**, які теж мають `!important`. На деяких елементах налаштування потрапляють на внутрішню частину. На **Кнопці** вони оформлюють саму кнопку, на **Зображенні** малюнок, на **Посиланні** посилання, а на **Карті** фрейм карти. ### Кожен розмір екрана Налаштування стилю не мають контрольних точок. 64 px внутрішнього відступу це 64 px і на телефоні. Відсоткові значення ростуть і зменшуються разом із шириною сторінки. Щоб мати різні значення для кожного розміру екрана, використовуйте адаптивні класи, як показано на сторінці [Ідентифікатор 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). ### Непрозорість приглушує все всередині **Непрозорість** діє на весь елемент. Вона приглушує блок, межу, текст і кожен елемент усередині нього. Для прозорого блока за суцільним текстом залиште **Непрозорість** на 0. Натомість виберіть **Тло** з певною прозорістю: засіб вибору кольору має для цього власний повзунок непрозорості. ### Стиль наведення **Стиль наведення** це окрема панель під **Стиль**. Вона має ті самі елементи керування, включно з власною блоковою моделлю. Її значення застосовуються, поки вказівник над елементом. На відміну від значень **Стиль**, вони самі позначені `!important`, тож перемагають ваші значення **Стиль**, службові класи в розділі **Класи HTML** і більшість правил теми. Лише **Падаюча тінь** з’являється плавно за 0,15 секунди. Інші зміни під час наведення перемикаються одразу, хіба що ваша тема їх анімує. Кнопки Bootstrap плавно змінюють кольори за 0,15 секунди. Телефони й планшети не мають вказівника. Відвідувачі там бачать вигляд наведення лише після дотику, тож ніколи не розміщуйте в ньому потрібну їм інформацію. ### Елементи з власними налаштуваннями Деякі елементи мають власне налаштування для тієї самої роботи. Перемагає їхнє власне налаштування, а елемент керування **Стиль** нічого не робить. | Елемент | Ігнорує в «Стилі» | Використовуйте натомість | |---|---|---| | Круговий лічильник | **Тло**, **Розмір шрифту**, ширина × висота | **Колір тла** і **Розмір** у розділі **Загальне**, **Розмір шрифту** у розділі **Вміст кола** | | Індикатор прогресу | **Тло**, ширина × висота | **Колір заду**, **Колір переду** і **Висота смуги** у розділі **Загальне** | | Роздільник | **Тло**, ширина | **Колір** і **Довжина** у розділі **Загальне** | | Числовий лічильник | **Розмір шрифту** | **Розмір шрифту** у розділі **Загальне** | | Зображення | ширина × висота | **Ширина зображення** і **Висота зображення** у розділі **Загальне** | | Карта | ширина × висота | **Ширина карти** і **Висота карти** у розділі **Загальне** | | Біжучий рядок | ширина × висота | **Ширина зображення** і **Висота** у розділі **Загальне** | | Відео, Локальне відео | ширина | **Ширина відео** у розділі **Загальне** | | Позиціоновані шари | ширина × висота | **Ширина** і **Висота** у розділі **Загальне** | ## Якщо ви не бачите своєї зміни - **Зміна зникла, коли діалог закрився.** Ви закрили його кнопкою **Скасувати**, значком закриття або клавішею Escape, що повернуло старі налаштування. Зробіть зміну знову й натисніть **Зберегти** у діалозі. - **Зміна зникла після перезавантаження сторінки.** **Зберегти** у діалозі зберігає зміну лише в редакторі. Натисніть **Зберегти** на панелі інструментів, перш ніж залишити сторінку. - **Вигляд теми залишається.** Службовий клас Bootstrap у розділі **Класи HTML** або правило теми з `!important` перемагає. Відкрийте панель **Загальне** і приберіть чип класу, наприклад **Основне тло**, або запитайте свого вебмайстра про правило теми. - **Елемент керування взагалі нічого не робить.** Деякі елементи мають власне налаштування для тієї самої роботи. Див. [Елементи з власними налаштуваннями](#elements-with-their-own-settings). - **Кнопка більше не змінює колір під час наведення.** Ваше **Тло** замінює колір наведення теми. Задайте **Тло** також на панелі **Стиль наведення**. - **Текст став блідим разом із блоком.** **Непрозорість** приглушує весь елемент. Поверніть її на 0 і скористайтеся **Тлом** із прозорістю. - **Непрозорість 0 не приховує елемент.** 0 означає **Стандарти теми**. Натомість додайте клас **Приховати елемент (d-none)** у розділі **Класи 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/%D1%82%D0%BB%D0%BE): розмістіть фото за заголовком і збережіть заголовок читабельним.