Riferimento agli elementi.

Impara DXPR BuilderRiferimentoElementi e CSS

DXPR Builder fornisce 22 elementi di contenuto e 6 elementi di layout. Questa pagina elenca il machine name di ogni elemento e i campi nella sua finestra delle impostazioni; la parte layout elenca anche la Column dentro ogni riga. I blocchi e le viste Drupal, che il builder offre anche come elementi, non sono trattati.

Come leggere questa pagina

La prima tabella di ogni elemento elenca i campi nel suo accordion General. Un campo di un altro accordion sta in una tabella separata che porta il nome di quell’accordion. Label è l’etichetta del campo come la mostra la finestra, nell’ortografia americana dell’interfaccia. Parameter è il param_name nella definizione dell’elemento. Le opzioni si leggono value (Label).

Due campi General compaiono su ogni elemento e non sono ripetuti nelle tabelle:

Label Parameter Control Default Allowed values Description
HTML ID hash text vuoto; il campo mostra l’ID generato come segnaposto Prima una lettera, poi lettere, numeri, trattini e underscore ID personalizzato per l’elemento.
HTML classes el_class multi-select vuoto; le nuove sezioni ricevono py-5 Classi di utilità Bootstrap 5 e classi dichiarate dai temi attivi; Edit as text accetta qualsiasi classe Classi CSS in più per l’elemento.

Ogni elemento ha anche gli accordion Style e Hover style, documentati nella pagina Scheda di stile. Tutti gli elementi tranne Column e i pannelli dentro Tabs, Collapse panel e Carousel hanno anche l’accordion Animation, documentato nella pagina Scheda di animazione.

La colonna Control indica cosa mostra la finestra. Ogni controllo deriva da un type di parametro nella definizione dell’elemento:

Control Code type
text textfield
number numericfield
link link
radio dropdown con meno di 7 opzioni
select dropdown con 7 o più opzioni
toggle checkbox con un’opzione
checkboxes checkbox con più opzioni
slider dxb_slider
colour colorpicker
icon, image, images, video, datetime Il type con lo stesso nome
ckeditor textarea
ace html
social social_links

Un interruttore attivo salva il valore nella sua cella Allowed values; un interruttore spento salva no o un valore vuoto. Le caselle salvano i valori selezionati come elenco separato da virgole. Un’opzione elencata come vuota è salvata come stringa vuota; nella finestra il suo pulsante radio ha la chiave dxpr-default.

I campi image e images offrono anche una scelta di stile immagine: prima lo stile optimize del sito quando esiste, poi Original image (No resizing) e gli altri stili immagine. Alcuni campi restano nascosti finché un altro campo non ha un valore corrispondente; la colonna Description indica quella dipendenza.

Elementi di contenuto

Text

Testo formattato modificato in CKEditor. Machine name: az_text.

Label Parameter Control Default Allowed values Description
Text content ckeditor Intestazione e paragrafo segnaposto HTML Il contenuto di testo.

Image

Una singola immagine, facoltativamente racchiusa in un link. Machine name: az_image.

Label Parameter Control Default Allowed values Description
Image image image vuoto Immagine dal browser multimediale L’immagine da mostrare.
Image width width text 100% Lunghezza CSS, per esempio 100px o 50% Un numero senza unità vale come pixel.
Image height height text vuoto Lunghezza CSS, per esempio 100px Un numero senza unità vale come pixel.
Image link link link vuoto URL o percorso interno Racchiude l’immagine in un link.
Image link target link_target radio _self (Same window) _self (Same window), _blank (New window) Dove si apre il link. Solo quando link è impostato.

Campi nell’accordion SEO:

Label Parameter Control Default Allowed values Description
Alt attribute alt text vuoto Qualsiasi testo Testo alt dell’immagine.
Title attribute title text vuoto Qualsiasi testo Attributo title dell’immagine.

Una presentazione Bootstrap di più immagini. Machine name: az_images_carousel.

Label Parameter Control Default Allowed values Description
Images images images vuoto Immagini dal browser multimediale Una slide per immagine.
Interval interval slider 5000 da 0 a 10000, passo 1 Tempo tra le slide in millisecondi. A 0 le slide non avanzano da sole.
Hide hide checkboxes nessuno selezionato pagination_control (Hide pagination control), prev_next_buttons (Hide prev/next buttons) Nasconde gli indicatori, le frecce o entrambi.

Campi nell’accordion SEO:

Label Parameter Control Default Allowed values Description
Alt attribute alt text vuoto Qualsiasi testo Testo alt delle immagini.
Title attribute title text vuoto Qualsiasi testo Attributo title delle immagini.

Video

Incorpora un video YouTube o Vimeo. Machine name: az_video.

Label Parameter Control Default Allowed values Description
Video link link text vuoto URL YouTube o Vimeo Il video da incorporare.
Video width width text 100% Lunghezza CSS, per esempio 100px o 50% Un numero senza unità vale come pixel.
Image image image vuoto Immagine dal browser multimediale Immagine di copertina; il lettore si carica quando il visitatore fa clic.
Themed play button play toggle off yes quando attivo Mostra il pulsante play del tema sopra il video.

Local video

Riproduce un file video self-hosted in un lettore HTML5. Machine name: az_video_local.

Label Parameter Control Default Allowed values Description
Video video video vuoto File MP4, WEBM, OGG o OGV, fino al limite di caricamento del sito Il file video.
Start playing automatically autoplay toggle off autoplay quando attivo Avvia la riproduzione al caricamento della pagina. La riproduzione automatica silenzia sempre il video.
Muted muted toggle off muted quando attivo Silenzia il video. Solo mentre autoplay è spento.
Controls controls toggle off controls quando attivo Mostra i controlli del lettore.
Loop loop toggle off loop quando attivo Riavvia il video quando finisce.
Video width width text 100% Lunghezza CSS, per esempio 100px o 50% Larghezza del lettore.
Image image image vuoto Immagine dal browser multimediale Immagine poster mostrata prima della riproduzione.

HTML

HTML grezzo modificato in un editor di codice. Machine name: az_html.

Label Parameter Control Default Allowed values Description
Raw HTML content ace Messaggio segnaposto "Click the edit button to change this HTML" HTML Il contenuto HTML.

Jumbotron

Grande banner con titolo e testo di apertura; altri elementi possono essere trascinati dentro. Machine name: az_jumbotron.

Label Parameter Control Default Allowed values Description
Title title text vuoto Qualsiasi testo Titolo del banner.
Lead lead text vuoto Qualsiasi testo Sottotitolo mostrato sotto il titolo.
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) Classi di colore di sfondo e testo.
Padding padding radio p-5 (Large) p-5 (Large), p-4 (Medium), p-3 (Small) Dimensione del padding.

Button

Un pulsante Bootstrap che collega a un URL. Machine name: az_button.

Label Parameter Control Default Allowed values Description
Title title text Fai clic per aggiungere testo Qualsiasi testo Testo sul pulsante.
Link link link vuoto URL o percorso interno Link del pulsante.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) Dove si apre il link. Solo quando link è impostato.
Type type select primary (Primary) primary, secondary, success, info, warning, danger, link, light, dark; ciascuna etichetta è il valore con l’iniziale maiuscola Stile pulsante Bootstrap.
Block button block toggle off btn-block quando attivo Pulsante a tutta larghezza.
Outline style outlined toggle off outline quando attivo Rende btn-outline-* invece di btn-*.
Size size radio vuoto (Normal) vuoto (Normal), btn-lg (Large), btn-sm (Small) Dimensione del pulsante.

Contenitore che racchiude in un unico link gli elementi al suo interno. Machine name: az_link.

Label Parameter Control Default Allowed values Description
Link link link vuoto URL o percorso interno Link del contenuto.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) Dove si apre il link. Solo quando link è impostato.

Campi nell’accordion SEO:

Label Parameter Control Default Allowed values Description
Title attribute title text vuoto Qualsiasi testo Attributo title del link.
Tell search engines not to follow nofollow toggle off nofollow quando attivo Aggiunge rel="nofollow" al link.

Alert

Un messaggio di avviso Bootstrap. Machine name: az_alert.

Label Parameter Control Default Allowed values Description
Message content ckeditor Testo segnaposto HTML Il messaggio.
Type type radio alert-success (Success) alert-success (Success), alert-info (Info), alert-warning (Warning), alert-danger (Danger) Colore dell’avviso.

Card

Un contenitore card Bootstrap con header e titolo facoltativi. Machine name: az_card.

Label Parameter Control Default Allowed values Description
Header header text vuoto Qualsiasi testo Testo dell’header della card.
Title title text vuoto Qualsiasi testo Titolo della card.
Type type select vuoto (Default) vuoto (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) Classi di colore della card.

Panel

Un contenitore pannello con barra del titolo. Machine name: az_panel.

Label Parameter Control Default Allowed values Description
Title title text vuoto Qualsiasi testo Titolo del pannello.
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) Stile del pannello.

Block quote

Una citazione con fonte facoltativa. Machine name: az_blockquote.

Label Parameter Control Default Allowed values Description
Text content ckeditor Testo segnaposto HTML Il testo citato.
Cite cite text vuoto Qualsiasi testo Fonte mostrata sotto la citazione.
Reverse reverse toggle off blockquote-reverse quando attivo Allinea la citazione alla fine della riga (text-end).

Una riga o colonna di icone di social network che collegano a pagine profilo. Machine name: st_social.

Label Parameter Control Default Allowed values Description
Social links st_social_links social Righe Facebook e YouTube Una riga per icona: un brand e l’URL del profilo Le icone e i loro link.
Layout st_type radio inline (Inline) inline (Inline), stacked (Stacked) Layout delle icone.
Style st_style radio vuoto (None) vuoto (None), rounded (Rounded), circle (Circle), square (Square) Forma dello sfondo dell’icona.
Size st_size radio lg (Large) lg (Large), vuoto (Small), 2x, 3x, 4x, 5x; le ultime quattro etichette corrispondono ai loro valori Dimensione dell’icona.
CSS3 hover effects st_css3_hover_effects radio vuoto (None) vuoto (None), disc (Disc), pulse (Pulse) Effetto al passaggio del mouse. Un effetto rende l’icona stile cerchio.

Campi nell’accordion Icon colors:

Label Parameter Control Default Allowed values Description
Color st_theme_color radio custom (Custom) brand (Brand color), custom (Custom), inherit (Inherit) Origine del colore dell’icona.
Color st_color colour nessuno Qualsiasi colore Colore icona personalizzato. Solo quando st_theme_color è custom.
Background color st_theme_bgcolor radio custom (Custom) brand (Brand color), custom (Custom), inherit (Inherit) Origine del colore di sfondo dell’icona.
Background color st_bgcolor colour nessuno Qualsiasi colore Colore di sfondo personalizzato. Solo quando st_theme_bgcolor è custom.

Number counter

Un numero che conta da un valore iniziale a un valore finale. Machine name: az_counter.

Label Parameter Control Default Allowed values Description
Start start number 0 Numero Numero da cui iniziare a contare.
End end number 100 Numero Numero fino a cui contare.
Font size fontsize slider 30 da 0 a 200, passo 1 Dimensione del numero in pixel.
Speed speed slider 2000 da 0 a 10000, passo 1 Tempo in millisecondi per finire il conteggio.
Thousands separator seperator radio vuoto (None) vuoto (None), , (Comma), . (Dot), a space (Space) Separa le migliaia nel numero finale. Il codice scrive il parametro così.
Prefix prefix text vuoto Qualsiasi testo Caratteri prima del numero, per esempio $.
Suffix postfix text vuoto Qualsiasi testo Caratteri dopo il numero, per esempio %.

Circle counter

Indicatore di avanzamento circolare con testo facoltativo, una riga info e un’icona al centro. Machine name: az_circle_counter.

Label Parameter Control Default Allowed values Description
Foreground color fgcolor colour #333333 Qualsiasi colore Colore dell’arco di avanzamento.
Background color bgcolor colour #999999 Qualsiasi colore Colore della traccia dietro l’arco.
Fill color fill colour nessuno Qualsiasi colore Colore di riempimento dentro il cerchio.
Percent percent slider 50 da 0 a 100, passo 1 Valore di avanzamento.
Dimension dimension slider 250 da 100 a 500, passo 1 Diametro del cerchio in pixel.
Foreground width width slider 10 da 1 a 100, passo 1 Spessore del tratto dell’arco.
Animation animation toggle on yes quando attivo Anima l’arco.
Animation duration duration slider 1500 da 0 a 5000, passo 1 In millisecondi. Solo quando animation è attivo.
Animation delay delay slider 0 da 0 a 5000, passo 1 In millisecondi. Solo quando animation è attivo.
Animation in-viewport in_viewport toggle on yes quando attivo Avvia l’animazione quando l’elemento entra in vista scorrendo. Solo quando animation è attivo.

Campi nell’accordion Circle content. Ogni campo dopo Show progress è mostrato solo mentre è spento:

Label Parameter Control Default Allowed values Description
Show progress show_progress toggle off yes quando attivo Mostra la percentuale invece del tuo testo e della tua icona.
Text text text vuoto Qualsiasi testo Testo centrale.
Font size fontsize slider 16 da 0 a 100, passo 1 Dimensione del testo centrale in pixel.
Text color text_color colour nessuno Qualsiasi colore Colore del testo centrale.
Info info text vuoto Qualsiasi testo Riga info secondaria.
Info font size info_fontsize slider 14 da 0 a 100, passo 1 Dimensione della riga info in pixel.
Info color info_color colour nessuno Qualsiasi colore Colore della riga info.
Icon icon icon vuoto Icona dai set consentiti dal tuo profilo builder Centra l’icona.
Icon size icon_size slider 16 da 0 a 100, passo 1 Dimensione dell’icona in pixel.
Icon color icon_color colour nessuno Qualsiasi colore Colore dell’icona.

Progress bar

Barra di avanzamento Bootstrap orizzontale con etichetta. Machine name: az_progress_bar.

Label Parameter Control Default Allowed values Description
Label label text Fai clic per aggiungere testo Qualsiasi testo Testo dentro la barra.
Progress width slider 50 da 0 a 100, passo 1 Avanzamento in percentuale.
Bar height height slider 45 da 0 a 100, passo 1 Altezza della barra in pixel.
Back color bgcolor colour #e9ecef Qualsiasi colore Colore della traccia dietro la barra.
Front color fcolor colour #284ed9 Qualsiasi colore Colore della barra.
Grow animation grow_animation toggle off yes quando attivo Anima la barra da 0 al suo valore.
Stripes options checkboxes nessuno selezionato progress-bar-striped (Add striped pattern to bar), progress-bar-animated (Animate stripes (requires striped pattern)) Motivo a strisce e strisce in movimento.

Countdown timer

Conto alla rovescia fino a una data, un’ora del giorno o la fine di un intervallo che si ripete. Machine name: az_countdown.

Label Parameter Control Default Allowed values Description
Countdown style countdown_style radio plain (Plain) plain (Plain), style1 (Grid), style6 (3D flip), style9 (Disc), style10 (Airport style), style12 (Transparent) Stile visivo.
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)) L’obiettivo del conto alla rovescia.
Date date datetime vuoto Data in formato d.m.Y. Data di destinazione. Solo quando counter_scope è date.
Date / Time date_time datetime vuoto Data in formato d.m.Y più ora (H) Data e ora di destinazione. Solo quando counter_scope è date_time.
Time time datetime vuoto Ora (H) Ora di destinazione di ogni giorno. Solo quando counter_scope è repeating.
Reset in hours reset_hours slider 0 da 0 a 24, passo 1 Ore nell’intervallo. Solo quando counter_scope è resetting.
Reset in minutes reset_minutes slider 0 da 0 a 60, passo 1 Minuti nell’intervallo. Solo quando counter_scope è resetting.
Reset in seconds reset_seconds slider 0 da 0 a 60, passo 1 Secondi nell’intervallo. Solo quando counter_scope è resetting.
Page referrer referrer link vuoto URL o percorso interno Pagina aperta alla scadenza del conto alla rovescia. Solo quando counter_scope è repeating o resetting.
Automatic restart restart toggle off yes quando attivo Riavvia l’intervallo quando finisce. Solo quando counter_scope è resetting.
Display options display checkboxes tutti e cinque selezionati years (Show remaining years), days (Show remaining days), hours (Show remaining hours), minutes (Show remaining minutes), seconds (Show remaining seconds) Unità da mostrare.

Marquee

Striscia orizzontale di immagini che scorre senza fermarsi. Machine name: az_marquee.

Label Parameter Control Default Allowed values Description
Images images images Tre copie del logo DXPR Immagini dal browser multimediale Le immagini nella striscia.
Speed speed slider 3 da 1 a 5, passo 1 Velocità di scorrimento; 1 è la più lenta, 5 la più veloce.
Height height slider 50 da 10 a 200, passo 1 Altezza dell’immagine in pixel.
Image layout image_layout radio fh (Fixed height images) fh (Fixed height images), fw (Fixed width images) Se le immagini condividono un’altezza o una larghezza.
Image width width slider 400 da 50 a 500, passo 1 Larghezza dell’immagine in pixel. Solo quando image_layout è fw.
Gray scale grayscale toggle off apply quando attivo Mostra le immagini in scala di grigi.
Fade edges fade_edges toggle off apply quando attivo Sfuma la striscia a entrambi i bordi.

Campi nell’accordion SEO:

Label Parameter Control Default Allowed values Description
Alt attribute alt text vuoto Qualsiasi testo Testo alt delle immagini.
Title attribute title text vuoto Qualsiasi testo Attributo title delle immagini.

Map

Mappa Google incorporata per un indirizzo. Machine name: az_map.

Label Parameter Control Default Allowed values Description
Address address text vuoto Indirizzo Luogo da mostrare.
Map width width text 100% Lunghezza CSS, per esempio 100px o 50% Un numero senza unità vale come pixel.
Map height height text 400px Lunghezza CSS, per esempio 100px Un numero senza unità vale come pixel.

Icon

Icona singola, facoltativamente collegata. Machine name: az_icon. Il modulo fornisce 14 set di icone. Temi e moduli possono aggiungerne altri e un profilo builder può limitare i set visibili ai suoi utenti.

Label Parameter Control Default Allowed values Description
Icon icon icon bi bi-heart Icona dai set consentiti dal tuo profilo builder L’icona.
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)) Dimensione dell’icona.
Link link link vuoto URL o percorso interno Link dell’icona.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) Dove si apre il link. Solo quando link è impostato.

Campi nell’accordion Icon utilities:

Label Parameter Control Default Allowed values Description
Style st_style radio vuoto (None) vuoto (None), stbe-util-icon-rounded (Rounded), stbe-util-icon-circle (Circle), stbe-util-icon-square (Square) Forma dello sfondo.
Icon animation animation radio vuoto (No) vuoto (No), fa-spin (Spin), fa-pulse (Pulse) Animazione dell’icona.
Icon orientation orientation radio vuoto (Normal) vuoto (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) Rotazione o ribaltamento.

Divider

Riga orizzontale. Machine name: az_separator.

Label Parameter Control Default Allowed values Description
Color bgcolor colour nessuno Qualsiasi colore Colore della linea.
Thickness thickness radio auto (Theme default) auto (Theme default), custom (Custom thickness) Se sovrascrivere lo spessore del tema.
Thickness custom_thickness slider 3 da 0 a 20, passo 1 Spessore della linea in pixel. Solo quando thickness è custom.
Length width radio auto (Theme default) auto (Theme default), custom (Custom width) Se sovrascrivere la lunghezza del tema.
Width custom_width slider 100 da 0 a 500, passo 10 Lunghezza della linea in pixel; 0 rende tutta la larghezza. Solo quando width è custom.
Align align radio left (Left) left (Left), center (Center), right (Right) Allineamento orizzontale. Solo quando width è custom.

Elementi di layout

Section

Contenitore di primo livello per righe, con opzioni di tutta larghezza, tutta altezza ed effetti di sfondo. Machine name: az_section. Le nuove sezioni ricevono la classe py-5 in HTML classes.

Label Parameter Control Default Allowed values Description
Full width fluid toggle off yes quando attivo Usa un contenitore a tutta larghezza (container-fluid).
100% height fullheight toggle off yes quando attivo La sezione riempie l’altezza della viewport.
Vertical centering vertical_centering toggle off yes quando attivo Centra verticalmente il contenuto.

Campi nell’accordion Background effects. Tutti tranne Background effect dipendono dal suo valore, come mostra la colonna Description:

Label Parameter Control Default Allowed values Description
Background effect effect radio vuoto (Simple image) vuoto (Simple image), fixed (Fixed image), parallax (Parallax image), gradient (Gradient), youtube (YouTube video) Effetto di sfondo.
Parallax speed parallax_speed slider 0 da 0 a 100, passo 1 Velocità di scorrimento parallasse. Solo quando effect è parallax.
Parallax mode parallax_mode radio fixed (Fixed) fixed (Fixed), scroll (Local) Allegato di sfondo dell’immagine. Solo quando effect è parallax.
Disable on mobile parallax_mobile_disable toggle off yes quando attivo Disattiva la parallasse su schermi più stretti di 481 px. Solo quando effect è parallax.
Start color gradient_start_color colour nessuno Qualsiasi colore Colore iniziale della sfumatura. Solo quando effect è gradient.
End color gradient_end_color colour nessuno Qualsiasi colore Colore finale della sfumatura. Solo quando effect è gradient.
Gradient direction gradient_direction slider 180 da 1 a 360, passo 1 Angolo della sfumatura in gradi. Solo quando effect è gradient.
Start position gradient_start slider 0 da 0 a 100, passo 1 Posizione del colore iniziale in percento. Solo quando effect è gradient.
End position gradient_end slider 100 da 0 a 100, passo 1 Posizione del colore finale in percento. Solo quando effect è gradient.
Video options video_options checkboxes nessuno selezionato 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) Opzioni di sfondo YouTube. Solo quando effect è youtube.
YouTube video URL video_youtube text vuoto URL YouTube Video di sfondo YouTube. Solo quando effect è youtube.
Start time in seconds video_start text 0 Secondi Ora di inizio del video. Solo quando effect è youtube.
Stop time in seconds video_stop text 0 Secondi Ora di fine del video. Solo quando effect è youtube.

Row

Riga di griglia Bootstrap che contiene colonne. Una nuova riga parte con due colonne a mezza larghezza. Machine name: az_row.

Label Parameter Control Default Allowed values Description
Equal-height columns equal toggle off yes quando attivo Dà a tutte le colonne la stessa altezza.
Mirror row reverse_horizontal toggle off yes quando attivo Inverte l’ordine delle colonne su schermi da 768 px in su.

Column

Una colonna dentro una riga. Le righe creano le proprie colonne, quindi Column non è nel selettore di elementi. Machine name: az_column.

Label Parameter Control Default Allowed values Description
Vertical centering vertical_centering toggle off yes quando attivo Centra verticalmente il contenuto della colonna.

Tabs

Contenitore con pannelli a schede commutabili; ogni scheda si aggiunge con il controllo Add tab. Machine name: az_tabs.

Label Parameter Control Default Allowed values Description
Tab direction az_dirrection radio vuoto (Default) vuoto (Default), tabs-left (Left), tabs-right (Right) Posizione della barra delle schede. Il codice scrive il parametro così.
Style tab_style radio vuoto (Default) vuoto (Default), modern (Modern), accordion (Accordion) Stile delle schede.
Mobile friendly responsive toggle on yes quando attivo Mostra le schede come comprimibile sugli schermi piccoli.

Ogni scheda (az_tab) ha le sue impostazioni:

Label Parameter Control Default Allowed values Description
Tab title title text Title Qualsiasi testo Etichetta della scheda.
Tab description subtitle ckeditor vuoto HTML Sottotitolo breve facoltativo mostrato sulla scheda attiva.

Collapse panel

Contenitore di pannelli comprimibili; ogni pannello si aggiunge con il controllo Add toggle. Machine name: az_accordion.

Label Parameter Control Default Allowed values Description
Collapse collapsed toggle off yes quando attivo Parte con ogni pannello chiuso. Quando spento, il primo pannello parte aperto.
Expand icon expandicon radio vuoto (None) vuoto (None), az-accordion--icon-plusminus (+), az-accordion--icon-arrow (﹀) Icona accanto a ogni titolo di pannello.

Ogni pannello (az_toggle) ha le sue impostazioni:

Label Parameter Control Default Allowed values Description
Toggle title title text Title Qualsiasi testo Titolo del pannello.

Contenitore di slide; ogni slide contiene altri elementi e si aggiunge con il controllo Add slide. Le slide (az_slide) non hanno campi propri. Machine name: az_carousel.

Label Parameter Control Default Allowed values Description
Frames per slide items slider 1 da 1 a 10, passo 1 Slide mostrate fianco a fianco. Gli schermi più stretti ne mostrano meno.
Disable auto-play autoplay toggle off yes quando attivo Impedisce alle slide di avanzare da sole.
Auto-play interval interval slider 5000 da 1000 a 20000, passo 100 Tempo tra le slide in millisecondi.
Stop on hover stoponhover toggle off yes quando attivo Mette in pausa l’avanzamento automatico mentre il puntatore è sopra il carosello.

Campi nell’accordion Dots. Ogni campo dopo Dots navigation è mostrato solo mentre è attivo:

Label Parameter Control Default Allowed values Description
Dots navigation pagination toggle on yes quando attivo Mostra un punto per ogni slide.
Dots orientation pagination_orientation radio outside (Outside slider) outside (Outside slider), inside (Inside slider) Posizione dei punti.
Dot shape pagination_shape radio bar (Bar) bar (Bar), circle (Circle), square (Square), triangle (Triangle) Forma dei punti.
Active dot transformation pagination_transform radio vuoto (None) vuoto (None), growTaller (Grow taller), growWider (Grow wider), scaleUp (Scale up) Effetto sul punto attivo.
Dot color pagination_color colour nessuno Qualsiasi colore Colore dei punti.
Active dot color pagination_active_color colour nessuno Qualsiasi colore Colore del punto attivo.

Campi nell’accordion Next/Previous. Ogni campo dopo Next/Previous è mostrato solo mentre è attivo:

Label Parameter Control Default Allowed values Description
Next/Previous navigation toggle off yes quando attivo Mostra le frecce avanti e indietro.
Orientation navigation_orientation radio outside (Outside slider) outside (Outside slider), inside (Inside slider) Posizione delle frecce.
Dot shape navigation_shape radio vuoto (No background) vuoto (No background), circle (Circle), square (Square), bar (Bar) Forma dello sfondo della freccia. La finestra lo chiama anche Dot shape.
Icon color navigation_icon_color colour nessuno Qualsiasi colore Colore dell’icona freccia.
Icon hover color navigation_icon_hover_color colour nessuno Qualsiasi colore Colore dell’icona freccia al passaggio del mouse.
Background color navigation_background_color colour nessuno Qualsiasi colore Colore di sfondo della freccia.
Background hover color navigation_background_hover_color colour nessuno Qualsiasi colore Colore di sfondo della freccia al passaggio del mouse.
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) Posizione delle frecce fuori dallo slider.

Positioned layers

Tela su cui gli elementi figli si trascinano e ridimensionano liberamente. Un elemento Positioned layers non può essere annidato dentro un altro. Machine name: az_layers. Ogni figlio salva il suo posto in parametri nascosti: pos_left, pos_top, pos_width, pos_height e pos_zindex.

Label Parameter Control Default Allowed values Description
Width width text 100% Lunghezza CSS, per esempio 100px o 50% Larghezza della tela. Un numero senza unità vale come pixel.
Height height slider 500 da 0 a 10000, passo 1 Altezza della tela in pixel.
Responsive responsive toggle off yes quando attivo Ridimensiona l’altezza della tela e le dimensioni dei font con la larghezza disponibile.

E adesso?