--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/riferimento/classi-css' title: 'Riferimento alle classi CSS | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:58:41+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- I contenuti DXPR Builder usano classi Bootstrap 5 insieme ad alcune classi proprie. Questo riferimento elenca quelle che più probabilmente userai o prenderai di mira nel CSS. 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-23T23:58:41+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Riferimento alle classi CSS' description: |- I contenuti DXPR Builder usano classi Bootstrap 5 insieme ad alcune classi proprie. Questo riferimento elenca quelle che più probabilmente userai o prenderai di mira nel CSS. 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:41+0000' dateModified: '2026-10-23T23:58:41+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/classi-css' articleSection: 'Elementi e CSS' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/riferimento/classi-css' description: |- I contenuti DXPR Builder usano classi Bootstrap 5 insieme ad alcune classi proprie. Questo riferimento elenca quelle che più probabilmente userai o prenderai di mira nel CSS. 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 alle classi CSS. Impara DXPR BuilderRiferimentoElementi e CSS ## In questa guida I contenuti DXPR Builder usano classi Bootstrap 5 insieme ad alcune classi proprie. Questo riferimento elenca quelle che più probabilmente userai o prenderai di mira nel CSS. ## Aggiungere classi personalizzate 1. Seleziona l’elemento. 2. Apri **More > Settings**. 3. Nella sezione **General** scegli classi nel campo **HTML classes**. Per digitare qualsiasi nome di classe, fai clic su **Edit as text** e separa le classi con spazi. ## Classi griglia Bootstrap ### Classi contenitore | Classe | Descrizione | |---|---| | `.container` | Contenitore centrato a larghezza fissa | | `.container-fluid` | Contenitore a tutta larghezza | ### Classi di righe e colonne | Classe | Descrizione | |---|---| | `.row` | Contenitore flex per colonne | | `.col-{n}` | Colonna da n/12 di riga | | `.col-sm-{n}` | Larghezza colonna su small (576px e oltre) | | `.col-md-{n}` | Larghezza colonna su medium (768px e oltre) | | `.col-lg-{n}` | Larghezza colonna su large (992px e oltre) | | `.col-xl-{n}` | Larghezza colonna su XL (1200px e oltre) | ## Utilità di spaziatura Bootstrap ### Margine | Classe | Descrizione | |---|---| | `.m-{0-5}` | Margine su tutti i lati | | `.mt-{0-5}` | Margine superiore | | `.mb-{0-5}` | Margine inferiore | | `.ms-{0-5}` | Margine iniziale (sinistra in LTR) | | `.me-{0-5}` | Margine finale (destra in LTR) | | `.mx-{0-5}` | Margine sinistro e destro | | `.my-{0-5}` | Margine superiore e inferiore | ### Padding | Classe | Descrizione | |---|---| | `.p-{0-5}` | Padding su tutti i lati | | `.pt-{0-5}` | Padding superiore | | `.pb-{0-5}` | Padding inferiore | | `.ps-{0-5}` | Padding iniziale | | `.pe-{0-5}` | Padding finale | | `.px-{0-5}` | Padding sinistro e destro | | `.py-{0-5}` | Padding superiore e inferiore | ## Utilità di testo Bootstrap | Classe | Descrizione | |---|---| | `.text-start` | Testo allineato a sinistra | | `.text-center` | Testo centrato | | `.text-end` | Testo allineato a destra | | `.fw-bold` | Testo in grassetto | | `.fw-light` | Testo leggero | | `.fst-italic` | Testo in corsivo | | `.text-uppercase` | Testo maiuscolo | | `.text-lowercase` | Testo minuscolo | | `.fs-1` a `.fs-6` | Dimensione font (1 la più grande) | ## Utilità di colore Bootstrap ### Colori del testo | Classe | Descrizione | |---|---| | `.text-primary` | Colore primario del tema | | `.text-secondary` | Colore secondario del tema | | `.text-success` | Verde (successo) | | `.text-danger` | Rosso (pericolo/errore) | | `.text-warning` | Giallo (avviso) | | `.text-info` | Ciano (informazione) | | `.text-muted` | Testo grigio attenuato | | `.text-white` | Testo bianco | ### Colori di sfondo | Classe | Descrizione | |---|---| | `.bg-primary` | Sfondo primario | | `.bg-secondary` | Sfondo secondario | | `.bg-success` | Sfondo verde | | `.bg-danger` | Sfondo rosso | | `.bg-warning` | Sfondo giallo | | `.bg-info` | Sfondo ciano | | `.bg-light` | Sfondo grigio chiaro | | `.bg-dark` | Sfondo scuro | ## Utilità di visualizzazione Bootstrap | Classe | Descrizione | |---|---| | `.d-none` | Nascondi l’elemento | | `.d-block` | Visualizzazione a blocco | | `.d-inline` | Visualizzazione inline | | `.d-sm-none` | Nascondi da small in su | | `.d-md-block` | Mostra da medium in su | | `.d-lg-none` | Nascondi da large in su | ## Classi DXPR Builder ### Classi degli elementi | Classe | Descrizione | |---|---| | `.az-element` | Classe base sulla maggior parte degli elementi di contenuto; Button e Image non ce l’hanno, quindi prendi di mira `.az-` al suo posto | | `.az-` | Una classe per tipo di elemento, come `.az-text`, `.az-image` o `.az-images-carousel`; Social Links usa `.st-social` | | `.az-section` | Elemento sezione | | `.row` | Elemento riga (Bootstrap); i contenuti di versioni precedenti possono avere anche `.az-row` | | `.col-*` | Elemento colonna (Bootstrap); i contenuti di versioni precedenti possono avere anche `.az-column` | ### Classi di animazione Le animazioni usano la nomenclatura di animate.css. Mentre un elemento si anima ha: | Classe | Descrizione | |---|---| | `.animated` | Aggiunta mentre l’animazione è in corso | | `.infinite` | Aggiunta quando **Infinite** è attivo | | Nome dell’animazione, come `.fadeIn` | L’effetto **Animation in** o **Animation out** in riproduzione | ### Classi delle varianti | Classe | Descrizione | |---|---| | `.az-variant-container` | Contenitore del test A/B, insieme a `.rl-experiment` | | `.az-variant-wrapper` | Ogni ramo di variante | | `.az-variant-original` | Il ramo originale (A) | | `.az-variant-1`, `.az-variant-2` | I rami B, C e così via | | `.az-variant-active` | Il ramo mostrato al momento | ## Usare le classi per la visibilità reattiva Combina le utilità di visualizzazione Bootstrap per mostrare o nascondere contenuti a dimensioni di schermo specifiche: ```html
Mobile content
Desktop content
``` Aggiungi queste classi nel campo **HTML classes** dell’elemento (nella sezione **General** delle impostazioni) per controllare la visibilità reattiva.