---
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%D1%80%D0%BE-%D0%BD%D0%B0%D1%81'
title: 'Створення сторінки «Про нас» | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:59:32+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:59:32+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%D1%80%D0%BE-%D0%BD%D0%B0%D1%81'
      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%D1%80%D0%BE-%D0%BD%D0%B0%D1%81'
      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%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3-%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D0%B0)

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

Відео створює сторінку для дизайн-студії в Роттердамі.

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

- Ваша роль має дозвіл **Edit with DXPR Builder**.
- Медіабібліотека містить фото вашого офісу, команди чи продукту.
- Сторінка існує: перейдіть до **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`), введіть «About Us» як **Title** і натисніть **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**.
2. Наведіть курсор на розділ і відкрийте **More** > **Settings**. Відкрийте панель **Style**, виберіть темний зразок **Background** і натисніть **Save**.
3. Натисніть **+** на розділі й виберіть **Jumbotron** на вкладці **Content**.
4. Введіть вашу місію як **Title**: «We build websites people enjoy using».
5. Введіть супровідне речення в полі **Lead**: «A 24-person studio in Rotterdam working with brands across Europe since 2012.»
6. Установіть **Type** на **Primary** для білого тексту на вашому основному кольорі, потім натисніть **Save**.

## Крок 2: розповідь історії компанії

1. Наведіть курсор на розділ і натисніть **Add Section Below**, **+** під ним.
2. Натисніть **+** на новому розділі й виберіть **Row**; спочатку він має два рівні стовпці. Натисніть піктограму сітки (**Column layout**) на рядку, виберіть пресет **2/3 + 1/3** і натисніть **Save**.
3. Натисніть **+** у ширшому стовпці й виберіть **Text**. Введіть «Our story» як **Heading 2**, потім два короткі абзаци: як ви починали й як проходить проєкт. Натисніть **Save**.
4. Натисніть **+** у вужчому стовпці й виберіть **Image**.
5. Натисніть **Select Image**, знайдіть у медіабібліотеці за допомогою **Apply filters**, позначте фото вашого офісу чи команди й натисніть **Insert selected**.
6. Відкрийте панель **SEO**, заповніть **Alt attribute** і натисніть **Save**.

**Порада**

Робіть історію короткою й розбийте її підзаголовком. Відвідувачі спочатку сканують, потім читають.

## Крок 3: додавання ключових показників із лічильниками

1. Додайте третій розділ за допомогою **Add Section Below**. Відкрийте його **More** > **Settings**, виберіть світло-сірий **Background** на панелі **Style** і натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Row**. Натисніть його піктограму сітки (**Column layout**), виберіть пресет **1/3 + 1/3 + 1/3** і натисніть **Save**.
3. У кожному стовпці додайте елемент **Text** із міткою показника: «Projects delivered», «Years in business», «Clients who return».
4. У кожному стовпці натисніть **+** знову й виберіть **Number counter**; він стане над міткою. Установіть:
    - **End**: показник (140, 12, 98)
    - **Suffix**: «+» або «%», де застосовується
    - **Thousands separator**: **Comma**
    - **Speed**: 2500, час у мілісекундах, за який число зростає
5. Натисніть **Save** на кожному лічильнику.

Лічильник не має власного поля мітки, тому під ним міститься елемент Text.

## Крок 4: створення розділу команди

1. Додайте четвертий розділ за допомогою **Add Section Below**.
2. Натисніть **+** на розділі й виберіть **Row**. Натисніть його піктограму сітки (**Column layout**), виберіть пресет **1/3 + 1/3 + 1/3** і натисніть **Save**.
3. У кожному стовпці натисніть **+** і виберіть **Card**. Відкрийте його **More** > **Settings**, установіть **Header** на ім’я людини («Sofia Andersen»), а **Title** на посаду («Creative Director»), потім натисніть **Save**.
4. Натисніть **+** на самому розділі й виберіть **Text**; він стане над рядком карток. Введіть «Meet the team» як **Heading 2**, відцентруйте й натисніть **Save**.

## Крок 5: додавання завершального розділу

1. Додайте останній розділ за допомогою **Add Section Below** і відкрийте його **More** > **Settings**. У розділі **HTML classes** виберіть **Align text center**, щоб текст і кнопка центрувалися разом. На панелі **Style** виберіть ваш брендовий колір як **Background** і білий як **Font color**, потім натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Button**. Установіть **Title** на «Get in touch», **Link** на `/contact`, **Type** на **Light** і **Size** на **Large**, потім натисніть **Save**.
3. Натисніть **+** на розділі знову й виберіть **Text**; він стане над кнопкою. Введіть «Want to work with us?» як **Heading 2**, потім «We take on a handful of new clients each quarter.» На панелі **Style** установіть **Font color** на білий, потім натисніть **Save**.

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

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

## Далі

Не показано у відео, але варто додати:

- Біографію **Text** і портрет **Image** усередині кожної картки, а **Social links** під нею
- **100% height** у налаштуваннях першого розділу для заголовка, що заповнює екран

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

Попередній перегляд показує п’ять смуг. Темний заголовок містить вашу місію та її лід білим. Ваша історія розміщена поруч із фото. На сірій смузі три числа зростають від нуля, коли з’являються на екрані під час гортання.

Заголовок команди відцентровано над трьома картками, кожна із ім’ям і посадою. Завершальна смуга центрує білий заголовок над світлою кнопкою **Get in touch**. Виберіть **Edit** у меню перегляду, щоб продовжити роботу.

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

- **На порожній сторінці немає кнопки Add Elements.** Помічник створення сторінок вимкнено, тож сторінка пропонує лише **Choose a template**. Натомість натисніть порожню область, щоб відкрити вибір елементів.
- **Новий елемент опиняється над тим, що ви додали раніше.** Конструктор вставляє нові елементи угорі свого розділу чи стовпця. Перетягніть його на місце за ручку перетягування на його панелі керування.
- **Number counter або Card немає у виборі.** Ваш профіль користувача DXPR Builder його ховає. Попросіть адміністратора позначити його в розділі **Elements** за адресою **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`).
- **Ваші зміни зникли після перезавантаження.** Ви покинули сторінку, не натиснувши **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%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3-%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D0%B0) для типів карток і дочірніх елементів
- [Елементи](/hc/documentation/learn-dxpr-builder/elements) для повного довідника елементів