Opis elementów..

Poznaj DXPR BuilderDokumentacja technicznaElementy i CSS

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. Wszystkie elementy poza Column i panelami w Tabs, Collapse panel i Carousel mają też sekcję Animation, opisaną na stronie karty Animation.

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

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

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.

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

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

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

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

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

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.

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

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

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

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

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).

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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?