---
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%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/hero-%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB'
title: 'Проєктування hero-розділу | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:25:55+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Тут ви створюєте hero-розділ, що заповнює екран: фонове фото, заголовок, один супровідний рядок і кнопку, причому фото рухається повільніше за сторінку, коли відвідувачі гортають. Використовуйте його вгорі будь-якої сторінки.'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:03:43+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Проєктування hero-розділу'
      description: 'Тут ви створюєте hero-розділ, що заповнює екран: фонове фото, заголовок, один супровідний рядок і кнопку, причому фото рухається повільніше за сторінку, коли відвідувачі гортають. Використовуйте його вгорі будь-якої сторінки.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:25:55+0000'
      dateModified: '2026-10-24T20:03:43+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%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/hero-%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB'
      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%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/hero-%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB'
      description: 'Тут ви створюєте hero-розділ, що заповнює екран: фонове фото, заголовок, один супровідний рядок і кнопку, причому фото рухається повільніше за сторінку, коли відвідувачі гортають. Використовуйте його вгорі будь-якої сторінки.'
      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/tutorials/overview) # Проєктування hero-розділу.

 Вивчення 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%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3)
- [Додавання розділу](/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%D0%B8)
- [Зміна вигляду елемента на панелі «Стиль»](/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)

Тут ви створюєте hero-розділ, що заповнює екран: фонове фото, заголовок, один супровідний рядок і кнопку, причому фото рухається повільніше за сторінку, коли відвідувачі гортають. Використовуйте його вгорі будь-якої сторінки. Щоб створити навколо нього цілу сторінку, далі виконайте посібник [Створення маркетингового лендингу](/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%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3).

Відео створює hero-розділ звітного продукту.

  ## Перед початком

- Ваша роль має дозвіл **Edit with DXPR Builder**.
- Медіабібліотека містить широке фото, щонайменше 1920 пікселів завширшки.
- Сторінка відкрита в конструкторі. Для нової перейдіть до **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) і натисніть **Save**.

## Крок 1: додавання розділу

1. Натисніть **Add Elements** на порожній сторінці й виберіть **Section** на вкладці **Layout**. Наведіть на нього курсор і відкрийте **More** > **Settings**.
2. У розділі **HTML classes** виберіть **Align text center**, щоб заголовок, текст і кнопка центрувалися разом.
3. Увімкніть **100% height**, щоб hero-розділ заповнив екран, і **Vertical centering**, щоб вміст був посередині.
4. Відкрийте панель **Style**. У розділі **Background image** натисніть **Select Image**, позначте широке фото й натисніть **Insert selected**.
5. Установіть **Background style** на **Cover**, щоб фото заповнило розділ.
6. Виберіть темний колір **Background**, який показується, доки фото завантажується. Установіть **Font color** на білий, потім натисніть **Save**.

**Порада**

Стисніть фото до менш ніж 500 КБ, щоб hero-розділ завантажувався швидко.

## Крок 2: додавання кнопки

1. Натисніть **+** на розділі й виберіть **Button** на вкладці **Content**.
2. Установіть **Title** на «Start free trial», **Link** на `/trial`, **Type** на **Light** для контрасту на фото й **Size** на **Large**, потім натисніть **Save**.

## Крок 3: додавання заголовка

1. Натисніть **+** на розділі знову й виберіть **Text** на вкладці **Content**. Він стане над кнопкою, бо нові елементи стають угорі.
2. Введіть ваш заголовок, «Reporting that keeps up with your team», і виберіть **Heading 2** у розкривному списку заголовків. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. [Створення SEO-дружніх сторінок](/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%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/seo#step-1-start-the-content-at-heading-2).
3. Додайте один супровідний рядок: «Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required.»
4. На панелі **Style** установіть **Font color** на білий, потім натисніть **Save**.

## Крок 4: додавання паралакса

1. Наведіть курсор на розділ і відкрийте **More** > **Settings** знову.
2. Відкрийте панель **Background effects** і встановіть **Background effect** на **Parallax image**. **Parallax speed** починається з 20; перетягніть до 35 для сильнішого ефекту й натисніть **Save**.

## Крок 5: додавання вмісту під hero-розділом

1. Наведіть курсор на hero-розділ і натисніть **Add Section Below**, щоб сторінка мала вміст для гортання.
2. Натисніть **+** на новому розділі й виберіть **Text** на вкладці **Content**. Введіть заголовок і короткий абзац, установіть перший рядок на **Heading 2** і натисніть **Save**.

## Крок 6: збереження й попередній перегляд

1. Натисніть **Save** на панелі інструментів конструктора.
2. Відкрийте меню перегляду (**піктограма ока**), виберіть **Preview** і гортайте вниз.

## Далі

Не показано у відео:

- **Overlay**: установіть **Background effect** на **Gradient** і виберіть темні **Start color** і **End color** із непрозорістю близько 50%. Текст лишається читабельним на будь-якому фото. Ефект має лише одне значення, тож накладання замінює паралакс.
- **Shorter hero**: вимкніть **100% height** і задайте розділу власні верхній і нижній відступи на панелі **Style**, наприклад 100 пікселів.
- **Wide button**: увімкніть **Block button** для кнопки завширшки зі стовпець.

## Варіації

Альтернативи до показаного у відео:

### Hero-розділ із фоновим відео

1. На панелі **Background effects** установіть **Background effect** на **YouTube video**.
2. Вставте URL відео в поле **YouTube video URL**.
3. У розділі **Video options** позначте **Loop** і **Disable on mobile devices**; звук лишіть вимкненим.

### Hero-розділ лише з градієнтом

Пропустіть фонове зображення й використовуйте ефект **Gradient** із двома суцільними брендовими кольорами для hero-розділу, що швидко завантажується.

### Розділений hero-розділ

1. Додайте **Row** усередині розділу; спочатку він має два рівні стовпці.
2. Розмістіть текст і кнопку в лівому стовпці, а зображення в правому стовпці.

## Що ви бачите

Фото заповнює екран із вашим заголовком, супровідним рядком і кнопкою **Start free trial**, відцентрованими білим кольором угорі. Коли ви гортаєте вниз до другого розділу, фото рухається повільніше за сторінку.

## Якщо hero-розділ виглядає не так, як показано

- **Hero-розділ заввишки лише як його текст.** **100% height** вимкнено. Увімкніть його в налаштуваннях розділу й натисніть **Save**.
- **Фото стоїть на місці, коли ви гортаєте.** **Background effect** досі на **Simple image**, **Parallax speed** дорівнює 0, або під hero-розділом нічого немає, куди гортати. Установіть **Parallax image**, перетягніть **Parallax speed** вище 0 і додайте другий розділ із кроку 5.
- **Заголовок лишається темним на фото.** Елемент Text не має власного **Font color**. Відкрийте його панель **Style** і встановіть **Font color** на білий.

## Що далі?

- [Лендинг](/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%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3), щоб створити повну сторінку навколо hero-розділу
- [Розділи](/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%D0%B8) для параметрів макета розділу
- [Довідник вкладки стилю](/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) для всіх параметрів стилізації