---
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/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BF%D0%BE%D1%81%D0%BB%D1%83%D0%B3'
title: 'Створення сторінки послуг | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:20:41+00:00'
updated: '2026-10-24T20:15:47+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Тут ви створюєте сторінку, що перелічує ваші пропозиції. Вона має заголовок, три послуги з піктограмами, одну послугу детально поруч із фото, логотипи клієнтів і заклик до дії. Використовуйте її, коли продаєте кілька послуг.'
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:15:47+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:20:41+0000'
      dateModified: '2026-10-24T20:15:47+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/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BF%D0%BE%D1%81%D0%BB%D1%83%D0%B3'
      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/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BF%D0%BE%D1%81%D0%BB%D1%83%D0%B3'
      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/tutorials/overview) # Створення сторінки послуг.

 Вивчення 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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BD%D0%B0%D1%87%D0%BE%D0%BA)
- [Додавання біжучого рядка](/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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B1%D1%96%D0%B6%D1%83%D1%87%D0%B8%D0%B9-%D1%80%D1%8F%D0%B4%D0%BE%D0%BA)

Тут ви створюєте сторінку, що перелічує ваші пропозиції. Вона має заголовок, три послуги з піктограмами, одну послугу детально поруч із фото, логотипи клієнтів і заклик до дії. Використовуйте її, коли продаєте кілька послуг. Для сторінки про одну пропозицію натомість виконайте посібник [Створення маркетингового лендингу](/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).

Відео створює сторінку послуг цифрової агенції.

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

- Ваша роль має дозвіл **Edit with DXPR Builder**.
- Медіабібліотека містить фото для детальної послуги й чотири логотипи клієнтів.
- Сторінка відкрита в конструкторі. Для нової перейдіть до **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) і натисніть **Save**.
- На DXPR CMS приховайте заголовок сторінки теми на цій сторінці: у формі її редагування відкрийте **DXPR Theme Settings** і позначте **Page Title** у розділі **DXPR Hide Regions**. **Title** елемента Jumbotron тоді буде єдиним 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).
- Нові елементи стають угорі свого розділу чи стовпця. Додавайте елементи стовпця у зворотному порядку або потім перетягніть їх на місце.

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

1. Натисніть **Add Elements** на порожній сторінці й виберіть **Section** на вкладці **Layout**. Наведіть на нього курсор, відкрийте **More** > **Settings**, виберіть темно-синій **Background** на панелі **Style** і натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Jumbotron** на вкладці **Content**.
3. Установіть **Title** на «Our services», **Lead** на один рядок про ваші пропозиції, а **Type** на **Primary**, потім натисніть **Save**.

## Крок 2: додавання огляду послуг

1. Наведіть курсор на розділ і натисніть **Add Section Below**. Дайте новому розділу клас **Align text center**.
2. Натисніть **+** на розділі й виберіть **Row**. Натисніть його піктограму сітки (**Column layout**), виберіть пресет **1/3 + 1/3 + 1/3** і натисніть **Save**.
3. Натисніть **+** у першому стовпці й виберіть **Text**. Введіть «Design» як **Heading 3**, додайте один рядок і натисніть **Save**.
4. Натисніть **+** у тому самому стовпці й виберіть **Icon**; він стане над текстом. Виберіть набір **Font Awesome Free Solid**, знайдіть `palette` і натисніть піктограму. Установіть **Size** на **Very Large (3x)**, відкрийте **Icon utilities**, установіть **Style** на **Circle** і натисніть **Save**.
5. Повторіть для «Development» з `code`, а для «Marketing» з `bullhorn`.

## Крок 3: додавання однієї послуги детально

1. Додайте третій розділ за допомогою **Add Section Below**, потім **Row**; спочатку він має два рівні стовпці.
2. Натисніть **+** у лівому стовпці й виберіть **Image**. Натисніть **Select Image**, позначте фото й натисніть **Insert selected**. Введіть **Alt attribute** на панелі **SEO** і натисніть **Save**.
3. Натисніть **+** у правому стовпці й виберіть **Button**. Установіть **Title** на «Get a quote», **Link** на `/contact`, а **Type** на **Primary**, потім натисніть **Save**.
4. Натисніть **+** у правому стовпці знову й виберіть **Text**; він стане над кнопкою. Введіть «Design» як **Heading 2**, додайте опис і склад послуги й натисніть **Save**.

## Крок 4: додавання логотипів клієнтів

1. Додайте четвертий розділ і відкрийте його **More** > **Settings**. Виберіть **Align text center** у розділі **HTML classes** і світло-сірий **Background** на панелі **Style**. Натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Marquee**. Видаліть три зразки зображень кнопкою **×** на кожному. Натисніть **Select Image**, знайдіть ваші логотипи, позначте чотири з них і натисніть **Insert selected**. Увімкніть **Gray scale** і натисніть **Save**.
3. Натисніть **+** на розділі знову й виберіть **Text**; він стане над бігучим рядком. Введіть «Trusted by leading brands» як **Heading 2** і натисніть **Save**.

## Крок 5: додавання заклику до дії

1. Додайте п’ятий розділ і відкрийте його **More** > **Settings**. Виберіть **Align text center** у розділі **HTML classes**, потім фіолетовий **Background** і білий **Font color** на панелі **Style**. Натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Button**. Установіть **Title** на «Schedule a consultation», **Link** на `/contact`, **Type** на **Light** і **Size** на **Large**, потім натисніть **Save**.
3. Натисніть **+** знову й виберіть **Text**; він стане над кнопкою. Введіть «Ready to get started?» як **Heading 2** і додайте один рядок. Установіть **Font color** на білий і натисніть **Save**.

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

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

## Далі

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

- **One detail section per service**: повторіть крок 3 для Development і Marketing. Увімкніть **Mirror row** у налаштуваннях кожного другого рядка, щоб фото чергували боки на планшетах і комп’ютерах.
- **Jump links**: установіть **HTML ID** кожного детального розділу (`design`, `development`, `marketing`). Додайте **Button** під кожним оглядовим текстом із **Link** `#design` і так далі.
- **Testimonials**: додайте **Block quote** для кожного клієнта над логотипами.

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

Темно-синя смуга відкриває сторінку, з «Our services» великим білим шрифтом над однорядковим підсумком. Далі йдуть три центровані послуги, кожна це піктограма в колі над назвою й рядком. Design отримує власну смугу з фото, описом і кнопкою **Get a quote**. Сірі логотипи клієнтів пропливають на світлій смузі, а фіолетова смуга завершує сторінку.

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

- **Бігучий рядок досі показує зразки логотипів.** Три зразки зображень лишаються, доки ви їх не видалите. Відкрийте налаштування бігучого рядка, натисніть **×** на кожному зразку й збережіть.
- **Логотипи кольорові.** **Gray scale** вимкнено. Відкрийте налаштування бігучого рядка, увімкніть його й натисніть **Save**.
- **Піктограми не мають кола.** **Style** міститься на панелі **Icon utilities**, а не в **General**. Відкрийте налаштування піктограми, відкрийте **Icon utilities** і встановіть **Style** на **Circle**.
- **Ваші зміни зникли після перезавантаження.** Ви покинули сторінку, не натиснувши **Save** на панелі інструментів конструктора. Якщо Save показує помилку, див. [Зміни не зберігаються](/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/%D1%83%D1%81%D1%83%D0%BD%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D0%B5%D0%B9/%D0%B7%D0%B1%D0%B5%D1%80%D0%B5%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5-%D0%B2%D0%B4%D0%B0%D1%94%D1%82%D1%8C%D1%81%D1%8F).

## Що далі?

- [Лендинг](/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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BD%D0%B0%D1%87%D0%BE%D0%BA) для розмірів і стилів
- [Елемент бігучого рядка](/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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B1%D1%96%D0%B6%D1%83%D1%87%D0%B8%D0%B9-%D1%80%D1%8F%D0%B4%D0%BE%D0%BA) для налаштувань смуги логотипів