Надайте розділу кольоровий фон, фон із фото або градієнтом.

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

Ви можете заповнити будь-який розділ кольором, фото або градієнтом. Колір і фото беруться з панелі Style, яку мають усі розділи, рядки, колонки й елементи. Розділи додають панель Background effects для градієнтів, фіксованих і паралаксних фото та відео YouTube. У прикладі будується темно-синій розділ із фото міста, білим текстом і градієнтом зверху.

Відео додає фото за розділом, а потім накриває його градієнтом.

Додавання кольору та фото

  1. Натисніть Add Elements у порожній області вмісту й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ і відкрийте More > Settings.
  3. Відкрийте панель Style.
  4. Виберіть темно-синій зразок для Background.
  5. Виберіть білий для Font color.
  6. У розділі Background image натисніть Select Image. Знайдіть у медіабібліотеці, позначте фото й натисніть Insert selected.
  7. Установіть Background style у значення Cover.
  8. Установіть Background position у значення Center center і натисніть Save.
  9. Натисніть + на розділі й виберіть Text на вкладці Content.
  10. Введіть заголовок, наприклад Evening lectures, і один рядок під ним. Установіть для заголовка Heading 2 і відцентруйте обидва рядки на панелі інструментів редактора.
  11. Відкрийте панель Style, установіть Font color у білий колір і натисніть Save.

Додавання градієнта

  1. Знову наведіть курсор на розділ і відкрийте More > Settings.
  2. Відкрийте панель Background effects і встановіть Background effect у значення Gradient.
  3. Виберіть Start color і End color, потім натисніть Save.
  4. Натисніть Save на панелі інструментів, відкрийте меню перегляду (піктограма ока) і виберіть Preview.

Що ви бачите

Після перших кроків фото заповнює весь розділ за білим заголовком. Cover обрізає те, що не вміщується, а Center center тримає середину фото в полі зору. Темно-синій колір видно лише доки фото завантажується або там, куди фото не сягає.

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

Налаштування

Панель Style (кожен розділ, рядок, колонка й елемент)

Налаштування Що робить Типово
Background Колір заливки з вибору кольору або зразка теми Немає
Background image Зображення з медіабібліотеки, вибране через Select Image Немає
Background style Cover заповнює елемент і обрізає; Contain показує все зображення й може лишати проміжки; No repeat показує його один раз у власному розмірі; Repeat мозаїчить його Theme defaults
Background position Яка частина зображення лишається в полі зору після обрізання, наприклад Center center або Left top Theme defaults

Коли налаштовано створення зображень ШІ, Background image також приймає промпт. Див. Створення зображень ШІ.

Панель Background effects (лише розділи)

Ефект фону Що робить Додаткові налаштування
Simple image (типово) Фото прокручується разом зі сторінкою Немає
Fixed image Фото лишається на місці, поки сторінка прокручується поверх нього Немає
Parallax image Фото рухається повільніше за сторінку. Приклад наведено на сторінці Шапка-герой. Parallax speed, Parallax mode (Fixed або Local), Disable on mobile
Gradient Два кольори змішуються по розділу, поверх фото, якщо воно є Start color, End color, Gradient direction (180 градусів іде згори вниз), Start position, End position
YouTube video Приглушене відео YouTube заповнює розділ; позначте Loop, щоб повторювати його YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Фіксований і паралаксний ефекти рухають фото, яке ви встановили на панелі Style. Відео YouTube фото не потребує.

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

  • Панелі Background effects немає. Її мають лише розділи. Наведіть курсор на розділ, а не на рядок, колонку чи елемент, і відкрийте More > Settings.
  • Фото обрізано. Cover обрізає те, що не вміщується в розділ. Змініть Background position, щоб тримати об’єкт у полі зору, або виберіть Contain.
  • Градієнт ховає фото. Градієнт лежить зверху, а непрозорі кольори накривають фото. Зменште непрозорість Start color і End color у виборі кольору.
  • Розділ не показує градієнта. Градієнт потребує обох кольорів. Виберіть Start color і End color.
  • Відео YouTube не відтворюється. YouTube video URL порожнє або не є посиланням на одне відео. Вставте повну адресу відео, як-от https://www.youtube.com/watch?v= з його ID.

Що далі?