Розмістіть колір або фото за вмістом.

Вивчення DXPR BuilderСтворення сторінокСтилізація елементів

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

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

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

  • Відкрийте сторінку в DXPR Builder; наведення на елемент показує його панель керування з пунктом Більше. Уперше в конструкторі? Див. Ваша перша сторінка.
  • Зберегти у діалозі зберігає зміну в редакторі. Зберегти на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено».
  • Скористайтеся розділом для повної смуги сторінки. Лише розділ має Ефекти тла.
  • Скористайтеся елементом «Текст» або «Картка» для кольорового блока за кількома рядками всередині стовпця.
  • Скористайтеся своєю темою для тла на кожній сторінці, наприклад тіла сторінки або нижнього колонтитула.
  • Тримайте слова поза фото. Фонове зображення не має альтернативного тексту, тож програми читання з екрана його пропускають. Розмістіть своє повідомлення в заголовку зверху.

Рецепт: читабельний заголовок на фото

Білий текст на строкатому фото важко читати. Темний градієнт поверх фото це виправляє й працює далі, коли ви міняєте фото. Вам потрібен розділ, що тримає ваш заголовок у текстовому елементі.

  1. Наведіть вказівник на Розділ, натисніть Більше, потім Налаштування.
  2. Відкрийте панель Стиль і натисніть Вибрати зображення під Зображення тла. Виберіть фото. З’явиться мініатюра зі списком розмірів зображення.
  3. У списку розмірів зображення виберіть розмір принаймні завширшки з найширший екран, для якого проєктуєте, або Оригінальне зображення (без зміни розміру). Уникайте Оптимізувати для швидкого завантаження для повної смуги.
  4. Задайте для параметра Стиль тла значення Покриття, а для Положення тла значення Центр–центр.
  5. Відкрийте панель Ефекти тла і задайте для параметра Ефект тла значення Градієнт. Ваше фото залишається; градієнт лежить поверх нього.
  6. У полі кольору Початковий колір введіть rgba(0, 0, 0, 0.6): чорний на 60%. Введіть rgba(0, 0, 0, 0.3) для Кінцевий колір. Залиште Напрямок градієнта на 180, щоб вуаль ішла зверху вниз.
  7. Натисніть Зберегти у діалозі. Розділ показує фото під темною вуаллю.
  8. Наведіть вказівник на елемент Текст, натисніть Більше, потім Налаштування. На його панелі Стиль задайте білий Колір шрифту і натисніть Зберегти.
  9. Натисніть Зберегти на панелі інструментів.

Панель «Ефекти тла» розділу з вибраним градієнтом, темними напівпрозорими зразками кольорів під «Початковий колір» і «Кінцевий колір» і напрямком 180, поруч із фото столу, затемненим під білим заголовком

Перевірте заголовок на тлі найсвітлішої частини фото. Цільтеся на контраст принаймні 4,5 до 1 або 3 до 1 для великих заголовків; сторінка типографіки пояснює ці цілі. Досі важко читати? Підвищте обидва значення, наприклад до 0,8 і 0,5.

Що ви бачите

Панель «Стиль» розділу з бірюзовим фото як зображенням тла й стилем тла «Покриття» поруч із цим розділом із фото за білим заголовком Spring Open Day

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

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

Елемент керування Що робить
Тло Колір за вмістом. Повзунок непрозорості засобу вибору робить його прозорим.
Зображення тла Зображення за вмістом: через Вибрати зображення, за URL-адресою або через Генерування зображень ШІ, якщо ваш сайт його не вимкнув.
Стиль тла Як зображення заповнює елемент. Див. наступну таблицю.
Положення тла Точка, до якої пришпилено зображення. У разі Покриття воно вирішує, яка частина фото залишається видимою.
Стиль тла Результат
Стандарти теми Якщо ваша тема не каже інакше, зображення повторюється у власному розмірі з верхнього лівого кута.
Покриття Зображення заповнює елемент, а краї, що не вміщуються, обрізаються. Найкраще для фото.
Вміщення Усе зображення показується один раз. З двох боків можуть залишитися порожні смуги. Найкраще для логотипів.
Без повторення Одна копія у власному розмірі.
Повторення Зображення мозаїкою вкриває елемент. Добре для візерунків.

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

Розмір Оптимізувати для швидкого завантаження зменшує зображення щонайбільше до 1024 px завширшки й зберігає його як WebP. Це підходить блоку, але виглядає м’яко на повній смузі великого екрана.

Те саме зображення завантажується на кожному розмірі екрана, включно з телефонами. Панель Стиль наведення має власні Тло і Зображення тла, тож блок може змінювати колір або міняти своє зображення під час наведення.

Ефекти тла розділу

Ці ефекти потребують розділу. Фіксоване зображення і Паралакс-зображення переміщують фото із Зображення тла, тож спочатку задайте фото.

Ефект тла Що бачать відвідувачі Налаштування
Просте зображення Фото прокручується разом зі сторінкою. Це стандарт. немає
Фіксоване зображення Фото стоїть на місці, поки вміст прокручується поверх нього. немає
Паралакс-зображення Фото прокручується повільніше за вміст. Швидкість паралакса (від 0 до 100; вибір Паралакс-зображення задає 20, коли там 0), Режим паралакса (Фіксований або Локальний), Вимкнути на мобільних (екрани вужче 481 px)
Градієнт Суміш двох кольорів окремо або поверх фото. Початковий колір, Кінцевий колір, Напрямок градієнта (від 1 до 360 градусів; 180 іде зверху вниз), Початкова позиція, Кінцева позиція
Відео YouTube Відео без звуку відтворюється, поки розділ на екрані, і ставиться на паузу, коли прокручується геть. URL-адреса відео YouTube, Час початку в секундах, Час зупинки в секундах, Параметри відео

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

Якщо ви не бачите тла

  • Фото показується як тонка смуга. Тло не додає висоти; розділ заввишки як його вміст і внутрішні відступи. Додайте вмісту або увімкніть Висота 100% на панелі Загальне. Для більших внутрішніх відступів див. рецепт «Вищий розділ».
  • Фото повторюється або показує лише один кут. Стиль тла: Стандарти теми. Виберіть Покриття.
  • Фото виглядає м’яко на широкому екрані. Оптимізувати для швидкого завантаження робить його щонайбільше 1024 px завширшки. Виберіть ширший розмір у списку розмірів зображення.
  • Фото приховано за суцільним чорним. Кольори градієнта не мають прозорості. Завершіть кожне значення числом менше 1, наприклад rgba(0, 0, 0, 0.6).
  • Заголовок залишається темним. Клас кольору під Класи HTML текстового елемента або правило теми з !important перемагає. Приберіть чип або див. типографіку.
  • Тло зникло після перезавантаження сторінки. Зберегти у діалозі зберігає зміну лише в редакторі. Натисніть Зберегти на панелі інструментів.
  • Колір не показується. Фото його вкриває. Для відтінку поверх фото скористайтеся значенням Градієнт у розділі Ефекти тла.
  • Початкова й кінцева позиції нічого не змінюють. Розділ має Зображення тла, тож градієнт іде від краю до краю. Натомість скористайтеся Напрямком градієнта й прозорими кольорами.
  • Перемагає колір класу. Такий клас, як Основне тло під Класи HTML, перемагає ваше Тло. Приберіть його чип.
  • Тло не діє на круговий лічильник, індикатор прогресу чи роздільник. Ці елементи використовують власні кольори. Задайте Колір тла, Колір заду або Колір на панелі Загальне.

Що далі?

  • Типографіка: задайте колір заголовка на своєму фото й перевірте його контраст.