---
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%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2'
title: 'Довідник: елементи та їхні поля налаштувань | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T20:08:27+00:00'
updated: '2026-10-24T20:15:47+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Builder надає 22 елементи вмісту й 6 елементів
  макета. Ця сторінка перелічує машинне ім’я кожного елемента й
  поля у його діалоговому вікні налаштувань; частина макетів також перелічує
  Column усередині кожного рядка. Блоки й вигляди Drupal, які
  конструктор теж пропонує як елементи, не охоплено.
tags:
  - 'Elements and CSS'
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: |-
        DXPR Builder надає 22 елементи вмісту й 6 елементів
        макета. Ця сторінка перелічує машинне ім’я кожного елемента й
        поля у його діалоговому вікні налаштувань; частина макетів також перелічує
        Column усередині кожного рядка. Блоки й вигляди Drupal, які
        конструктор теж пропонує як елементи, не охоплено.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T20:08:27+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%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2'
      articleSection: 'Елементи та CSS'
    -
      '@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%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2'
      description: |-
        DXPR Builder надає 22 елементи вмісту й 6 елементів
        макета. Ця сторінка перелічує машинне ім’я кожного елемента й
        поля у його діалоговому вікні налаштувань; частина макетів також перелічує
        Column усередині кожного рядка. Блоки й вигляди Drupal, які
        конструктор теж пропонує як елементи, не охоплено.
      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/reference) /[Елементи та CSS](/uk/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Довідник: елементи та їхні поля налаштувань.

 Вивчення DXPR BuilderДовідникЕлементи та CSS

   ## In this guide

DXPR Builder надає 22 елементи вмісту й 6 елементів макета. Ця сторінка перелічує машинне ім’я кожного елемента й поля у його діалоговому вікні налаштувань; частина макетів також перелічує Column усередині кожного рядка. Блоки й вигляди Drupal, які конструктор теж пропонує як елементи, не охоплено.

## Як читати цю сторінку

Перша таблиця кожного елемента перелічує поля в його акордеоні **General**. Поле в іншому акордеоні міститься в окремій таблиці, названій за цим акордеоном. Label це мітка поля так, як її показує діалогове вікно, в американському написанні інтерфейсу. Parameter це `param_name` у визначенні елемента. Options читаються як `value` (Label).

Два поля General з’являються на кожному елементі й не повторюються в таблицях:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| HTML ID | `hash` | text | порожньо; поле показує згенерований ID як заповнювач | Спочатку літера, потім літери, цифри, дефіси й підкреслення | Власний ID елемента. |
| HTML classes | `el_class` | multi-select | порожньо; нові розділи отримують `py-5` | Службові класи Bootstrap 5 і класи, які декларують увімкнені теми; **Edit as text** приймає будь-який клас | Додаткові CSS-класи елемента. |

Кожен елемент також має акордеони **Style** і **Hover style**, задокументовані на сторінці [Вкладка стилю](/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%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E). Усі елементи, крім Column і панелей усередині Tabs, Collapse panel і Carousel, також мають акордеон **Animation**, задокументований на сторінці [Вкладка анімації](/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%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F).

Стовпець Control називає те, що показує діалогове вікно. Кожен елемент керування походить із `type` параметра у визначенні елемента:

| Елемент керування | Код `type` |
|---|---|
| text | `textfield` |
| number | `numericfield` |
| link | `link` |
| radio | `dropdown` з менш ніж 7 опціями |
| select | `dropdown` із 7 і більше опціями |
| toggle | `checkbox` із однією опцією |
| checkboxes | `checkbox` з кількома опціями |
| slider | `dxb_slider` |
| colour | `colorpicker` |
| icon, image, images, video, datetime | Параметр `type` із тією самою назвою |
| ckeditor | `textarea` |
| ace | `html` |
| social | `social_links` |

Увімкнений перемикач зберігає значення зі своєї клітинки Allowed values; вимкнений перемикач зберігає `no` або порожнє значення. Прапорці зберігають позначені значення списком через кому. Опція, перелічена як порожня, зберігається як порожній рядок; у діалоговому вікні її радіокнопка має ключ `dxpr-default`.

Поля image та images також пропонують вибір стилю зображень: спочатку стиль сайту `optimize`, коли він існує, потім **Original image (No resizing)** та інші стилі зображень. Деякі поля лишаються прихованими, доки інше поле не матиме відповідного значення; стовпець Description називає цю залежність.

## Елементи вмісту

### [Text](/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/%D1%82%D0%B5%D0%BA%D1%81%D1%82)

Форматований текст, редагований у CKEditor. Машинне ім’я: `az_text`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Заповнювачі заголовка й абзаца | HTML | Текстовий вміст. |

### [Image](/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%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F)

Окреме зображення, необов’язково обгорнуте посиланням. Машинне ім’я: `az_image`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Image | `image` | image | порожньо | Зображення з браузера медіа | Зображення для показу. |
| Image width | `width` | text | `100%` | Довжина CSS, наприклад `100px` або `50%` | Число без одиниць виміру рахується пікселями. |
| Image height | `height` | text | порожньо | Довжина CSS, наприклад `100px` | Число без одиниць виміру рахується пікселями. |
| Image link | `link` | link | порожньо | URL або внутрішній шлях | Обгортає зображення посиланням. |
| Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Де відкривається посилання. Показується, коли задано `link`. |

Поля в акордеоні **SEO**:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | порожньо | Будь-який текст | Альтернативний текст зображення. |
| Title attribute | `title` | text | порожньо | Будь-який текст | Атрибут title зображення. |

### [Image carousel](/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%83%D1%81%D0%B5%D0%BB%D1%8C-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C)

Слайдшоу Bootstrap із кількох зображень. Машинне ім’я: `az_images_carousel`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Images | `images` | images | порожньо | Зображення з браузера медіа | По одному слайду на зображення. |
| Interval | `interval` | slider | 5000 | 0 до 10000, крок 1 | Час між слайдами в мілісекундах. При 0 слайди не гортаються самі. |
| Hide | `hide` | checkboxes | жодного не позначено | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | Ховає індикатори, стрілки або обидва. |

Поля в акордеоні **SEO**:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | порожньо | Будь-який текст | Альтернативний текст зображень. |
| Title attribute | `title` | text | порожньо | Будь-який текст | Атрибут title зображень. |

### [Video](/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%B2%D1%96%D0%B4%D0%B5%D0%BE)

Вбудовує відео YouTube або Vimeo. Машинне ім’я: `az_video`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Video link | `link` | text | порожньо | URL YouTube або Vimeo | Відео для вбудовування. |
| Video width | `width` | text | `100%` | Довжина CSS, наприклад `100px` або `50%` | Число без одиниць виміру рахується пікселями. |
| Image | `image` | image | порожньо | Зображення з браузера медіа | Зображення обкладинки; плеєр завантажується, коли відвідувач його натискає. |
| Themed play button | `play` | toggle | вимкнено | `yes`, коли увімкнено | Показує стилізовану кнопку відтворення поверх відео. |

### [Local video](/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%BB%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D0%B5-%D0%B2%D1%96%D0%B4%D0%B5%D0%BE)

Відтворює відеофайл із власного сервера в плеєрі HTML5. Машинне ім’я: `az_video_local`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Video | `video` | video | порожньо | Файл MP4, WEBM, OGG або OGV, до ліміту розміру завантаження сайту | Відеофайл. |
| Start playing automatically | `autoplay` | toggle | вимкнено | `autoplay`, коли увімкнено | Починає відтворення при завантаженні сторінки. Автовідтворення завжди вимикає звук відео. |
| Muted | `muted` | toggle | вимкнено | `muted`, коли увімкнено | Вимикає звук відео. Показується, доки `autoplay` вимкнено. |
| Controls | `controls` | toggle | вимкнено | `controls`, коли увімкнено | Показує елементи керування плеєром. |
| Loop | `loop` | toggle | вимкнено | `loop`, коли увімкнено | Перезапускає відео, коли воно закінчується. |
| Video width | `width` | text | `100%` | Довжина CSS, наприклад `100px` або `50%` | Ширина плеєра. |
| Image | `image` | image | порожньо | Зображення з браузера медіа | Зображення постера, показане до відтворення. |

### [HTML](/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/html-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82)

Сирий HTML, редагований у редакторі коду. Машинне ім’я: `az_html`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Raw HTML | `content` | ace | Заповнювач із повідомленням «Click the edit button to change this HTML» | HTML | HTML-вміст. |

### [Jumbotron](/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%B4%D0%B6%D0%B0%D0%BC%D0%B1%D0%BE%D1%82%D1%80%D0%BE%D0%BD)

Великий банер із заголовком і вступним текстом; всередину можна перетягувати інші елементи. Машинне ім’я: `az_jumbotron`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Title | `title` | text | порожньо | Будь-який текст | Заголовок банера. |
| Lead | `lead` | text | порожньо | Будь-який текст | Підзаголовок, показаний під заголовком. |
| Type | `type` | select | `bg-light` (Light) | `bg-light` (Light), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `none` (Default) | Класи тла й кольору тексту. |
| Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | Розмір відступів. |

### [Button](/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%BD%D0%BE%D0%BF%D0%BA%D0%B0)

Кнопка Bootstrap, що посилається на URL. Машинне ім’я: `az_button`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Title | `title` | text | Click to add text | Будь-який текст | Текст на кнопці. |
| Link | `link` | link | порожньо | URL або внутрішній шлях | Посилання кнопки. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Де відкривається посилання. Показується, коли задано `link`. |
| Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; кожна мітка це значення з великої літери | Стиль кнопки Bootstrap. |
| Block button | `block` | toggle | вимкнено | `btn-block`, коли увімкнено | Кнопка на повну ширину. |
| Outline style | `outlined` | toggle | вимкнено | `outline`, коли увімкнено | Виводить `btn-outline-*` замість `btn-*`. |
| Size | `size` | radio | порожньо (Normal) | порожньо (Normal), `btn-lg` (Large), `btn-sm` (Small) | Розмір кнопки. |

### [Link element](/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%BE%D1%81%D0%B8%D0%BB%D0%B0%D0%BD%D0%BD%D1%8F)

Контейнер, що обгортає елементи всередині одним посиланням. Машинне ім’я: `az_link`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Link | `link` | link | порожньо | URL або внутрішній шлях | Посилання вмісту. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Де відкривається посилання. Показується, коли задано `link`. |

Поля в акордеоні **SEO**:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Title attribute | `title` | text | порожньо | Будь-який текст | Атрибут title посилання. |
| Tell search engines not to follow | `nofollow` | toggle | вимкнено | `nofollow`, коли увімкнено | Додає `rel="nofollow"` до посилання. |

### [Alert](/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/%D1%81%D0%BF%D0%BE%D0%B2%D1%96%D1%89%D0%B5%D0%BD%D0%BD%D1%8F)

Повідомлення-сповіщення Bootstrap. Машинне ім’я: `az_alert`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Message | `content` | ckeditor | Текст заповнювача | HTML | Повідомлення. |
| Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | Колір сповіщення. |

### [Card](/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)

Контейнер-картка Bootstrap із необов’язковим заголовком і назвою. Машинне ім’я: `az_card`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Header | `header` | text | порожньо | Будь-який текст | Текст заголовка картки. |
| Title | `title` | text | порожньо | Будь-який текст | Назва картки. |
| Type | `type` | select | порожньо (Default) | порожньо (Default), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `bg-light` (Light) | Кольорові класи картки. |

### [Panel](/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)

Контейнер-панель із рядком заголовка. Машинне ім’я: `az_panel`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Title | `title` | text | порожньо | Будь-який текст | Заголовок панелі. |
| Type | `type` | select | `panel-dxpr` (DXPR) | `panel-dxpr` (DXPR), `panel-default` (Default), `panel-primary` (Primary), `panel-success` (Success), `panel-info` (Info), `panel-warning` (Warning), `panel-danger` (Danger) | Стиль панелі. |

### [Block quote](/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/%D1%86%D0%B8%D1%82%D0%B0%D1%82%D0%B0)

Цитата з необов’язковим посиланням на джерело. Машинне ім’я: `az_blockquote`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Текст заповнювача | HTML | Цитований текст. |
| Cite | `cite` | text | порожньо | Будь-який текст | Посилання на джерело, показане під цитатою. |
| Reverse | `reverse` | toggle | вимкнено | `blockquote-reverse`, коли увімкнено | Вирівнює цитату до кінця рядка (`text-end`). |

### [Social links](/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%BE%D1%81%D0%B8%D0%BB%D0%B0%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B0-%D1%81%D0%BE%D1%86%D0%BC%D0%B5%D1%80%D0%B5%D0%B6%D1%96)

Рядок або стовпець піктограм соцмереж, що посилаються на сторінки профілів. Машинне ім’я: `st_social`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Social links | `st_social_links` | social | Рядки Facebook і YouTube | По одному рядку на піктограму: бренд і URL профілю | Піктограми та їхні посилання. |
| Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | Макет піктограм. |
| Style | `st_style` | radio | порожньо (None) | порожньо (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | Форма тла піктограм. |
| Size | `st_size` | radio | `lg` (Large) | `lg` (Large), порожньо (Small), `2x`, `3x`, `4x`, `5x`; мітки останніх чотирьох відповідають їхнім значенням | Розмір піктограм. |
| CSS3 hover effects | `st_css3_hover_effects` | radio | порожньо (None) | порожньо (None), `disc` (Disc), `pulse` (Pulse) | Ефект наведення. Ефект робить піктограму круглою. |

Поля в акордеоні **Icon colors**:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Джерело кольору піктограм. |
| Color | `st_color` | colour | none | Будь-який колір | Власний колір піктограм. Показується, коли `st_theme_color` має значення `custom`. |
| Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Джерело кольору тла піктограм. |
| Background color | `st_bgcolor` | colour | none | Будь-який колір | Власний колір тла. Показується, коли `st_theme_bgcolor` має значення `custom`. |

### [Number counter](/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/%D1%87%D0%B8%D1%81%D0%BB%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D1%96%D1%87%D0%B8%D0%BB%D1%8C%D0%BD%D0%B8%D0%BA)

Число, що зростає від початкового значення до кінцевого. Машинне ім’я: `az_counter`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Start | `start` | number | 0 | Число | Число, із якого починати відлік. |
| End | `end` | number | 100 | Число | Число, до якого лічити. |
| Font size | `fontsize` | slider | 30 | 0 до 200, крок 1 | Розмір шрифту числа в пікселях. |
| Speed | `speed` | slider | 2000 | 0 до 10000, крок 1 | Час у мілісекундах, за який завершується відлік. |
| Thousands separator | `seperator` | radio | порожньо (None) | порожньо (None), `,` (Comma), `.` (Dot), пробіл (Space) | Розділяє тисячі в кінцевому числі. Код пише параметр саме так. |
| Prefix | `prefix` | text | порожньо | Будь-який текст | Символи перед числом, наприклад `$`. |
| Suffix | `postfix` | text | порожньо | Будь-який текст | Символи після числа, наприклад `%`. |

### [Circle counter](/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%D1%80%D1%83%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D1%96%D1%87%D0%B8%D0%BB%D1%8C%D0%BD%D0%B8%D0%BA)

Круговий індикатор прогресу з необов’язковим текстом, інформаційним рядком і піктограмою в центрі. Машинне ім’я: `az_circle_counter`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Foreground color | `fgcolor` | colour | `#333333` | Будь-який колір | Колір дуги прогресу. |
| Background color | `bgcolor` | colour | `#999999` | Будь-який колір | Колір доріжки за дугою. |
| Fill color | `fill` | colour | none | Будь-який колір | Колір заливки всередині кола. |
| Percent | `percent` | slider | 50 | 0 до 100, крок 1 | Значення прогресу. |
| Dimension | `dimension` | slider | 250 | 100 до 500, крок 1 | Діаметр кола в пікселях. |
| Foreground width | `width` | slider | 10 | 1 до 100, крок 1 | Товщина штриха дуги. |
| Animation | `animation` | toggle | on | `yes`, коли увімкнено | Анімує дугу. |
| Animation duration | `duration` | slider | 1500 | 0 до 5000, крок 1 | У мілісекундах. Показується, коли `animation` увімкнено. |
| Animation delay | `delay` | slider | 0 | 0 до 5000, крок 1 | У мілісекундах. Показується, коли `animation` увімкнено. |
| Animation in-viewport | `in_viewport` | toggle | on | `yes`, коли увімкнено | Починає анімацію, коли елемент з’являється на екрані під час гортання. Показується, коли `animation` увімкнено. |

Поля в акордеоні **Circle content**. Кожне поле після **Show progress** показується, лише доки його вимкнено:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Show progress | `show_progress` | toggle | вимкнено | `yes`, коли увімкнено | Показує відсоток замість власного тексту й піктограми. |
| Text | `text` | text | порожньо | Будь-який текст | Текст у центрі. |
| Font size | `fontsize` | slider | 16 | 0 до 100, крок 1 | Розмір тексту в центрі в пікселях. |
| Text color | `text_color` | colour | none | Будь-який колір | Колір тексту в центрі. |
| Info | `info` | text | порожньо | Будь-який текст | Вторинний інформаційний рядок. |
| Info font size | `info_fontsize` | slider | 14 | 0 до 100, крок 1 | Розмір інформаційного рядка в пікселях. |
| Info color | `info_color` | colour | none | Будь-який колір | Колір інформаційного рядка. |
| Icon | `icon` | icon | порожньо | Піктограма з наборів, які дозволяє ваш профіль конструктора | Піктограма в центрі. |
| Icon size | `icon_size` | slider | 16 | 0 до 100, крок 1 | Розмір шрифту піктограми в пікселях. |
| Icon color | `icon_color` | colour | none | Будь-який колір | Колір піктограми. |

### [Progress bar](/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/%D1%96%D0%BD%D0%B4%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%83)

Горизонтальна смуга прогресу Bootstrap із міткою. Машинне ім’я: `az_progress_bar`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Label | `label` | text | Click to add text | Будь-який текст | Текст усередині смуги. |
| Progress | `width` | slider | 50 | 0 до 100, крок 1 | Прогрес у відсотках. |
| Bar height | `height` | slider | 45 | 0 до 100, крок 1 | Висота смуги в пікселях. |
| Back color | `bgcolor` | colour | `#e9ecef` | Будь-який колір | Колір доріжки за смугою. |
| Front color | `fcolor` | colour | `#284ed9` | Будь-який колір | Колір смуги. |
| Grow animation | `grow_animation` | toggle | вимкнено | `yes`, коли увімкнено | Анімує смугу від 0 до її значення. |
| Stripes | `options` | checkboxes | жодного не позначено | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | Смугастий візерунок і рухомі смуги. |

### [Countdown timer](/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/%D1%82%D0%B0%D0%B9%D0%BC%D0%B5%D1%80-%D0%B7%D0%B2%D0%BE%D1%80%D0%BE%D1%82%D0%BD%D0%BE%D0%B3%D0%BE-%D0%B2%D1%96%D0%B4%D0%BB%D1%96%D0%BA%D1%83)

Відлічує до дати, часу доби або кінця повторюваного інтервалу. Машинне ім’я: `az_countdown`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain), `style1` (Grid), `style6` (3D flip), `style9` (Disc), `style10` (Airport style), `style12` (Transparent) | Візуальний стиль. |
| Date / Time Limitations | `counter_scope` | radio | `date` (Specify date only) | `date` (Specify date only), `date_time` (Specify date and time), `repeating` (Specify time only (repeating every day)), `resetting` (Resetting counter (set interval up to 24 hours)) | До чого відлічує таймер. |
| Date | `date` | datetime | порожньо | Дата у форматі `d.m.Y`. | Цільова дата. Показується, коли `counter_scope` має значення `date`. |
| Date / Time | `date_time` | datetime | порожньо | Дата у форматі `d.m.Y` плюс година (`H`) | Цільові дата й година. Показується, коли `counter_scope` має значення `date_time`. |
| Time | `time` | datetime | порожньо | Година (`H`) | Цільова година кожного дня. Показується, коли `counter_scope` має значення `repeating`. |
| Reset in hours | `reset_hours` | slider | 0 | 0 до 24, крок 1 | Години в інтервалі. Показується, коли `counter_scope` має значення `resetting`. |
| Reset in minutes | `reset_minutes` | slider | 0 | 0 до 60, крок 1 | Хвилини в інтервалі. Показується, коли `counter_scope` має значення `resetting`. |
| Reset in seconds | `reset_seconds` | slider | 0 | 0 до 60, крок 1 | Секунди в інтервалі. Показується, коли `counter_scope` має значення `resetting`. |
| Page referrer | `referrer` | link | порожньо | URL або внутрішній шлях | Сторінка, що відкривається, коли відлік спливає. Показується, коли `counter_scope` має значення `repeating` або `resetting`. |
| Automatic restart | `restart` | toggle | вимкнено | `yes`, коли увімкнено | Починає інтервал знову, коли він закінчується. Показується, коли `counter_scope` має значення `resetting`. |
| Display options | `display` | checkboxes | усі п’ять позначено | `years` (Show remaining years), `days` (Show remaining days), `hours` (Show remaining hours), `minutes` (Show remaining minutes), `seconds` (Show remaining seconds) | Одиниці для показу. |

### [Marquee](/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%B1%D1%96%D0%B6%D1%83%D1%87%D0%B8%D0%B9-%D1%80%D1%8F%D0%B4%D0%BE%D0%BA)

Горизонтальна смуга зображень, що гортається без зупинки. Машинне ім’я: `az_marquee`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Images | `images` | images | Три копії логотипа DXPR | Зображення з браузера медіа | Зображення в смузі. |
| Speed | `speed` | slider | 3 | 1 до 5, крок 1 | Швидкість гортання; 1 найповільніша, 5 найшвидша. |
| Height | `height` | slider | 50 | 10 до 200, крок 1 | Висота зображень у пікселях. |
| Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | Чи зображення мають спільну висоту, чи ширину. |
| Image width | `width` | slider | 400 | 50 до 500, крок 1 | Ширина зображень у пікселях. Показується, коли `image_layout` має значення `fw`. |
| Gray scale | `grayscale` | toggle | вимкнено | `apply`, коли увімкнено | Показує зображення у відтінках сірого. |
| Fade edges | `fade_edges` | toggle | вимкнено | `apply`, коли увімкнено | Затемнює смугу на обох краях. |

Поля в акордеоні **SEO**:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | порожньо | Будь-який текст | Альтернативний текст зображень. |
| Title attribute | `title` | text | порожньо | Будь-який текст | Атрибут title зображень. |

### [Map](/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%B0)

Вбудована Google-карта для адреси. Машинне ім’я: `az_map`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Address | `address` | text | порожньо | Вулична адреса | Місце для показу. |
| Map width | `width` | text | `100%` | Довжина CSS, наприклад `100px` або `50%` | Число без одиниць виміру рахується пікселями. |
| Map height | `height` | text | `400px` | Довжина CSS, наприклад `100px` | Число без одиниць виміру рахується пікселями. |

### [Icon](/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%B7%D0%BD%D0%B0%D1%87%D0%BE%D0%BA)

Окрема піктограма, необов’язково з посиланням. Машинне ім’я: `az_icon`. Модуль постачає 14 наборів піктограм. Теми й модулі можуть додавати більше, а профіль конструктора може обмежувати набори, які бачать його користувачі.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Icon | `icon` | icon | `bi bi-heart` | Піктограма з наборів, які дозволяє ваш профіль конструктора | Піктограма. |
| Size | `size` | radio | `fa-lg` (Large) | `normal` (Normal), `fa-lg` (Large), `fa-2x` (Extra Large (2x)), `fa-3x` (Very Large (3x)), `fa-4x` (Huge (4x)), `fa-5x` (Gigantic (5x)) | Розмір піктограми. |
| Link | `link` | link | порожньо | URL або внутрішній шлях | Посилання піктограми. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Де відкривається посилання. Показується, коли задано `link`. |

Поля в акордеоні **Icon utilities**:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Style | `st_style` | radio | порожньо (None) | порожньо (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | Форма тла. |
| Icon animation | `animation` | radio | порожньо (No) | порожньо (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | Анімація піктограми. |
| Icon orientation | `orientation` | radio | порожньо (Normal) | порожньо (Normal), `fa-rotate-90` (Rotate 90), `fa-rotate-180` (Rotate 180), `fa-rotate-270` (Rotate 270), `fa-flip-horizontal` (Flip horizontal), `fa-flip-vertical` (Flip vertical) | Обертання чи віддзеркалення. |

### [Divider](/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/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%D1%8C%D0%BD%D0%B8%D0%BA)

Горизонтальна лінія. Машинне ім’я: `az_separator`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Color | `bgcolor` | colour | none | Будь-який колір | Колір лінії. |
| Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | Чи перевизначати товщину теми. |
| Thickness | `custom_thickness` | slider | 3 | 0 до 20, крок 1 | Товщина лінії в пікселях. Показується, коли `thickness` має значення `custom`. |
| Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | Чи перевизначати довжину теми. |
| Width | `custom_width` | slider | 100 | 0 до 500, крок 10 | Довжина лінії в пікселях; 0 означає повну ширину. Показується, коли `width` має значення `custom`. |
| Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | Горизонтальне вирівнювання. Показується, коли `width` має значення `custom`. |

## Елементи макета

### [Section](/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)

Контейнер верхнього рівня для рядків, із опціями повної ширини, повної висоти й ефектів тла. Машинне ім’я: `az_section`. Нові розділи отримують клас `py-5` у розділі **HTML classes**.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Full width | `fluid` | toggle | вимкнено | `yes`, коли увімкнено | Використовує контейнер на повну ширину (`container-fluid`). |
| 100% height | `fullheight` | toggle | вимкнено | `yes`, коли увімкнено | Розділ заповнює висоту вікна перегляду. |
| Vertical centering | `vertical_centering` | toggle | вимкнено | `yes`, коли увімкнено | Центрує вміст вертикально. |

Поля в акордеоні **Background effects**. Усі, крім **Background effect**, залежать від його значення, як показує стовпець Description:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Background effect | `effect` | radio | порожньо (Simple image) | порожньо (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | Ефект тла. |
| Parallax speed | `parallax_speed` | slider | 0 | 0 до 100, крок 1 | Швидкість гортання паралакса. Показується, коли `effect` має значення `parallax`. |
| Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | Прикріплення тла зображення. Показується, коли `effect` має значення `parallax`. |
| Disable on mobile | `parallax_mobile_disable` | toggle | вимкнено | `yes`, коли увімкнено | Вимикає паралакс на екранах, вужчих за 481 px. Показується, коли `effect` має значення `parallax`. |
| Start color | `gradient_start_color` | colour | none | Будь-який колір | Початковий колір градієнта. Показується, коли `effect` має значення `gradient`. |
| End color | `gradient_end_color` | colour | none | Будь-який колір | Кінцевий колір градієнта. Показується, коли `effect` має значення `gradient`. |
| Gradient direction | `gradient_direction` | slider | 180 | 1 до 360, крок 1 | Кут градієнта в градусах. Показується, коли `effect` має значення `gradient`. |
| Start position | `gradient_start` | slider | 0 | 0 до 100, крок 1 | Позиція початкового кольору у відсотках. Показується, коли `effect` має значення `gradient`. |
| End position | `gradient_end` | slider | 100 | 0 до 100, крок 1 | Позиція кінцевого кольору у відсотках. Показується, коли `effect` має значення `gradient`. |
| Video options | `video_options` | checkboxes | жодного не позначено | `disMobile` (Disable on mobile devices), `loop` (Loop), `audio` (Unmute (Not reliable when auto-playing due to recent browser policy updates)), `noCrop` (Disable cropping out player), `resizeSection` (Resize section to match video), `showControls` (Show controls) | Опції тла YouTube. Показується, коли `effect` має значення `youtube`. |
| YouTube video URL | `video_youtube` | text | порожньо | URL YouTube | Фонове відео YouTube. Показується, коли `effect` має значення `youtube`. |
| Start time in seconds | `video_start` | text | 0 | Секунди | Час початку відео. Показується, коли `effect` має значення `youtube`. |
| Stop time in seconds | `video_stop` | text | 0 | Секунди | Час зупинки відео. Показується, коли `effect` має значення `youtube`. |

### [Row](/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)

Рядок сітки Bootstrap, що містить стовпці. Новий рядок починається з двох стовпців половинної ширини. Машинне ім’я: `az_row`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Equal-height columns | `equal` | toggle | вимкнено | `yes`, коли увімкнено | Дає всім стовпцям однакову висоту. |
| Mirror row | `reverse_horizontal` | toggle | вимкнено | `yes`, коли увімкнено | Показує стовпці у зворотному порядку на екранах від 768 px завширшки. |

### [Column](/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)

Стовпець усередині рядка. Рядки створюють свої стовпці, тож Column немає у виборі елементів. Машинне ім’я: `az_column`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Vertical centering | `vertical_centering` | toggle | вимкнено | `yes`, коли увімкнено | Центрує вміст стовпця вертикально. |

### [Tabs](/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)

Контейнер із перемикальними панелями вкладок; кожна вкладка додається елементом керування **Add tab**. Машинне ім’я: `az_tabs`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Tab direction | `az_dirrection` | radio | порожньо (Default) | порожньо (Default), `tabs-left` (Left), `tabs-right` (Right) | Позиція панелі вкладок. Код пише параметр саме так. |
| Style | `tab_style` | radio | порожньо (Default) | порожньо (Default), `modern` (Modern), `accordion` (Accordion) | Стиль вкладок. |
| Mobile friendly | `responsive` | toggle | on | `yes`, коли увімкнено | Показує вкладки як згортальний елемент на малих екранах. |

Кожна вкладка (`az_tab`) має власні налаштування:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Tab title | `title` | text | Title | Будь-який текст | Мітка вкладки. |
| Tab description | `subtitle` | ckeditor | порожньо | HTML | Необов’язковий короткий підзаголовок, показаний на активній вкладці. |

### [Collapse panel](/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)

Контейнер згортальних панелей; кожна панель додається елементом керування **Add toggle**. Машинне ім’я: `az_accordion`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Collapse | `collapsed` | toggle | вимкнено | `yes`, коли увімкнено | Починається з кожною панеллю закритою. Коли вимкнено, перша панель починається відкритою. |
| Expand icon | `expandicon` | radio | порожньо (None) | порожньо (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Піктограма поруч із заголовком кожної панелі. |

Кожна панель (`az_toggle`) має власні налаштування:

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Toggle title | `title` | text | Title | Будь-який текст | Заголовок панелі. |

### [Carousel](/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)

Контейнер слайдів; кожен слайд містить інші елементи й додається елементом керування **Add slide**. Слайди (`az_slide`) не мають власних полів. Машинне ім’я: `az_carousel`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Frames per slide | `items` | slider | 1 | 1 до 10, крок 1 | Слайдів показано поруч. Вужчі екрани показують менше. |
| Disable auto-play | `autoplay` | toggle | вимкнено | `yes`, коли увімкнено | Зупиняє автоматичне гортання слайдів. |
| Auto-play interval | `interval` | slider | 5000 | 1000 до 20000, крок 100 | Час між слайдами в мілісекундах. |
| Stop on hover | `stoponhover` | toggle | вимкнено | `yes`, коли увімкнено | Призупиняє автопрогравання, доки вказівник над каруселлю. |

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

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Dots navigation | `pagination` | toggle | on | `yes`, коли увімкнено | Показує крапку для кожного слайда. |
| Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Позиція крапок. |
| Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | Форма крапок. |
| Active dot transformation | `pagination_transform` | radio | порожньо (None) | порожньо (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | Ефект на активній крапці. |
| Dot color | `pagination_color` | colour | none | Будь-який колір | Колір крапок. |
| Active dot color | `pagination_active_color` | colour | none | Будь-який колір | Колір активної крапки. |

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

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Next/Previous | `navigation` | toggle | вимкнено | `yes`, коли увімкнено | Показує стрілки «наступна» й «попередня». |
| Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Позиція стрілок. |
| Dot shape | `navigation_shape` | radio | порожньо (No background) | порожньо (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | Форма тла стрілок. Діалогове вікно теж підписує його **Dot shape**. |
| Icon color | `navigation_icon_color` | colour | none | Будь-який колір | Колір піктограм стрілок. |
| Icon hover color | `navigation_icon_hover_color` | colour | none | Будь-який колір | Колір наведення піктограм стрілок. |
| Background color | `navigation_background_color` | colour | none | Будь-який колір | Колір тла стрілок. |
| Background hover color | `navigation_background_hover_color` | colour | none | Будь-який колір | Колір наведення тла стрілок. |
| Outside navigation position | `navigation_position` | select | `adjacent` (Adjacent) | `adjacent` (Adjacent), `topCenter` (Top center), `topLeft` (Top left), `topRight` (Top right), `bottomCenter` (Bottom center), `bottomLeft` (Bottom left), `bottomRight` (Bottom right) | Позиція стрілок поза слайдером. |

### [Positioned layers](/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%BF%D0%BE%D0%B7%D0%B8%D1%86%D1%96%D0%BE%D0%BD%D0%BE%D0%B2%D0%B0%D0%BD%D1%96-%D1%88%D0%B0%D1%80%D0%B8)

Полотно, на якому дочірні елементи перетягуються й змінюють розмір вільно. Елемент Positioned layers не можна вкласти всередину іншого такого. Машинне ім’я: `az_layers`. Кожен дочірній елемент зберігає своє місце в прихованих параметрах: `pos_left`, `pos_top`, `pos_width`, `pos_height` і `pos_zindex`.

| Мітка | Параметр | Елемент керування | Стандартно | Допустимі значення | Опис |
|---|---|---|---|---|---|
| Width | `width` | text | `100%` | Довжина CSS, наприклад `100px` або `50%` | Ширина полотна. Число без одиниць виміру рахується пікселями. |
| Height | `height` | slider | 500 | 0 до 10000, крок 1 | Висота полотна в пікселях. |
| Responsive | `responsive` | toggle | вимкнено | `yes`, коли увімкнено | Масштабує висоту полотна й розміри шрифтів із доступною шириною. |

## Що далі?

- [Огляд елементів](/hc/documentation/learn-dxpr-builder/elements)
- [Огляд макетів](/hc/documentation/learn-dxpr-builder/layout/overview)
- [Налаштування елементів](/hc/documentation/learn-dxpr-builder/element-settings)