---
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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96'
title: 'Додавання рядка | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:58:44+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Рядок ділить розділ на стовпці, тож можна розмістити вміст поруч:
  три послуги, фото поруч із текстом, бічну панель поруч зі статтею. Ви
  вибираєте поділ із дванадцяти пресетів і можете дати телефонам власний макет.
  Прочитайте цю сторінку, щоб додати рядок; про рядок усередині стовпця див.
  Вкладення.
tags:
  - Layout
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: 'Додавання рядка'
      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:58:44+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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96'
      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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96'
      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/elements) /[Макет](/uk/hc/documentation/learn-dxpr-builder/layout/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%B5%D0%BD%D0%BD%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%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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD)

Рядок ділить розділ на стовпці, тож можна розмістити вміст поруч: три послуги, фото поруч із текстом, бічну панель поруч зі статтею. Ви вибираєте поділ із дванадцяти пресетів і можете дати телефонам власний макет. Прочитайте цю сторінку, щоб додати рядок; про рядок усередині стовпця див. [Вкладення](/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/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F).

## Додавання рядка

Приклад додає до розділу рядок із трьох стовпців, по одному для кожної послуги, що пропонує команда.

1. Натисніть **+** на розділі, щоб відкрити вибір елементів.
2. Виберіть **Row** на вкладці **Layout**. Спочатку він має два рівні стовпці.
3. Натисніть піктограму сітки (**Column layout**) на панелі керування рядка, виберіть пресет стовпців, наприклад три рівні стовпці, і натисніть **Save**.
4. Натисніть **+** у стовпці, щоб додати до нього вміст.
5. Натисніть **Save** на панелі інструментів, щоб зберегти сторінку.

  Піктограма сітки міститься одразу за ручкою перетягування рядка. Пресет змінює стовпці, щойно ви його натискаєте; **Cancel** повертає старий макет.

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

Три послуги стоять поруч, кожен стовпець займає третину ширини розділу. На екранах, вужчих за 768 пікселів, стовпці складаються: кожен займає повну ширину в тому порядку, що на сторінці.

Стовпці заввишки лише як їхній вміст, тож короткий стовпець закінчується раніше за сусідів. Ви помічаєте це, коли стовпці отримують колір тла; **Equal-height columns** вирівнює їх.

## Налаштування рядка

### Макети стовпців

Піктограма сітки відкриває панель для кожного розміру екрана, що має власний макет. Кожна панель показує ці дванадцять пресетів плитками:

| Пресет | Макет |
|---|---|
| 1/1 | Один стовпець на повну ширину |
| 1/2 + 1/2 | Два рівні стовпці |
| 1/3 + 1/3 + 1/3 | Три рівні стовпці |
| 1/4 + 1/4 + 1/4 + 1/4 | Чотири рівні стовпці |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Шість рівних стовпців |
| 1/4 + 1/2 + 1/4 | Вузький, широкий, вузький |
| 1/6 + 4/6 + 1/6 | Вузький, дуже широкий, вузький |
| 1/4 + 3/4 | Чверть ліворуч, три чверті праворуч |
| 3/4 + 1/4 | Три чверті ліворуч, чверть праворуч |
| 2/3 + 1/3 | Широкий ліворуч, вузький праворуч |
| 1/3 + 2/3 | Вузький ліворуч, широкий праворуч |
| 5/12 + 7/12 | Трохи вужчий ліворуч, трохи ширший праворуч |

Для будь-якого іншого поділу натисніть **Custom Layout** і введіть ширини дробами, наприклад `1/6 + 5/6`. Ширини, що в сумі дають більше за 1, переносяться на новий рядок. Коли ви відкриєте діалогове вікно знову, **Custom Layout** буде позначено й покаже макет, наприклад **Custom Layout (1/6 + 5/6)**.

### Макет для кожного розміру екрана

Перша панель, **Medium devices (≥ 768px)**, задає макет для планшетів і ширших екранів. Щоб задати макет і для телефонів, натисніть **Add screen size** угорі діалогового вікна. Відкриється панель для **Extra small (< 576px)**; виберіть інший розмір з її списку, якщо потрібно, потім пресет. **Remove screen size** знову видаляє панель.

### Налаштування рядка й стовпця

Відкрийте **More** > **Settings** на панелі керування рядка або на панелі стовпця для налаштування стовпця.

| Налаштування | Елемент | Що робить | Стандартно |
|---|---|---|---|
| **Equal-height columns** | Row | Розтягує кожен стовпець до висоти найвищого | Off |
| **Mirror row** | Row | Показує стовпці у зворотному порядку починаючи з 768 пікселів; складені стовпці зберігають порядок сторінки | Off |
| **Vertical centering** | Column | Центрує вміст у стовпці, вищому за нього | Off |

**Mirror row** пасує сторінці з рядками, що чергуються: фото ліворуч, потім фото праворуч, тоді як телефони завжди показують фото першим.

### Переміщення й видалення стовпців

Перетягніть стовпець за його ручку або використовуйте **More** > **Move Left** чи **Move Right** на його панелі. Стовпці не мають **Delete**: натомість виберіть пресет із меншою кількістю стовпців. У такий спосіб вміст ніколи не губиться; він переміщується в останній стовпець, що лишається.

## Якщо елемент не відображається

- **Вертикальне центрування стовпця нічого не змінює.** Стовпець заввишки лише як його вміст, тож немає простору для центрування. Увімкніть **Equal-height columns** у налаштуваннях рядка.
- **Стовпці складаються на телефоні.** Нижче 768 пікселів це стандартно. Натисніть піктограму сітки, потім **Add screen size**, і виберіть пресет для **Extra small (< 576px)**.
- **Текст стрибнув в інший стовпець.** Ви вибрали пресет із меншою кількістю стовпців, і вміст видалених стовпців перемістився в останній. Натисніть **Ctrl+Z** (**Cmd+Z** на Mac), щоб скасувати зміну.
- **Стовпець не має Delete у меню More.** Стовпці видаляються через макет. Натисніть піктограму сітки рядка й виберіть пресет із меншою кількістю стовпців.

## Що далі?

- [Вкладення](/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/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%B5%D0%BD%D0%BD%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%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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD): як ваш макет пристосовується до кожного розміру екрана.