---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/riferimento/riferimento-agli-elementi'
title: 'Riferimento agli elementi | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:58:38+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '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.'
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: 'Riferimento agli elementi'
      description: '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.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:58:38+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/it/hc/documentazione/impara-dxpr-builder/riferimento/riferimento-agli-elementi'
      articleSection: 'Elementi e CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/riferimento/riferimento-agli-elementi'
      description: '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.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Riferimento](/it/hc/documentation/learn-dxpr-builder/reference) /[Elementi e CSS](/it/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Riferimento agli elementi.

 Impara DXPR BuilderRiferimentoElementi e CSS

   ## In questa guida

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](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/scheda-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](/it/hc/documentazione/impara-dxpr-builder/design/scheda-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](/it/hc/documentation/learn-dxpr-builder/elements/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](/it/hc/documentazione/impara-dxpr-builder/elementi/immagine)

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

### [Image carousel](/it/hc/documentazione/impara-dxpr-builder/elementi/carosello-di-immagini)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/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](/it/hc/documentazione/impara-dxpr-builder/elementi/video-locale)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/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](/it/hc/documentazione/impara-dxpr-builder/elementi/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](/it/hc/documentazione/impara-dxpr-builder/elementi/pulsante)

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

### [Link element](/it/hc/documentazione/impara-dxpr-builder/elementi/link)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/avviso)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/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](/it/hc/documentazione/impara-dxpr-builder/elementi/pannello)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/citazione-in-blocco)

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

### [Social links](/it/hc/documentazione/impara-dxpr-builder/elementi/link-social)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/contatore-numerico)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/contatore-circolare)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/barra-di-avanzamento)

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](/it/hc/documentation/learn-dxpr-builder/elements/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](/it/hc/documentation/learn-dxpr-builder/elements/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](/it/hc/documentation/learn-dxpr-builder/elements/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](/it/hc/documentazione/impara-dxpr-builder/elementi/icona)

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](/it/hc/documentazione/impara-dxpr-builder/elementi/divisore)

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](/it/hc/documentazione/impara-dxpr-builder/layout/sezioni)

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](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne)

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](/it/hc/documentazione/impara-dxpr-builder/layout/righe-e-colonne)

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](/it/hc/documentazione/impara-dxpr-builder/layout/pannello-a-schede)

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](/it/hc/documentazione/impara-dxpr-builder/layout/pannello-comprimibile)

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

### [Carousel](/it/hc/documentazione/impara-dxpr-builder/layout/layout-carosello)

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](/it/hc/documentazione/impara-dxpr-builder/layout/livelli-posizionati)

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?

- [Panoramica degli elementi](/hc/documentation/learn-dxpr-builder/elements)
- [Panoramica dei layout](/hc/documentation/learn-dxpr-builder/layout/overview)
- [Impostazioni degli elementi](/hc/documentation/learn-dxpr-builder/element-settings)