---
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%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0'
title: 'Створіть свою першу сторінку | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T20:07:06+00:00'
updated: '2026-10-24T20:08:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Створіть сторінку за допомогою DXPR Builder: зображення поруч із заголовком, короткий
  абзац і кнопку. Також можна почати з готового шаблона й
  змінити його слова. Будь-який шлях займає кілька хвилин, і ви завершуєте
  збереженою сторінкою, яку переглядаєте так, як її бачитимуть відвідувачі.
tags:
  - 'Build your first page'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:08:10+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Створіть свою першу сторінку'
      description: |-
        Створіть сторінку за допомогою DXPR Builder: зображення поруч із заголовком, короткий
        абзац і кнопку. Також можна почати з готового шаблона й
        змінити його слова. Будь-який шлях займає кілька хвилин, і ви завершуєте
        збереженою сторінкою, яку переглядаєте так, як її бачитимуть відвідувачі.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T20:07:06+0000'
      dateModified: '2026-10-24T20:08:10+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%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0'
      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%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0'
      description: |-
        Створіть сторінку за допомогою DXPR Builder: зображення поруч із заголовком, короткий
        абзац і кнопку. Також можна почати з готового шаблона й
        змінити його слова. Будь-який шлях займає кілька хвилин, і ви завершуєте
        збереженою сторінкою, яку переглядаєте так, як її бачитимуть відвідувачі.
      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/start-here) /[Створення першої сторінки](/uk/hc/documentation/learn-dxpr-builder/start-here/first-steps) # Створіть свою першу сторінку.

 Вивчення DXPR BuilderПочніть звідсиСтворення першої сторінки

   ## In this guide

Створіть сторінку за допомогою DXPR Builder: зображення поруч із заголовком, короткий абзац і кнопку. Також можна почати з готового шаблона й змінити його слова. Будь-який шлях займає кілька хвилин, і ви завершуєте збереженою сторінкою, яку переглядаєте так, як її бачитимуть відвідувачі. Скористайтеся цією сторінкою після [встановлення DXPR Builder](/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%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%B2%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F).

Відео створює сторінку з нуля: розділ, рядок, зображення, кнопку й текст, потім збереження й попередній перегляд.

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

- DXPR Builder встановлено з вашим ключем продукту ([Встановлення DXPR Builder](/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%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%B2%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F)).
- Тип вмісту показує конструктор: його текстове поле використовує форматувальник **DXPR Builder**, як **Drag and drop Page** із `dxpr_builder_page`.
- Ваша роль має дозвіл **Редагувати за допомогою DXPR Builder**.

## Створення сторінки

1. Перейдіть до **Вміст** > **Додати вміст** і виберіть тип вмісту, що показує конструктор.
2. Введіть **Title** і натисніть **Зберегти**.

Збережена сторінка відкривається з порожнім конструктором. DXPR Builder працює на цій сторінці, а не у формі редагування.

## Варіант А: початок із шаблона

Вкладка **Збережені шаблони** перелічує макети, які люди на вашому сайті зберегли для повторного використання. DXPR CMS постачає кілька, наприклад **Colored icon boxes**. На інших сайтах вкладка може бути порожньою; **Виберіть шаблон** на порожній сторінці тоді пропонує шаблони сторінок, що постачаються з DXPR Builder. Сторінка [Вставлення збереженого шаблона](/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%B1%D0%B0%D0%B3%D0%B0%D1%82%D0%BE%D1%80%D0%B0%D0%B7%D0%BE%D0%B2%D1%96-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D0%B7%D0%B1%D0%B5%D1%80%D0%B5%D0%B6%D0%B5%D0%BD%D0%B8%D1%85-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%96%D0%B2)показує ці кроки у відео.

1. Натисніть **Додати елементи**, щоб відкрити засіб вибору елементів.
2. Перемкніться на вкладку **Збережені шаблони**.
3. Натисніть шаблон, щоб вставити його. Його розділи, рядки й елементи з’являться на сторінці готовими до редагування.
4. Натисніть **Зберегти** на панелі інструментів.
5. Відкрийте меню з оком і виберіть **Попередній перегляд**, щоб побачити сторінку такою, якою її бачитимуть відвідувачі.

## Варіант Б: створення з нуля

Відео вище повторює ці кроки.

1. Натисніть **Додати елементи** і виберіть **Розділ** на вкладці **Макет**.
2. Натисніть **+** на панелі керування розділу й виберіть **Рядок**.
3. Натисніть значок сітки на рядку, виберіть пресет стовпців, наприклад 1/3 + 2/3, і натисніть **Зберегти**.
4. Натисніть **+** у лівому стовпці, відкрийте вкладку **Вміст** і виберіть **Зображення**.
5. Натисніть **Вибрати зображення**, знайдіть у браузері медіа за допомогою **Застосувати фільтри**, позначте фото й натисніть **Вставити вибране**.
6. Відкрийте панель **SEO**, введіть **Атрибут Alt** і натисніть **Зберегти**.
7. Натисніть **+** у правому стовпці й виберіть **Кнопку**.
8. Введіть **Заголовок** і **Посилання**, виберіть **Тип** і натисніть **Зберегти**.
9. Натисніть **+** на панелі керування широкого стовпця й виберіть **Текст**.
10. Введіть заголовок, задайте для нього **Заголовок 2**, введіть абзац під ним і натисніть **Зберегти**.
11. Натисніть **Зберегти** на панелі інструментів.
12. Відкрийте меню з оком і виберіть **Попередній перегляд**, щоб побачити сторінку такою, якою її бачитимуть відвідувачі. Виберіть **Редагувати** у тому самому меню, щоб працювати далі.

## Зміна доданого

- **Текст**: натисніть текстовий елемент, щоб відредагувати його на місці. Панель інструментів пропонує жирний, курсив, заголовки, посилання, списки, колір шрифту й інше. Ваш [профіль користувача](/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%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2) вирішує, які кнопки з’являться.
- **Налаштування**: відкрийте **Більше** на панелі керування елемента й виберіть **Налаштування**. Зображення має ширину, висоту, посилання й свій альтернативний текст; кнопка має **Тип**, розмір і посилання.
- **Порядок**: перетягніть елемент за його панель керування в інше місце.

Завершивши, натисніть **Зберегти** на панелі інструментів. Браузер попередить вас, якщо ви спробуєте залишити сторінку з незбереженими змінами.

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

У режимі **Попередній перегляд** зображення розташовано ліворуч. Заголовок, абзац і кнопка розташовані праворуч без панелей керування. У режимі **Редагувати** кожен елемент знову показує свою панель керування, коли ви наводите на нього вказівник. DXPR Builder зберігає сторінку як HTML у полі, яке редагує, зазвичай **Body**. Відвідувачі бачать сторінку, коли вміст опубліковано.

## Якщо ви не бачите кнопки «Додати елементи»

- **Порожня сторінка показує «Виберіть шаблон» і «Або додайте елементи за допомогою +».** **Увімкнути помічника створення сторінок** вимкнено за адресою `/admin/dxpr_studio/dxpr_builder/ai_settings`. Натисніть **+** на панелі інструментів конструктора, щоб натомість відкрити засіб вибору елементів.
- **Сторінка взагалі не показує конструктора.** Тип вмісту не використовує форматувальник **DXPR Builder**, або вашій ролі бракує дозволу **Редагувати за допомогою DXPR Builder**. Див. розділ «[Перевірка встановлення](/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%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%B2%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F#verify-the-installation)».
- **Вкладка «Збережені шаблони» не перелічує шаблонів.** Ніхто на сайті ще не зберіг жодного, або ваш профіль користувача їх приховує. Скористайтеся **Виберіть шаблон** на порожній сторінці або [збережіть власний](/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%B1%D0%B0%D0%B3%D0%B0%D1%82%D0%BE%D1%80%D0%B0%D0%B7%D0%BE%D0%B2%D1%96-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8/%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D0%B0).
- **Ваші зміни зникли після перезавантаження.** Сторінку не було збережено. Натисніть **Зберегти** на панелі інструментів конструктора, перш ніж залишити сторінку.

## Що далі?

- [Інструменти редагування](/hc/documentation/learn-dxpr-builder/editing): кожен елемент керування, а також сполучення клавіш.
- [Елементи](/hc/documentation/learn-dxpr-builder/elements): усі 22 елементи вмісту й 6 елементів макета.
- [Макет](/hc/documentation/learn-dxpr-builder/layout/overview): розділи, рядки й стовпці, що пристосовуються до кожного екрана.