--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/referencja/opis-elementow' title: 'Opis elementów. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:48:16+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder daje 22 elementy treści i 6 elementów układu. Ta strona wymienia nazwę maszynową każdego elementu i pola w jego oknie ustawień; część o układzie wymienia też kolumnę (Column) w każdym wierszu. Bloki i widoki Drupala, które kreator też oferuje jako elementy, nie są objęte. 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-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Opis elementów.' description: |- DXPR Builder daje 22 elementy treści i 6 elementów układu. Ta strona wymienia nazwę maszynową każdego elementu i pola w jego oknie ustawień; część o układzie wymienia też kolumnę (Column) w każdym wierszu. Bloki i widoki Drupala, które kreator też oferuje jako elementy, nie są objęte. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:48:16+0000' dateModified: '2026-10-24T17:19:22+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/pl/hc/dokumentacja/nauka-dxpr-builder/referencja/opis-elementow' articleSection: 'Elementy i CSS' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/referencja/opis-elementow' description: |- DXPR Builder daje 22 elementy treści i 6 elementów układu. Ta strona wymienia nazwę maszynową każdego elementu i pola w jego oknie ustawień; część o układzie wymienia też kolumnę (Column) w każdym wierszu. Bloki i widoki Drupala, które kreator też oferuje jako elementy, nie są objęte. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Dokumentacja techniczna](/pl/hc/documentation/learn-dxpr-builder/reference) /[Elementy i CSS](/pl/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Opis elementów.. Poznaj DXPR BuilderDokumentacja technicznaElementy i CSS ## W tym przewodniku DXPR Builder daje 22 elementy treści i 6 elementów układu. Ta strona wymienia nazwę maszynową każdego elementu i pola w jego oknie ustawień; część o układzie wymienia też kolumnę (Column) w każdym wierszu. Bloki i widoki Drupala, które kreator też oferuje jako elementy, nie są objęte. ## Jak czytać tę stronę Pierwsza tabela każdego elementu wymienia pola jego sekcji **General**. Pole z innej sekcji stoi w osobnej tabeli nazwanej według tej sekcji. Label to etykieta pola, jak pokazuje ją okno, w amerykańskiej pisowni interfejsu. Parameter to `param_name` w definicji elementu. Opcje czytają się jako `value` (etykieta). Dwa pola General pojawiają się na każdym elemencie i nie są powtarzane w tabelach: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | HTML ID | `hash` | text | puste; pole pokazuje wygenerowane ID jako tekst zastępczy (placeholder) | Najpierw litera, potem litery, cyfry, myślniki i podkreślenia | Własne ID elementu. | | HTML classes | `el_class` | multi-select | puste; nowe sekcje dostają `py-5` | Klasy narzędziowe Bootstrap 5 i klasy deklarowane przez włączone motywy; **Edit as text** przyjmuje dowolną klasę | Dodatkowe klasy CSS elementu. | Każdy element ma też sekcje **Style** i **Hover style**, opisane na stronie [karty Style](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/panel-styl). Wszystkie elementy poza Column i panelami w Tabs, Collapse panel i Carousel mają też sekcję **Animation**, opisaną na stronie [karty Animation](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje). Kolumna Kontrolka nazywa to, co pokazuje okno. Każda kontrolka pochodzi z typu parametru `type` w definicji elementu: | Kontrolka | Kod `type` | |---|---| | text | `textfield` | | number | `numericfield` | | link | `link` | | radio | `dropdown` z mniej niż 7 opcjami | | select | `dropdown` z 7 lub więcej opcjami | | toggle | `checkbox` z jedną opcją | | checkboxes | `checkbox` z kilkoma opcjami | | slider | `dxb_slider` | | colour | `colorpicker` | | icon, image, images, video, datetime | Typ `type` o tej samej nazwie. | | ckeditor | `textarea` | | ace | `html` | | social | `social_links` | Włączony przełącznik zapisuje wartość z komórki Dozwolone wartości; wyłączony zapisuje `no` albo pustą wartość. Pola wyboru zapisują zaznaczone wartości jako listę po przecinkach. Opcja wymieniona jako pusta zapisywana jest jako pusty ciąg; w oknie jej przycisk opcji ma klucz `dxpr-default`. Pola image i images oferują też wybór stylu obrazu: najpierw styl `optimize` witryny, gdy istnieje, potem **Original image (No resizing)** i pozostałe style obrazów. Niektóre pola pozostają ukryte, dopóki inne pole nie ma pasującej wartości; kolumna Opis nazywa tę zależność. ## Elementy treści ### [Tekst](/pl/hc/documentation/learn-dxpr-builder/elements/text) Tekst sformatowany edytowany w CKEditor. Nazwa maszynowa: `az_text`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Text | `content` | ckeditor | Nagłówek i akapit zastępcze | HTML | Treść tekstowa. | ### [Zdjęcie](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/obraz) Pojedynczy obraz, opcjonalnie owinięty w link. Nazwa maszynowa: `az_image`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Image | `image` | image | puste | Obraz z przeglądarki mediów | Obraz do pokazania. | | Image width | `width` | text | `100%` | Długość CSS, na przykład `100px` albo `50%` | Sama liczba liczy się jako piksele. | | Image height | `height` | text | puste | Długość CSS, na przykład `100px` | Sama liczba liczy się jako piksele. | | Image link | `link` | link | puste | URL albo ścieżka wewnętrzna | Opakowuje obraz w link. | | Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Gdzie otwiera się link. Pokazywane, gdy ustawiony jest `link`. | Pola w sekcji **SEO**: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Alt attribute | `alt` | text | puste | Dowolny tekst | Tekst alternatywny obrazu. | | Title attribute | `title` | text | puste | Dowolny tekst | Atrybut title obrazu. | ### [Karuzela zdjęć](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/karuzela-obrazow) Pokaz slajdów Bootstrap z kilku obrazów. Nazwa maszynowa: `az_images_carousel`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Images | `images` | images | puste | Obrazy z przeglądarki mediów | Jeden slajd na obraz. | | Interval | `interval` | slider | 5000 | od 0 do 10000, krok 1 | Czas między slajdami w milisekundach. Przy 0 slajdy nie przesuwają się same. | | Hide | `hide` | checkboxes | nic nie zaznaczono | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | Ukrywa wskaźniki, strzałki albo obie rzeczy. | Pola w sekcji **SEO**: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Alt attribute | `alt` | text | puste | Dowolny tekst | Tekst alternatywny obrazów. | | Title attribute | `title` | text | puste | Dowolny tekst | Atrybut title obrazów. | ### [Wideo](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/wideo) Osadza film z YouTube albo Vimeo. Nazwa maszynowa: `az_video`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Video link | `link` | text | puste | URL z YouTube albo Vimeo | Film do osadzenia. | | Video width | `width` | text | `100%` | Długość CSS, na przykład `100px` albo `50%` | Sama liczba liczy się jako piksele. | | Image | `image` | image | puste | Obraz z przeglądarki mediów | Obraz okładki; odtwarzacz wczytuje się po kliknięciu go przez odwiedzającego. | | Themed play button | `play` | toggle | wyłączone | `yes` po włączeniu | Pokazuje tematyczny przycisk odtwarzania na filmie. | ### [Lokalne wideo](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/lokalne-wideo) Odtwarza własny plik wideo w odtwarzaczu HTML5. Nazwa maszynowa: `az_video_local`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Video | `video` | video | puste | Plik MP4, WEBM, OGG albo OGV, do limitu wysyłania witryny | Plik wideo. | | Start playing automatically | `autoplay` | toggle | wyłączone | `autoplay` po włączeniu | Zaczyna odtwarzanie po wczytaniu strony. Autoodtwarzanie zawsze wycisza film. | | Muted | `muted` | toggle | wyłączone | `muted` po włączeniu | Wycisza film. Pokazywane, gdy `autoplay` jest wyłączone. | | Controls | `controls` | toggle | wyłączone | `controls` po włączeniu | Pokazuje kontrolki odtwarzacza. | | Loop | `loop` | toggle | wyłączone | `loop` po włączeniu | Zaczyna film od nowa po zakończeniu. | | Video width | `width` | text | `100%` | Długość CSS, na przykład `100px` albo `50%` | Szerokość odtwarzacza. | | Image | `image` | image | puste | Obraz z przeglądarki mediów | Obraz plakatu pokazywany przed odtwarzaniem. | ### [HTML](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/element-html) Surowy HTML edytowany w edytorze kodu. Nazwa maszynowa: `az_html`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Raw HTML | `content` | ace | Komunikat zastępczy „Click the edit button to change this HTML” | HTML | Treść HTML. | ### [Jumbotron](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/jumbotron) Duży baner z tytułem i tekstem wprowadzającym; w środku można upuszczać inne elementy. Nazwa maszynowa: `az_jumbotron`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Title | `title` | text | puste | Dowolny tekst | Tytuł banera. | | Lead | `lead` | text | puste | Dowolny tekst | Tekst wprowadzający pod tytułem. | | 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) | Klasy koloru tła i tekstu. | | Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | Rozmiar wypełnienia. | ### [Przycisk](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/przycisk) Przycisk Bootstrap linkujący do URL. Nazwa maszynowa: `az_button`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Title | `title` | text | Click to add text | Dowolny tekst | Tekst na przycisku. | | Link | `link` | link | puste | URL albo ścieżka wewnętrzna | Link przycisku. | | Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Gdzie otwiera się link. Pokazywane, gdy ustawiony jest `link`. | | Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; każda etykieta to wartość wielką literą | Styl przycisku Bootstrap. | | Block button | `block` | toggle | wyłączone | `btn-block` po włączeniu | Przycisk na całą szerokość. | | Outline style | `outlined` | toggle | wyłączone | `outline` po włączeniu | Renderuje `btn-outline-*` zamiast `btn-*`. | | Size | `size` | radio | puste (Normal) | puste (Normal), `btn-lg` (Large), `btn-sm` (Small) | Rozmiar przycisku. | ### [Element linku](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/link) Kontener opakowujący elementy w środku w jeden link. Nazwa maszynowa: `az_link`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Link | `link` | link | puste | URL albo ścieżka wewnętrzna | Link treści. | | Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Gdzie otwiera się link. Pokazywane, gdy ustawiony jest `link`. | Pola w sekcji **SEO**: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Title attribute | `title` | text | puste | Dowolny tekst | Atrybut title linku. | | Tell search engines not to follow | `nofollow` | toggle | wyłączone | `nofollow` po włączeniu | Dodaje `rel="nofollow"` do linku. | ### [Alert](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/alert) Komunikat alertu Bootstrap. Nazwa maszynowa: `az_alert`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Message | `content` | ckeditor | Tekst zastępczy | HTML | Komunikat. | | Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | Kolor alertu. | ### [Karta](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/karta) Kontener karty Bootstrap z opcjonalnym nagłówkiem i tytułem. Nazwa maszynowa: `az_card`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Header | `header` | text | puste | Dowolny tekst | Tekst nagłówka karty. | | Title | `title` | text | puste | Dowolny tekst | Tytuł karty. | | Type | `type` | select | puste (Default) | puste (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) | Klasy koloru karty. | ### [Panel](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/panel) Kontener panelu z paskiem tytułu. Nazwa maszynowa: `az_panel`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Title | `title` | text | puste | Dowolny tekst | Tytuł panelu. | | 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) | Styl panelu. | ### [Cytat blokowy](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/cytat-blokowy) Cytat z opcjonalną atrybucją. Nazwa maszynowa: `az_blockquote`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Text | `content` | ckeditor | Tekst zastępczy | HTML | Cytowany tekst. | | Cite | `cite` | text | puste | Dowolny tekst | Atrybucja pod cytatem. | | Reverse | `reverse` | toggle | wyłączone | `blockquote-reverse` po włączeniu | Wyrównuje cytat do końca linii (`text-end`). | ### [Linki społecznościowe](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/linki-spolecznosciowe) Rząd albo kolumna ikon sieci społecznościowych linkujących do stron profili. Nazwa maszynowa: `st_social`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Social links | `st_social_links` | social | Wiersze Facebook i YouTube | Jeden wiersz na ikonę: marka i URL profilu | Ikony i ich linki. | | Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | Układ ikon. | | Style | `st_style` | radio | puste (None) | puste (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | Kształt tła ikon. | | Size | `st_size` | radio | `lg` (Large) | `lg` (Large), puste (Small), `2x`, `3x`, `4x`, `5x`; cztery ostatnie etykiety odpowiadają wartościom | Rozmiar ikon. | | CSS3 hover effects | `st_css3_hover_effects` | radio | puste (None) | puste (None), `disc` (Disc), `pulse` (Pulse) | Efekt po najechaniu. Efekt nadaje ikonie kształt koła. | Pola w sekcji **Icon colors**: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Źródło koloru ikon. | | Color | `st_color` | colour | brak | Dowolny kolor | Własny kolor ikon. Pokazywane, gdy `st_theme_color` to `custom`. | | Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Źródło koloru tła ikon. | | Background color | `st_bgcolor` | colour | brak | Dowolny kolor | Własny kolor tła. Pokazywane, gdy `st_theme_bgcolor` to `custom`. | ### [Licznik liczb](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/licznik-liczbowy) Liczba licząca od wartości początkowej do końcowej. Nazwa maszynowa: `az_counter`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Start | `start` | number | 0 | Liczba | Liczba, od której zaczyna liczyć. | | End | `end` | number | 100 | Liczba | Liczba, do której dolicza. | | Font size | `fontsize` | slider | 30 | od 0 do 200, krok 1 | Rozmiar czcionki liczby w pikselach. | | Speed | `speed` | slider | 2000 | od 0 do 10000, krok 1 | Czas liczenia w milisekundach. | | Thousands separator | `seperator` | radio | puste (None) | puste (None), `,` (Comma), `.` (Dot), spacja (Space) | Oddziela tysiące w liczbie końcowej. Kod tak pisze nazwę parametru. | | Prefix | `prefix` | text | puste | Dowolny tekst | Znaki przed liczbą, na przykład `$`. | | Suffix | `postfix` | text | puste | Dowolny tekst | Znaki po liczbie, na przykład `%`. | ### [Licznik kołowy](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/licznik-kolowy) Kołowy wskaźnik postępu z opcjonalnym tekstem, linijką informacyjną i ikoną pośrodku. Nazwa maszynowa: `az_circle_counter`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Foreground color | `fgcolor` | colour | `#333333` | Dowolny kolor | Kolor łuku postępu. | | Background color | `bgcolor` | colour | `#999999` | Dowolny kolor | Kolor toru za łukiem. | | Fill color | `fill` | colour | brak | Dowolny kolor | Kolor wypełnienia w kole. | | Percent | `percent` | slider | 50 | od 0 do 100, krok 1 | Wartość postępu. | | Dimension | `dimension` | slider | 250 | od 100 do 500, krok 1 | Średnica koła w pikselach. | | Foreground width | `width` | slider | 10 | od 1 do 100, krok 1 | Grubość kreski łuku. | | Animation | `animation` | toggle | włączone | `yes` po włączeniu | Animuje łuk. | | Animation duration | `duration` | slider | 1500 | od 0 do 5000, krok 1 | W milisekundach. Pokazywane, gdy włączone jest `animation`. | | Animation delay | `delay` | slider | 0 | od 0 do 5000, krok 1 | W milisekundach. Pokazywane, gdy włączone jest `animation`. | | Animation in-viewport | `in_viewport` | toggle | włączone | `yes` po włączeniu | Zaczyna animację, gdy element wjeżdża w widok. Pokazywane, gdy włączone jest `animation`. | Pola w sekcji **Circle content**. Każde pole po **Show progress** pokazuje się tylko, gdy jest ono wyłączone: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Show progress | `show_progress` | toggle | wyłączone | `yes` po włączeniu | Pokazuje procent zamiast własnego tekstu i ikony. | | Text | `text` | text | puste | Dowolny tekst | Tekst pośrodku. | | Font size | `fontsize` | slider | 16 | od 0 do 100, krok 1 | Rozmiar tekstu pośrodku w pikselach. | | Text color | `text_color` | colour | brak | Dowolny kolor | Kolor tekstu pośrodku. | | Info | `info` | text | puste | Dowolny tekst | Dodatkowa linijka informacyjna. | | Info font size | `info_fontsize` | slider | 14 | od 0 do 100, krok 1 | Rozmiar linijki informacyjnej w pikselach. | | Info color | `info_color` | colour | brak | Dowolny kolor | Kolor linijki informacyjnej. | | Icon | `icon` | icon | puste | Ikona z zestawów dozwolonych przez profil kreatora | Ikona pośrodku. | | Icon size | `icon_size` | slider | 16 | od 0 do 100, krok 1 | Rozmiar czcionki ikony w pikselach. | | Icon color | `icon_color` | colour | brak | Dowolny kolor | Kolor ikony. | ### [Pasek postępu](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/pasek-postepu) Poziomy pasek postępu Bootstrap z etykietą. Nazwa maszynowa: `az_progress_bar`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Label | `label` | text | Click to add text | Dowolny tekst | Tekst w pasku. | | Progress | `width` | slider | 50 | od 0 do 100, krok 1 | Postęp w procentach. | | Bar height | `height` | slider | 45 | od 0 do 100, krok 1 | Wysokość paska w pikselach. | | Back color | `bgcolor` | colour | `#e9ecef` | Dowolny kolor | Kolor toru za paskiem. | | Front color | `fcolor` | colour | `#284ed9` | Dowolny kolor | Kolor paska. | | Grow animation | `grow_animation` | toggle | wyłączone | `yes` po włączeniu | Animuje pasek od 0 do wartości. | | Stripes | `options` | checkboxes | nic nie zaznaczono | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | Wzór w paski i ruchome paski. | ### [Minutnik](/pl/hc/documentation/learn-dxpr-builder/elements/countdown-timer) Odlicza do daty, pory dnia albo końca powtarzanego interwału. Nazwa maszynowa: `az_countdown`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain), `style1` (Grid), `style6` (3D flip), `style9` (Disc), `style10` (Airport style), `style12` (Transparent) | Styl wizualny. | | 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)) | Do czego odlicza minutnik. | | Date | `date` | datetime | puste | Data w formacie `d.m.Y`. | Docelowa data. Pokazywane, gdy `counter_scope` to `date`. | | Date / Time | `date_time` | datetime | puste | Data w formacie `d.m.Y` plus godzina (`H`) | Docelowa data i godzina. Pokazywane, gdy `counter_scope` to `date_time`. | | Time | `time` | datetime | puste | Godzina (`H`) | Docelowa godzina każdego dnia. Pokazywane, gdy `counter_scope` to `repeating`. | | Reset in hours | `reset_hours` | slider | 0 | od 0 do 24, krok 1 | Godziny w interwale. Pokazywane, gdy `counter_scope` to `resetting`. | | Reset in minutes | `reset_minutes` | slider | 0 | od 0 do 60, krok 1 | Minuty w interwale. Pokazywane, gdy `counter_scope` to `resetting`. | | Reset in seconds | `reset_seconds` | slider | 0 | od 0 do 60, krok 1 | Sekundy w interwale. Pokazywane, gdy `counter_scope` to `resetting`. | | Page referrer | `referrer` | link | puste | URL albo ścieżka wewnętrzna | Strona otwierana po wygaśnięciu odliczania. Pokazywane, gdy `counter_scope` to `repeating` albo `resetting`. | | Automatic restart | `restart` | toggle | wyłączone | `yes` po włączeniu | Zaczyna interwał od nowa po zakończeniu. Pokazywane, gdy `counter_scope` to `resetting`. | | Display options | `display` | checkboxes | wszystkie pięć zaznaczonych | `years` (Show remaining years), `days` (Show remaining days), `hours` (Show remaining hours), `minutes` (Show remaining minutes), `seconds` (Show remaining seconds) | Jednostki do pokazania. | ### [Marquee](/pl/hc/documentation/learn-dxpr-builder/elements/marquee) Poziomy pas obrazów przewijający się bez przerwy. Nazwa maszynowa: `az_marquee`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Images | `images` | images | Trzy kopie logo DXPR | Obrazy z przeglądarki mediów | Obrazy w pasie. | | Speed | `speed` | slider | 3 | od 1 do 5, krok 1 | Prędkość przewijania; 1 najwolniej, 5 najszybciej. | | Height | `height` | slider | 50 | od 10 do 200, krok 1 | Wysokość obrazów w pikselach. | | Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | Czy obrazy dzielą wysokość, czy szerokość. | | Image width | `width` | slider | 400 | od 50 do 500, krok 1 | Szerokość obrazów w pikselach. Pokazywane, gdy `image_layout` to `fw`. | | Gray scale | `grayscale` | toggle | wyłączone | `apply` po włączeniu | Pokazuje obrazy w szarości. | | Fade edges | `fade_edges` | toggle | wyłączone | `apply` po włączeniu | Wygasza pas na obu krawędziach. | Pola w sekcji **SEO**: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Alt attribute | `alt` | text | puste | Dowolny tekst | Tekst alternatywny obrazów. | | Title attribute | `title` | text | puste | Dowolny tekst | Atrybut title obrazów. | ### [Mapa](/pl/hc/documentation/learn-dxpr-builder/elements/map) Osadzona mapa Google dla adresu. Nazwa maszynowa: `az_map`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Address | `address` | text | puste | Adres ulicy | Lokalizacja do pokazania. | | Map width | `width` | text | `100%` | Długość CSS, na przykład `100px` albo `50%` | Sama liczba liczy się jako piksele. | | Map height | `height` | text | `400px` | Długość CSS, na przykład `100px` | Sama liczba liczy się jako piksele. | ### [Ikona](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/ikona) Pojedyncza ikona, opcjonalnie linkowana. Nazwa maszynowa: `az_icon`. Moduł dostarcza 14 zestawów ikon. Motywy i moduły mogą dodawać kolejne, a profil kreatora może ograniczać zestawy widoczne dla użytkowników. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Icon | `icon` | icon | `bi bi-heart` | Ikona z zestawów dozwolonych przez profil kreatora | Ikona. | | 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)) | Rozmiar ikony. | | Link | `link` | link | puste | URL albo ścieżka wewnętrzna | Link ikony. | | Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Gdzie otwiera się link. Pokazywane, gdy ustawiony jest `link`. | Pola w sekcji **Icon utilities**: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Style | `st_style` | radio | puste (None) | puste (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | Kształt tła. | | Icon animation | `animation` | radio | puste (No) | puste (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | Animacja ikony. | | Icon orientation | `orientation` | radio | puste (Normal) | puste (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) | Obrót albo odbicie. | ### [Separator](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/separator) Linia pozioma. Nazwa maszynowa: `az_separator`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Color | `bgcolor` | colour | brak | Dowolny kolor | Kolor linii. | | Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | Czy przesłonić grubość motywu. | | Thickness | `custom_thickness` | slider | 3 | od 0 do 20, krok 1 | Grubość linii w pikselach. Pokazywane, gdy `thickness` to `custom`. | | Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | Czy przesłonić długość motywu. | | Width | `custom_width` | slider | 100 | od 0 do 500, krok 10 | Długość linii w pikselach; 0 renderuje na całą szerokość. Pokazywane, gdy `width` to `custom`. | | Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | Wyrównanie poziome. Pokazywane, gdy `width` to `custom`. | ## Elementy układu ### [Sekcja](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/sekcje) Kontener najwyższego poziomu na wiersze, z opcjami pełnej szerokości, pełnej wysokości i efektu tła. Nazwa maszynowa: `az_section`. Nowe sekcje dostają klasę `py-5` w **HTML classes**. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Full width | `fluid` | toggle | wyłączone | `yes` po włączeniu | Używa kontenera na całą szerokość (`container-fluid`). | | 100% height | `fullheight` | toggle | wyłączone | `yes` po włączeniu | Sekcja wypełnia wysokość okna. | | Vertical centering | `vertical_centering` | toggle | wyłączone | `yes` po włączeniu | Wyśrodkowuje treść w pionie. | Pola w sekcji **Background effects**. Wszystkie poza **Background effect** zależą od jej wartości, jak pokazuje kolumna Opis: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Background effect | `effect` | radio | puste (Simple image) | puste (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | Efekt tła. | | Parallax speed | `parallax_speed` | slider | 0 | od 0 do 100, krok 1 | Prędkość przewijania paralaksy. Pokazywane, gdy `effect` to `parallax`. | | Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | Przywiązanie tła obrazu. Pokazywane, gdy `effect` to `parallax`. | | Disable on mobile | `parallax_mobile_disable` | toggle | wyłączone | `yes` po włączeniu | Wyłącza paralaksę na ekranach węższych niż 481 px. Pokazywane, gdy `effect` to `parallax`. | | Start color | `gradient_start_color` | colour | brak | Dowolny kolor | Początkowy kolor gradientu. Pokazywane, gdy `effect` to `gradient`. | | End color | `gradient_end_color` | colour | brak | Dowolny kolor | Końcowy kolor gradientu. Pokazywane, gdy `effect` to `gradient`. | | Gradient direction | `gradient_direction` | slider | 180 | od 1 do 360, krok 1 | Kąt gradientu w stopniach. Pokazywane, gdy `effect` to `gradient`. | | Start position | `gradient_start` | slider | 0 | od 0 do 100, krok 1 | Pozycja koloru początkowego w procentach. Pokazywane, gdy `effect` to `gradient`. | | End position | `gradient_end` | slider | 100 | od 0 do 100, krok 1 | Pozycja koloru końcowego w procentach. Pokazywane, gdy `effect` to `gradient`. | | Video options | `video_options` | checkboxes | nic nie zaznaczono | `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) | Opcje tła YouTube. Pokazywane, gdy `effect` to `youtube`. | | YouTube video URL | `video_youtube` | text | puste | URL z YouTube | Film z YouTube w tle. Pokazywane, gdy `effect` to `youtube`. | | Start time in seconds | `video_start` | text | 0 | Sekundy | Czas startu filmu. Pokazywane, gdy `effect` to `youtube`. | | Stop time in seconds | `video_stop` | text | 0 | Sekundy | Czas stopu filmu. Pokazywane, gdy `effect` to `youtube`. | ### [Wiersz](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/wiersze-i-kolumny) Wiersz siatki Bootstrap trzymający kolumny. Nowy wiersz zaczyna z dwiema kolumnami o połowie szerokości. Nazwa maszynowa: `az_row`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Equal-height columns | `equal` | toggle | wyłączone | `yes` po włączeniu | Daje wszystkim kolumnom tę samą wysokość. | | Mirror row | `reverse_horizontal` | toggle | wyłączone | `yes` po włączeniu | Odwraca kolejność kolumn na ekranach od 768 px w górę. | ### [Kolumna](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/wiersze-i-kolumny) Kolumna w wierszu. Wiersze tworzą swoje kolumny, więc elementu Column nie ma w selektorze elementów. Nazwa maszynowa: `az_column`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Vertical centering | `vertical_centering` | toggle | wyłączone | `yes` po włączeniu | Wyśrodkowuje treść kolumny w pionie. | ### [Karty](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/panel-kart) Kontener z przełączanymi panelami kart; każdą kartę dodaje kontrolka **Add tab**. Nazwa maszynowa: `az_tabs`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Tab direction | `az_dirrection` | radio | puste (Default) | puste (Default), `tabs-left` (Left), `tabs-right` (Right) | Pozycja paska kart. Kod tak pisze nazwę parametru. | | Style | `tab_style` | radio | puste (Default) | puste (Default), `modern` (Modern), `accordion` (Accordion) | Styl kart. | | Mobile friendly | `responsive` | toggle | włączone | `yes` po włączeniu | Pokazuje karty jako zwijane na małych ekranach. | Każda karta (`az_tab`) ma własne ustawienia: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Tab title | `title` | text | Title | Dowolny tekst | Etykieta karty. | | Tab description | `subtitle` | ckeditor | puste | HTML | Opcjonalna krótka linijka pokazywana na aktywnej karcie. | ### [Panel zwijany](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/panel-zwijany) Kontener zwijanych paneli; każdy panel dodaje kontrolka **Add toggle**. Nazwa maszynowa: `az_accordion`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Collapse | `collapsed` | toggle | wyłączone | `yes` po włączeniu | Zaczyna z każdym panelem zwiniętym. Gdy wyłączone, pierwszy panel zaczyna otwarty. | | Expand icon | `expandicon` | radio | puste (None) | puste (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Ikona przy każdym tytule panelu. | Każdy panel (`az_toggle`) ma własne ustawienia: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Toggle title | `title` | text | Title | Dowolny tekst | Tytuł panelu. | ### [Karuzela](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-karuzeli) Kontener slajdów; każdy slajd trzyma inne elementy i dodaje go kontrolka **Add slide**. Slajdy (`az_slide`) nie mają własnych pól. Nazwa maszynowa: `az_carousel`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Frames per slide | `items` | slider | 1 | od 1 do 10, krok 1 | Slajdy pokazywane obok siebie. Węższe ekrany pokazują mniej. | | Disable auto-play | `autoplay` | toggle | wyłączone | `yes` po włączeniu | Zatrzymuje samodzielne przesuwanie slajdów. | | Auto-play interval | `interval` | slider | 5000 | od 1000 do 20000, krok 100 | Czas między slajdami w milisekundach. | | Stop on hover | `stoponhover` | toggle | wyłączone | `yes` po włączeniu | Wstrzymuje autoodtwarzanie, gdy kursor jest nad karuzelą. | Pola w sekcji **Dots**. Każde pole po **Dots navigation** pokazuje się tylko, gdy jest ono włączone: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Dots navigation | `pagination` | toggle | włączone | `yes` po włączeniu | Pokazuje kropkę na każdy slajd. | | Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Pozycja kropek. | | Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | Kształt kropki. | | Active dot transformation | `pagination_transform` | radio | puste (None) | puste (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | Efekt na aktywnej kropce. | | Dot color | `pagination_color` | colour | brak | Dowolny kolor | Kolor kropek. | | Active dot color | `pagination_active_color` | colour | brak | Dowolny kolor | Kolor aktywnej kropki. | Pola w sekcji **Next/Previous**. Każde pole po **Next/Previous** pokazuje się tylko, gdy jest ono włączone: | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Next/Previous | `navigation` | toggle | wyłączone | `yes` po włączeniu | Pokazuje strzałki następna i poprzednia. | | Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Pozycja strzałek. | | Dot shape | `navigation_shape` | radio | puste (No background) | puste (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | Kształt tła strzałek. Okno nazywa je też **Dot shape**. | | Icon color | `navigation_icon_color` | colour | brak | Dowolny kolor | Kolor ikon strzałek. | | Icon hover color | `navigation_icon_hover_color` | colour | brak | Dowolny kolor | Kolor ikon strzałek po najechaniu. | | Background color | `navigation_background_color` | colour | brak | Dowolny kolor | Kolor tła strzałek. | | Background hover color | `navigation_background_hover_color` | colour | brak | Dowolny kolor | Kolor tła strzałek po najechaniu. | | 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) | Pozycja strzałek poza suwakiem. | ### [Pozycjonowane warstwy](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/positioned-layers) Płótno, na którym elementy potomne przeciąga się i skaluje swobodnie. Elementu Positioned layers nie można zagnieżdżać w drugim. Nazwa maszynowa: `az_layers`. Każdy potomek przechowuje swoje miejsce w ukrytych parametrach: `pos_left`, `pos_top`, `pos_width`, `pos_height` i `pos_zindex`. | Etykieta | Parametr | Kontrolka | Domyślnie | Dozwolone wartości | Opis | |---|---|---|---|---|---| | Width | `width` | text | `100%` | Długość CSS, na przykład `100px` albo `50%` | Szerokość płótna. Sama liczba liczy się jako piksele. | | Height | `height` | slider | 500 | od 0 do 10000, krok 1 | Wysokość płótna w pikselach. | | Responsive | `responsive` | toggle | wyłączone | `yes` po włączeniu | Skaluje wysokość płótna i rozmiary czcionek wraz z dostępną szerokością. | ## Co dalej? - [Przegląd elementów](/hc/documentation/learn-dxpr-builder/elements) - [Przegląd układu](/hc/documentation/learn-dxpr-builder/layout/overview) - [Ustawienia elementów](/hc/documentation/learn-dxpr-builder/element-settings)