---
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/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA'
title: 'Додавання панелі вкладок | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:23:26+00:00'
updated: '2026-10-24T20:08:10+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: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: 'Використовуйте вкладки, коли хочете кілька блоків пов’язаного вмісту в одному місці, із яких видно лише один. У результаті ви маєте рядок міток вкладок; відвідувачі натискають мітку, щоб побачити її вміст. Приклад створює сторінку агенції із однією вкладкою на послугу.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:23:26+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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA'
      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/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA'
      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%B7%D0%B3%D0%BE%D1%80%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0-%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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%96)
- [Додавання вкладеного макета](/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/%D0%B7%D0%B3%D0%BE%D1%80%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0-%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C) зазвичай читається краще.

## Додавання панелі вкладок

1. Наведіть курсор на стовпець і натисніть **+** на його панелі керування або **+** посередині порожнього стовпця, щоб відкрити вибір елементів.
2. На вкладці **Layout** натисніть **Tabs**. Елемент з’являється із однією вкладкою з міткою **Title**.
3. Наведіть курсор на панель вкладки й відкрийте **More > Settings**. Введіть ім’я в полі **Tab title** і натисніть **Save**.
4. Натисніть **+** усередині панелі, щоб додати вміст, наприклад елемент **Text**.
5. Щоб додати вкладку, наведіть курсор на мітки вкладок і натисніть **Add tab** на панелі керування **Tabs**. Нова вкладка стає першою, перед іншими. Назвіть її й наповніть так само.

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

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

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

Елемент **Tabs** має три налаштування. Відкрийте їх через **More > Settings** на панелі керування **Tabs**, яка показується, коли ви наводите курсор на мітки вкладок.

| Налаштування | Що робить | Стандартно |
|---|---|---|
| **Tab direction** | Де містяться мітки: **Default** (над вмістом), **Left** або **Right** | Default |
| **Style** | Вигляд міток: **Default** (лінія під мітками), **Modern** (заокруглені картки) або **Accordion** (заголовки з розділювальними лініями) | Default |
| **Mobile friendly** | Показує вкладки як згортальні заголовки на екранах, вужчих за 768 пікселів | On |

Кожна вкладка має власні налаштування в розділі **More > Settings** на її панелі. **Tab title** це текст мітки. **Tab description** це необов’язковий короткий рядок під міткою відкритої вкладки.

## Керування вкладками

- **Reorder**: перетягніть мітку вкладки на нове місце серед міток. Її вміст переміщується разом із нею.
- **Rename**: наведіть курсор на панель вкладки, відкрийте **More > Settings**, змініть **Tab title** і натисніть **Save**.
- **Remove**: наведіть курсор на панель вкладки, відкрийте **More** і виберіть **Delete**. Усе всередині вкладки видаляється разом з нею.

Обмежуйте мітки одним-трьома словами й зупиняйтеся приблизно на п’яти вкладках, щоб мітки вміщалися в один рядок.

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

- **Нова вкладка перша замість останньої.** **Add tab** завжди ставить нову вкладку попереду. Перетягніть її мітку туди, куди хочете.
- **Налаштування показують лише Tab title і Tab description.** Ви відкрили налаштування однієї вкладки. Наведіть курсор на мітки вкладок, щоб показалася панель керування **Tabs**, потім відкрийте там **More > Settings**.
- **Телефони показують складені заголовки замість вкладок.** **Mobile friendly** увімкнено, це стандартно. Вимкніть його в налаштуваннях **Tabs**, щоб зберегти вкладки на кожній ширині екрана.
- **Tabs немає на вкладці Layout вибору.** Ваш профіль користувача DXPR Builder його не включає. Адміністратор позначає **Tabs** у розділі **Elements** вашого профілю за адресою `/admin/dxpr_studio/dxpr_builder/profile`.

## Що далі?

- [Додавання згортальної панелі](/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%B7%D0%B3%D0%BE%D1%80%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0-%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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%96): показуйте той самий вид вмісту слайд за слайдом.
- [Вкладення](/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): розмістіть рядки й стовпці всередині вкладки для багатших макетів.