Довідник: елементи та їхні поля налаштувань.

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

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, задокументовані на сторінці Вкладка стилю. Усі елементи, крім Column і панелей усередині Tabs, Collapse panel і Carousel, також мають акордеон Animation, задокументований на сторінці Вкладка анімації.

Стовпець 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

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

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

Image

Окреме зображення, необов’язково обгорнуте посиланням. Машинне ім’я: 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 зображення.

Слайдшоу 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

Вбудовує відео 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

Відтворює відеофайл із власного сервера в плеєрі 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

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

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

Jumbotron

Великий банер із заголовком і вступним текстом; всередину можна перетягувати інші елементи. Машинне ім’я: 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

Кнопка 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) Розмір кнопки.

Контейнер, що обгортає елементи всередині одним посиланням. Машинне ім’я: 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

Повідомлення-сповіщення 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

Контейнер-картка 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

Контейнер-панель із рядком заголовка. Машинне ім’я: 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

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

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

Рядок або стовпець піктограм соцмереж, що посилаються на сторінки профілів. Машинне ім’я: 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

Число, що зростає від початкового значення до кінцевого. Машинне ім’я: 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

Круговий індикатор прогресу з необов’язковим текстом, інформаційним рядком і піктограмою в центрі. Машинне ім’я: 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

Горизонтальна смуга прогресу 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

Відлічує до дати, часу доби або кінця повторюваного інтервалу. Машинне ім’я: 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

Горизонтальна смуга зображень, що гортається без зупинки. Машинне ім’я: 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

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

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

Icon

Окрема піктограма, необов’язково з посиланням. Машинне ім’я: 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

Горизонтальна лінія. Машинне ім’я: 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

Контейнер верхнього рівня для рядків, із опціями повної ширини, повної висоти й ефектів тла. Машинне ім’я: 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

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

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

Column

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

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

Tabs

Контейнер із перемикальними панелями вкладок; кожна вкладка додається елементом керування 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

Контейнер згортальних панелей; кожна панель додається елементом керування 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 Будь-який текст Заголовок панелі.

Контейнер слайдів; кожен слайд містить інші елементи й додається елементом керування 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

Полотно, на якому дочірні елементи перетягуються й змінюють розмір вільно. Елемент 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, коли увімкнено Масштабує висоту полотна й розміри шрифтів із доступною шириною.

Що далі?