---
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%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8F-%D1%86%D1%96%D0%BD'
title: 'Створення таблиці цін | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:26:05+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:26:05+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%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8F-%D1%86%D1%96%D0%BD'
      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%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8F-%D1%86%D1%96%D0%BD'
      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/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D1%83)
- [Додавання картки](/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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C)

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

Відео створює три плани для звітного інструмента.

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

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

## Крок 1: додавання розділу й стовпців

1. Натисніть **Add Elements** на порожній сторінці й виберіть **Section** на вкладці **Layout**.
2. Наведіть курсор на розділ і відкрийте **More** > **Settings**. У розділі **HTML classes** виберіть **Align text center**. Відкрийте панель **Style**, виберіть світло-сірий **Background** і натисніть **Save**.
3. Натисніть **+** на розділі й виберіть **Row**; спочатку він має два рівні стовпці.
4. Натисніть піктограму сітки рядка (**Column layout**), виберіть пресет **1/3 + 1/3 + 1/3** і натисніть **Save**.

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

1. Натисніть **+** у першому стовпці й виберіть **Panel** на вкладці **Content**.
2. Наведіть курсор на панель і відкрийте **More** > **Settings**. Установіть **Title** на «Starter», лишіть **Type** на **DXPR** і натисніть **Save**.
3. Натисніть **+** на панелі й виберіть **Button**. Установіть **Title** на «Choose plan», **Link** на `/signup`, а **Type** на **Primary**. Увімкніть **Block button**, щоб вона заповнила стовпець, потім натисніть **Save**.
4. Натисніть **+** на панелі знову й виберіть **Text**; він стане над кнопкою. Введіть ціну як **Heading 2**, додайте функції по одній на рядок і натисніть **Save**.

## Крок 3: створення інших планів

1. Повторіть крок 2 у другому стовпці для «Professional». На панелі **Style** панелі виберіть фіолетовий **Background**, а **Type** кнопки встановіть на **Success**, щоб план виділявся.
2. Повторіть крок 2 у третьому стовпці для «Enterprise», із «Custom pricing» як ціною.

**Порада**

Середній стовпець притягує погляд. Розмістіть там план, який найбільше хочете продати.

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

1. Натисніть **+** на розділі й виберіть **Text**; він стане над рядком.
2. Введіть «Choose your plan» як **Heading 2**, додайте один рядок, як-от «Simple monthly pricing. Cancel any time.», і натисніть **Save**.

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

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

## Далі

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

- **Four plans**: натомість виберіть пресет **1/4 + 1/4 + 1/4 + 1/4** і створіть четвертий стовпець.
- **Most popular badge**: додайте елемент **Text** угорі виділеної панелі з «Most popular» жирним.
- **Annual and monthly**: додайте рядок **Text** над рядком, як-от «Monthly \| Annual (save 20%)». Рядок статичний; живий перемикач потребує елемента **HTML** із власним скриптом.
- **Feature ticks**: вставте галочку перед кожним рядком функцій або додайте елемент **Icon** над списком.

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

«Choose your plan» відцентровано над трьома планами на сірій смузі. Кожна панель показує свою назву в рядку заголовка, ціну, три функції й кнопку **Choose plan** на повну ширину. Середній план виділяється фіолетовим із зеленою кнопкою.

## Якщо плани виглядають не так, як показано

- **Панель відкривається без діалогового вікна налаштувань.** Панелі відкриваються порожніми, без діалогового вікна. Наведіть курсор на панель і відкрийте **More** > **Settings**, щоб установити її **Title**.
- **Тип панелі, як-от Primary, не показує кольору.** Ваша тема не стилізує цей тип панелей. Лишіть **Type** на **DXPR** і виберіть **Background** на панелі **Style** панелі, як у кроці 3.
- **Кнопки завширшки лише як їхній текст.** **Block button** вимкнено. Відкрийте налаштування кожної кнопки й увімкніть його.
- **Ваші зміни зникли після перезавантаження.** Ви покинули сторінку, не натиснувши **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/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D1%83) для повної сторінки з функціями й цінами
- [Елемент картки](/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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C) для кожного налаштування панелі